// <weight>: Use a value from 200 to 800
// <uniquifier>: Use a unique and descriptive class name

html {
  scroll-behavior: smooth;
}
.oxanium-<uniquifier> {
  font-family: "Oxanium", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.anta-regular {
  font-family: "Anta", sans-serif;
  font-weight: 400;
  font-style: normal;
}

@keyframes fadeinup{
	from{
		opacity:0;	
		transform:translateY(100px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	}
}
body{
	width:100vw;
	overflow-x:hidden;
	margin:0px;
	font-family: "Oxanium", sans-serif;
	font-size:18px;
}
#headlogo{
	width:40%;
	animation-name:logoanim;
	animation-duration:1s;
}
#pagehead{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	align-items:center;
	justify-content:center;
	margin:auto;

}

h2{
	font-family:"Anta", sans-serif;
	font-size:clamp(22.5px, 4vw, 60px);
}
#pagehead h1{
	width:40%;
	border-left:5px solid #00f0ff;
	padding-left:5%;
	font-size: clamp(30px, 5vw, 70px);
	animation-name:headanim;
	animation-duration:1s;
}
#navbar{
	display:flex;
	flex-direction:row;
	list-style-type:none;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-evenly;
		
}
#navbar a{
	padding:1%;
	text-decoration:none;
	color:black;
	}
#navbar li{
	text-decoration:underline transparent;
	text-underline-offset:0.5em;
	color:black;
	transition:text-decoration-color 0.75s;
	margin-bottom:1%;
	}
#navbar li:hover{
	text-decoration-color: #00f0ff;
}
#navbar a:visited{
	text-decoration:none;
	color:black;
}
.halfwidth{
	width:40%;
	
}
hr{
	width:25%;
	border:2.5px solid #00f0ff;
}
#what{
	font-size:clamp(40px, 50px, 60px);
	width:90%;
	margin-left:1%;
	text-wrap:wrap;
	text-align:center;
}

#whattext{
	width:90%;
	
}
.secone{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:center;
	background-color:#000191;
	padding:1%;
	color:white;
	
}
#why{
	text-align:center;
}
.why img{
	width:30%;
}
.why{
	width:30%;
	display:flex;
	align-items:center;
	flex-direction:column;
	text-align:center;
	padding:2.5%;
	animation:fadeinup linear both;
	animation-timeline: view();
	animation-range:entry 0% entry 95%;
	
}
#sectwo{
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content:space-evenly;
}
#bio{
	margin:2.5%;
	margin-top:5%;
	display:flex;
	flex-wrap: wrap;
	flex-direction:row;
	align-items:center;
	justify-content:space-evenly;

}
#bio h2{
	text-align:center;
}
#bio img{
	width:30vw;
	box-shadow:5px 5px 5px 5px rgba(0, 1, 145, 0.5) ;
	margin-right:5%;
	
}
#inner{
	width:50%;
}
#inner h2{
	text-decoration:underline #000191;
	text-underline-offset:0.25em;
}
#blue{
	color:#000191;
	display:inline;
}
#footer{
	background-color:black;
	color:white;
	text-decoration:none;
	font-size:16px;
	text-align:center;
	margin-bottom:none;
	padding-top:2.5%;
	padding-bottom:2.5%;
}
#footer a{
	text-decoration:underline;
	color:white;
}
.empty-message h2{
	text-align:center;
}
.empty-message p{
	text-align:center;
	color:white;
	background-color:#000191;
	width:50%;
	padding:2.5%;
	margin-left:22.5%;
	margin-right:22.5%;
}
iframe{
	width:75%;
	margin-left:12.5%;
	margin-right:12.5%;
	max-height:200vh;
	overflow:scroll;
	border:5px solid #000191;
}
.center{
	text-align:center;
}
.numbering{
	font-size:30px;
	color:white;
	height:35px;
	width:35px;
	border-radius:18px;
	background-color:#000191;
	text-align:center;
	margin-right:1%;
	transition:color 1s, background-color 1s;
}
.numbering:hover{
	color:#00f0ff;
	background-color:black;

}

