@font-face {font-family: mainFont;src: url(../fonts/Montserrat.ttf);}
@font-face {font-family: gregi;src: url(../fonts/soloiststraight1.ttf);}
:root {
    --primary: rgb(0, 166, 255);
    --primary-light: blue;
    --primary-dark: blue;
    --secondary: green;
    --accent: yellow;
	--white: white;
    --light: rgb(234, 234, 234);
    --dark: rgb(33, 33, 33);
	--black: black;
	--dimmish: rgba(255, 255, 255, 0.5);
	--dim: rgba(255, 255, 255, 0.2);
    --filter-accent: brightness(0) saturate(100%) invert(69%) sepia(27%) saturate(5617%) hue-rotate(167deg) brightness(100%) contrast(103%);
	--filter-white: invert(100%);
    --br: 12px;
    --br-r: 50px;
	--gap: 1rem;

    --border: rgb(53, 53, 53);
    --border-light: rgb(85, 85, 85);

    --button-hover: 0px 0 0 60px var(--primary) inset;
    --shadow: 0px 6px 5px 0px rgba(0,0,0,0.05);

    --fs-l: 1.2rem;
    --fs-m: 1rem;
    --fs-s: 0.8rem;
}
::-moz-selection {color: var(--black);background: var(--white);}
::selection {color: var(--black);background: var(--white);}
*,*::before,*::after {box-sizing: border-box;}
* {margin: 0;padding: 0;font: inherit;}
html {scroll-behavior: smooth;}

html,
body {
    height: 100%;
	width: 100%;
	overscroll-behavior: none;
}
body {
	background: url("../images/640.webp") no-repeat center center fixed;
	background-size: cover;
	overflow: hidden;
	color: white;
	font-family: mainFont;
	text-rendering: optimizeSpeed;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    font-family: inherit;
    color: inherit;   
}
p, a {
    font-family: inherit;
    color: inherit;
    text-decoration: none;
	& span {
		font-weight: bold;
	}
}
h1, h2 {
	font-size: var(--fs-l);
	font-weight: bold;
}
a, img, iframe {-webkit-user-select: none;-ms-user-select: none;user-select: none;}



/* Title for SEO */
.visually-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid white;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: var(--br);
	flex: 0;
	transition: 400ms;
	position: relative;
	cursor: pointer;
	&:hover {background: rgba(255, 255, 255, 0.2);padding-right: 35px; 
		&::after {opacity: 1;transform: translateY(-50%) translateX(0);}}
	&::after {
		content: "→";
		position: absolute;
		right: 10px;
		font-size: 1.5em;
		top: 45%;
		font-weight: bold;
		transform: translateY(-50%) translateX(5px);
		opacity: 0;
		transition: transform 400ms, opacity 400ms;
	}
}

/* --- ACTUAL CONTENT --- */
/* Base Rules */
main {
	width: 100dvw;
	height: 100dvh;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(20px); 
	-webkit-backdrop-filter: blur(10px);
	position: relative;
	touch-action: none;
}
.icon {
	max-width: 30px;
	filter: invert(100%);
	transition: transform 300ms;
	&:hover {transform: scale(1.1) translateY(-5px);}
}
img {
	width: 100%;
	&.big {max-width: 600px;}
	&.medium {max-width: 300px;}
	&.small {max-width: 50px;}
}
.logo {
	filter: var(--filter-white);
	max-width: 600px;
}

/* Content Rules */
nav.socials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: var(--gap);
}
.container {
	max-width: 800px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap);
}
section.section {
	position: fixed;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(0);
	pointer-events: none;
	z-index: 100;
	padding: 1rem;
}
#summary {
	.current {
		background: rgba(255, 255, 255, 0.3);
	}
	& nav.summary {
		display: flex;
		flex-direction: column;
		margin-bottom: 1rem;
		gap: var(--gap);
		& > div {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 0.5rem;
			& > a {
				transition: 200ms;
				min-width: 180px;
				text-align: center;
				&:hover {
					font-weight: bold;
				}
				&.btn {
					font-weight: bold;
					&:hover {
						padding-right: 20px;
					}
					&:after {
						display: none;
					}
				}
			}
		}
	}
	& footer {
		position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
		text-align: center;
		color: var(--dim);
		padding-bottom: 1rem;
	}
}


.return {
	position: fixed;
	top: 20px;
	left: 20px;
	margin-inline: auto;
	color: var(--dim);
	font-weight: bold;
	transition: 300ms;
	&:hover {
		color: white;
	}
	&::before {
		content: "← ";
		transform: rotate(180deg);
		font-size: 1.3em;
	}
}