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

.darkmodeButton {
position: absolute;
z-index: 5;
top:0;
left:0;
background-color:rgba(0,0,0,0.5);
border-color: transparent;
border-width: 10px;
border-radius: 5px;
padding: 5px;
color:white;
}


.section {
	padding: 10px;
}

.sectionContainer {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.textSection{
	color: var(--primary);
}

h1 {
	font-size: 7.5vmin;
	font-family: 'Roboto', sans-serif;
}

h2 {
font-size: 3.5vmin;
font-family: 'Roboto', sans-serif;
}

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

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

.largeText {
font-size: 10vmin;
font-family: 'Roboto', sans-serif;
}


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

}

a{
	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;
		font-family: 'Roboto', sans-serif;
	}

}


/* darkmode logic */#
/*
.darkmode {
	background-color: #050505;
	filter: invert(100%);
}

.darkmodeButton {
position: absolute;
z-index: 5;
top:0;
left:0;
color:white;
}

.darkmode .darkmodeButton {
filter: invert(100%);
}

.darkmode iframe {
	filter: invert(100%);
}

.darkmode .headerSection {
	filter: invert(100%);
}*/

html {
	--bg: #fafafa;
	--primary: #000000;
	--secondary: #FFFFFF;
}

html.dark {
    --bg: #050505;
	--primary: #FFFFFF;
	--secondary: #000000;
}

@media (prefers-color-scheme: dark) {
	html {
    --bg: #050505;
	--primary: #FFFFFF;
	--secondary: #000000;
  }
  
  html.light {
	--bg: #fafafa;
	--primary: #000000;
	--secondary: #FFFFFF;
	}
}