.reg-item p:not(.numbering){
	width:75%;
}
.reg-item b{
	color:black;
	transition:color 0.5s;
}
.reg-item b:hover{
	color:#00f0ff;
}
.reg-item{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}
@keyframes logoanim {
	from{translate: 50px 0px;}
	to{translate:0px 0px;}
}
@keyframes headanim {
	from{translate: -50px 0px; border:none;padding-left:0px;}
	to{translate:0px 0px;}
}
#qbank{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
}
.question{
	width:17.5%;
	background-color:#000191;
	padding:1%;
	color:white;
	margin:2.5%;
	border-radius:10%;
}
.sideline{
	text-decoration: underline #00f0ff;
	text-underline-offset:0.5em;

}
.compinfo h3{
	font-size:18px;
	color:#000191;
	
	text-align:center;
}
.compinfo{
	text-align:center;
	animation:fadeinup linear both;
	animation-timeline: view();
	animation-range:entry 0% entry 200%;
}
#asidelist li{
	padding:5px;
	background-color:#000191;
	width:20vh;
	display:inline-block;
	text-align:center;
	color:white;
}
#asidelist li:hover{
	cursor:pointer;
	
}
#asidelist li a:active #display{
	background-color:pink;
}

#display{
	
	height:100px;
	border:solid-black;
	overflow-y:scroll;
	overflow-x:hidden;

	
}
.section{
	width:25%;
	margin:2.5%;
	background-color:white;
	box-shadow:5px 5px 10px rgba(0, 1, 145, 0.5);
	
	padding:1.5%;
	color:black;
	transition: box-shadow 0.75s, transform 0.75s;
}
.section:hover{
	box-shadow:10px 10px 15px rgba(0,1,145,0.45);
	transform:translate(-7.5px, -7.5px);
}
.section img{
	width:2%;
	transition: transform 1s;
	margin-left:1%;
	
	}
.section img:hover{
	transform:rotate(180deg);
}
.section h3{
	font-size:30px;
	text-decoration:underline #00f0ff;
	text-underline-offset:0.5em;
	text-align:center;
	color:#000191;
}


.slidein{
	visibility:visibile;
	height:auto;
}
#vitals{
	display:flex;
	flex-direction:row;
	justify-content:space-evenly;
	margin-bottom:5%;
}
.flexlay{
	display:flex;
	flex-direction:row;
	justify-content:space-evenly;
	margin-bottom:5%;
}
#cont{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-evenly;
	
}
#reghere{
	background-color:#000191;
	color:white;
	
	
	
}
#reghere a{

}

/**#reghere:hover{
	background-color:#00f0ff;
	color:#000191;
}**/

.eblue{
	color:#00f0ff;
}
.flexlayhalf{
	background-color:#000191;
	display:flex;
	justify-content:space-evenly;
}
.flexlayhalf h2{
	width:50%;
	
}
.vdiv{
	height:clamp(10vh,4vh,25vh);
	margin-top:1%;
	margin-bottom:1%;
	border:0px solid white;
}
.white{
	color:white;
}
#qbank h3{
	text-decoration:none;
}
table{
	width:100%;
	table-layout:fixed;
}

.basic-margin{
	margin-left:1%;
	margin-right:1%;
}
td:not(th){
	border:1px solid black;
	height:50vh;
	overflow-y:scroll;
	vertical-align:top;
	transition:box-shadow 0.75s;
}
td:hover{
	box-shadow:5px 5px 5px rgba(0, 1, 145, 0.5);
}
th{
	background-color:#000191;
	padding:1%;
	color:white;
	height:auto;
	transition:background-color 0.75s;
}
th:hover{
	background-color:black;
}
.bottomspace{
	margin-bottom:2.5%;
}
.topic-list li{
	animation:fadeinup ease-in both;
	animation-timeline: view();
	animation-range:entry 0% entry 300%;
}
.topic-list{
	 display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;
	flex-direction:column;
}
.topic-list ul{
	width:75vw;
	text-wrap:wrap;
	box-shadow:2.5px 2.5px 10px rgba(0, 1, 145, 0.5);
	padding:-1%;
	padding-top:1%;
	padding-bottom:1%;
	padding-right:1%;
	transition:box-shadow 0.75s;
}
.topic-list ul:hover{
	box-shadow:2.5px 2.5px 20px rgba(0, 240, 255,0.5)
}

td ul{
	list-style-type:none;
}

.red{
	color:red;
}