:root {color-scheme: light dark;}

* {margin: 0; padding: 0; box-sizing: border-box;}

h1 {font-family: Nunito, sans-serif; text-align: center; font-size: 100px;}

p {font-family: Nunito, sans-serif; text-align: center;}
	
html {overflow-y: scroll; }

html.dark-mode {color-scheme: dark;}

body {
	font-family: 'Nunito', sans-serif;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

.settings {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000;
	font-family: 'Nunito', sans-serif;
	font-size: 12px;
}

.settingsbutton {
	width: 50px; height: 50px;
	background-color: white;
	border: 2px solid black;
	border-radius: 5px;
	padding: 20px 20px;
	cursor: pointer;
	font-size: 12px;
	font-family: Nunito, sans-serif;
	box-sizing: border-box;
	box-shadow: 0 2px 10px rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: width 0.1s ease-in-out;
	position: relative;
	z-index: 1000;
}

.settingsbutton.settingsbuttonexpanded {width: 180px;}

.settingscontent { 
	position: absolute;
	top: 60px;
	right: 0;
	background-color: white;
	border: 2px solid black;
	padding: 12px;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.5);
	width: 180px;
	flex-direction: column;
	gap: 10px;
	z-index: 999;
	line-height: normal;
	transform-origin: top right;
	visibility: hidden;
	transform: scale(0.8) translateY(-10px);
	opacity: 0;
	transition: all 0.1s ease-in-out;
	pointer-events: none;
}

.settingscontent.show {
	visibility: visible;
	transform: scale(1) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.setting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 50px;
	padding: 8px 0;
}

.modelabel {font-size: 14px; color: black; line-height: 35px; margin-left: 8px; display: flex; align-items: center;}

body.dark-mode .settingsbutton {background-color: #333333; color: #cccccc; border-color: black;}

body.dark-mode .settingscontent {background-color: #333333; color: #cccccc;}
	
body.dark-mode .modelabel {color: #cccccc;}

.themetoggle {
	position: relative;
	width: 60px;
	height: 35px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.themetoggle input {opacity: 0; width: 0; height: 0;}
	
.slider {
	display: inline-block;
	position: relative;
	width: 100%; height: 100%;
	cursor: pointer;
	background-color: #cccccc;
	border-radius: 35px;
	transition: 0.5s;
}

.sliderknob {
	position: absolute;
	height: 26px; width: 26px;
	left: 4px;
	top: 50%;
	background-color: white;
	border-radius: 50%;
	transition: 0.5s;
	transform: translateY(-50%);
}

input:checked + .slider {background-color: #444444;}

input:checked + .slider .sliderknob {transform: translate(26px, -50%);}
	
.titlecontainer {
	background-image: linear-gradient(to right, #40bbff, #0040aa);
	width: 100%; 
	height: 15vh;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;	
	font-size: 40px;
	color: black;
	border-bottom: 1px solid black;
}

.titlecontainer p {margin-left: 10px;}

.dark-mode .titlecontainer {background-image: linear-gradient(to right, #0040aa, #000066); color: #cccccc;}

.subjecttitle {
	display: block;
	font-size: 40px; 
	margin-bottom: 15px;
	text-align: center;
	width: 100%;
	color: black;
}

body.dark-mode .subjecttitle {color: #cccccc;}

.subjectbutton {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 25%; max-width: 100%;
	padding: 6vh 12vw;
	margin: 40px 0;
	font-size: 22px; color: black; text-decoration: none;
	background-color: #eeeeee;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	text-align: center;
	transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
	opacity: 0.95;
	transform: scale(0.9);
	scroll-snap-align: center;
	pointer-events: none;
	box-sizing: border-box;
}

.subjectbutton.active .buttoncontent {pointer-events: auto;}

body.dark-mode .subjectbutton {background-color: #111111; color: #cccccc;}

.subjectbuttoncontainer {
	height: 80%; width: 80%; max-width: 1600px;
	margin: 20px auto;
	overflow-y: scroll;
	scroll-behavior: smooth; 
	overflow-x: hidden; 
	scroll-snap-type: y mandatory;
	padding: 10px;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

body.dark-mode .subjectbuttoncontainer {background-color: #333333;}

.subjectbutton.active {opacity: 1; transform: scale(1.01); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); background-color: #dddddd; pointer-events: auto; transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;}

.subjectbutton.active:hover {background-color: #d8d8d8; transition: background-color 0.1s ease; transform: translateY(-4px);}

.subjectbutton:not(.active) {opacity: 0.7; transform: scale(1); box-shadow: none;}

.subjectbuttoncontainercontainer {background-color: white; height: 75vh; display: flex; align-items: center;}

body.dark-mode .subjectbuttoncontainercontainer {background-color: #222222;}

body.dark-mode .subjectbutton:active {background-color: 1111111;}

.buttonspacer {height: 170px; pointer-events: none;}
	
body.dark-mode .subjectbutton.active:hover {background-color: #151515;}

.pages {
	font-family: Nunito, sans-serif; 
	width: 100%; 
	height: 10vh; 
	display: flex; 
	justify-content: center;  
	align-items: center; 
	flex-direction: column; 
	background-color: #eeeeee; 
	padding: 20px;
}

.pages a {color: #cccccc; text-decoration: underline; font-size: 25px;}

.pages a:hover {color: #bbbbbb;}

body.dark-mode .pages {background-color: #1a1a1a; color: #cccccc;}

body.dark-mode .pages a {color: #444444;}

body.dark-mode .pages a:hover {color: #555555;}

@media (max-width: 600px) {.button {max-width: 90%;} }