*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
/** {border: 1px solid grey;}*/
@font-face {font-family: inter-regular; src: url("/assets/fonts/inter-regular.ttf") format('truetype'); font-weight: normal;}
@font-face {font-family: inter-medium; src: url("/assets/fonts/inter-medium.ttf") format('truetype'); font-weight: normal;}
@font-face {font-family: inter-bold; src: url("/assets/fonts/inter-bold.ttf") format('truetype'); font-weight: normal;}


:root {
	--max-width: 1440px; --padd: .5rem; --radius: .5rem;
	--col-text: white; --col-text-secondary: #CBEE52; --col-text-dark: #1e1e1e;
}

html {background: linear-gradient(180deg, rgba(19,19,19, 1), rgba(24,24,24,1)); min-height: 100vh; align-content: center; }
body {display: flex; font-family: inter-regular, Arial; color: white; margin: auto; width: 100%; transition: all ease-in-out .3s; padding: .5rem;}

h1, h2, h3, h4, b {font-weight: normal; color: #909090;}
a {text-decoration: none;}
b {color: white;}
p {color: #909090;}
img {display: block;}

.mtop16 {margin-top: 1rem;}
.b {font-family: inter-bold, Arial;}
.col1 {color: var(--col-text);} .col2 {color: var(--col-text-secondary);}

.social-links-container {
	display: flex; flex-direction: column; gap: .375rem; align-items: center;
	margin: auto; text-align: center; max-width: 480px; padding: 2rem; background-color: #1f1f1f; border-radius: .75rem;
}
.social-links-container > :nth-child(4) {}
.social-links-container > :nth-child(2) {}
.social-links-container img {max-width: fit-content;}
.social-links {display: flex; gap: .375rem; margin: 1.25rem 0rem;}
.social-links img {margin: auto; transition: transform ease .2s;}
.social-links a {aspect-ratio: 1/1; width: fit-content; min-width: 2.5rem; border-radius: .5rem; align-content: center; transition: all ease .2s;}
.social-links a:hover {background-color: #303030;}
.social-links a:hover img {transform: scale(1.1);}
.social-link-long {padding: .5rem; background-color: #333333; color: white; width: 100%; border-radius: var(--radius); min-height: 3rem; align-content: center; transition: all ease.1s;}
.social-link-long:hover, .active {background-color: var(--col-text-secondary); color: var(--col-text-dark);}
.social-link-long:hover {transform: scale(1.01);}
.active:hover {background-color: yellow; color: var(--col-text-dark); transform: scale(1.01);}

.body-container {width: 100%; min-height: 100vh;align-content: center; padding: 1rem; font-family: Arial;}

#sidebar {display: flex; flex-direction: column; justify-content: center; gap: .5rem; position: sticky; left: 0; top: 0; width: fit-content; height: 100vh; min-height: fit-content; background: linear-gradient(180deg, rgba(28,28,28,1), rgba(28,28,28,1)); z-index: 1; padding: .75rem;}
#sidebar a {width: 40px; height: 40px; border-radius: var(--radius); overflow: hidden; background-color: #161616;}
#sidebar a:hover {background-color: #242424; border: 1px solid #505050;}
#sidebar img {width: 40px; height: 40px; border-radius: var(--radius);}

.description-mini {font-size: .75rem; padding: .375rem .75rem; border: 1px solid #303030; border-radius: .75rem; margin-top: .75rem;}

.img-container {position: relative; margin: auto; max-width: var(--max-width);}
.img-container img {position: absolute; border: 1px solid orange;}


@media (max-width: 600px) {
	body {flex-direction: column;}
	#sidebar {position: sticky; flex-direction: row; width: 100%; height: fit-content; min-height: fit-content; bottom: 0;}
}

@media (max-width: 460px) {
	.social-links-container {padding: 2rem 1rem 1rem 1rem;}
}