@font-face {
	font-family: 'Roboto';
	src: URL('/assets/Roboto-Regular.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: URL('/assets/Montserrat-Medium.ttf') format('truetype');
	font-display: swap;
}


html {
	scroll-behavior: smooth;
	--primary: #FFFFFF;
}

body{
	background-color:#4b00be;
}

html, body {
	margin: 0;
	padding: 0;
}

.sectionContainer {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	scroll-snap-type: y mandatory;
	overflow-y:scroll;
}

.section {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	width: 100%;
	height:100vh;
	color: var(--primary);
}

.centerSection {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
}

.desc {
	display: none;
}

/* email */
.nocopy {
	user-select: none;
}

.hidtxt{
	color: #00000000;
	font-size: 0px;
}

.invtxt{
	color: #00000000;
	font-size: 1px;
}

.rvsml {
	unicode-bidi: bidi-override; 
	direction: rtl;
} 

.hdml {
	display: none;
	visibility: hidden;
	width: 0px;
	height: 0px;
	padding: 0px;
	margin: 0px;
}

/* Discord invite card */
.socialMediaFlexbox {
	display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: row;
	overflow-x: auto;
}

.discordCard {
	background-color: black;
	border-radius: 10px;
	border-width: 20px;
	border-color: black;
	padding: 10px;

	text-align: center;
}


/*FORM INPUTS*/
input,textarea {
	background-color: black;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	color: white;
	width: 50vw;

	border: 2px solid black; 
	outline: 3px solid #00258a;

	border-radius: 5px;

	margin: 10px;
}

button {
	background-color: black;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	color: white;
	width: 50vw;

	border: 2px solid #0044ff; 
	border-radius: 5px;

	
	margin: 10px;
}

input:focus,textarea:focus {
	outline: 3px solid #0044ff;
}

/* TEXT */
/* Montserrat for headers
Roboto for text */
h1 {
	font-size: 10vmin;
	font-family: 'Montserrat', sans-serif;
}

h2 {
font-size: 7.5vmin;
font-family: 'Montserrat', sans-serif;
}

h3 {
font-size: 30px;
font-family: 'Montserrat', sans-serif;
}

h4 {
	font-size: 25px;
	font-family: 'Montserrat', sans-serif;
	}

p{
	font-size:20px;
	font-family: 'Roboto', sans-serif;
}

ul {
	font-size:17px;
	font-family: 'Roboto', sans-serif;
}


h1, h2, h3, h4, p, ul {
	margin: 5px;
}

.underline {
	text-decoration-line: underline;
	text-decoration-thickness: 2.5px;
}

.largeText {
font-size: 15vmin;
font-family: 'Montserrat', sans-serif;
}


/* LINK ANIMATION */
a{
	font-size:20px;
	font-family: 'Roboto', sans-serif;
	color: var(--primary);
	text-decoration: none;
}
a:hover{
	text-decoration-line: underline;
	text-decoration-thickness: 2.5px;
	animation-name: textHover;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

a:not(:hover) {
	text-decoration-line: underline;
	text-decoration-thickness: 2.5px;
	animation-name: textUnhover;
	animation-duration: 0.25s;
	animation-fill-mode: forwards;
}

@keyframes textHover{
	from{
		filter:invert(0%);
		text-decoration-color: transparent;
	}
	to{
		filter:invert(25%);
		text-decoration-color: var(--primary);
	}
}

@keyframes textUnhover{
	to{
		filter:invert(0%);
		text-decoration-color: transparent;
	}
	from{
		filter:invert(25%);
		text-decoration-color: var(--primary);
	}
}


@media screen and (max-width: 750px){
	a{
		font-size:30px;
	}

}