/*
 * Freed.place
 * Version 3.0
 * Copyright (c) 2025 FreedTapestry21
 */

/* Jetbrains Mono font by Jetbrains */
@font-face {
    font-family: 'Jetbrains Mono';
    src: local(''),
    	url('./fonts/jbmono.woff2')
}

/* VGA font by VileR @ int10h.org! */
@font-face {
    font-family: 'VGA';
    src: local(''),
        url('./fonts/ibm_vga8.woff2')
}

:root {
	--accent-color: #b4befe;
	--accent-color-dark: #9198cd;
    --background-color: #191724;
}

body {
	background-color: var(--background-color);
	color: var(--accent-color);
	font-family: 'Jetbrains Mono';
}

p {font-size: 18px;}
h1 {font-size: 34px;}
h2 {font-size: 30px;}
h3 {font-size: 26px;}
h4 {font-size: 22px;}

a {
	text-decoration: underline dotted;
	color: var(--accent-color-dark);
}

a:hover {
	color: var(--accent-color);
}

/* Custom */
.center {
	display: flex;
  	justify-content: center;
}

.img {
	max-height: 45vh;
	max-width: 300px;
}

.circle {
	border-radius: 50%;
}

.nocircle {
	max-height: 30vh;
}

/* Menu */
.menu {	
	background-color: var(--accent-color);
	color: var(--background-color);

	width: 100%;

	margin: auto;
}

.menu p {user-select: none; font-size: 20px;}

.menu a {
	color: var(--background-color);
	text-decoration: none; 
}

.menu a:hover {
	color: var(--accent-color);
	background-color: var(--background-color);
}

.name {text-align: left; width: 45%;}
.index {text-align: right; width: 45%;}

/* Footer */
.footer {	
	background-color: var(--accent-color);
	color: var(--background-color);

	width: 100%;

	margin: auto;
}

.footer p {font-size:12px;}

.footer a {
	color: var(--background-color);
	text-decoration: none;
}

.footer a:hover {
	color: var(--accent-color);
	background-color: var(--background-color);
}

.info {text-align: left; width: 45%;}
.copyright {text-align: right; width: 45%;}

/* Boxes */
.box {
	width: min(1400px, 80%);

	display: flex;
  	flex-direction: row;
	justify-content: center;
}

.item {
	font-family: VGA;
	padding: 10px;
	width: 50%;

	margin: auto;
}

.content {margin: auto; min-height: 400px;}

.invert {flex-direction: row-reverse;}

.links {white-space: nowrap; overflow: scroll;}