@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&family=Raleway&display=swap";*{box-sizing:border-box}body{margin:0}img{max-width:100%}html{height:100%;font-size:1em}h1,h2,h3,h4,p,a,ul,li{margin:0;padding:0}h1,h2,h3,h4{font-family:Poppins,sans-serif}p,a,li,span,label,input,legend,tr,td,th,select,button{font-family:Raleway,sans-serif;font-size:1.2rem}header{display:grid;grid-template-columns:1fr 1fr}header .logo-link{display:block;margin:.25em}header #theme-btn{font-size:3em;display:block;margin:auto .25em auto auto;width:fit-content;transition:.2s;color:#49a078}header #theme-btn:hover{cursor:pointer;color:#9cc5a1}nav{background-color:#9cc5a1;width:auto;overflow:auto;position:sticky;top:0;z-index:2;box-shadow:0 .3em 1em .1em #000000af}nav ul{display:flex;flex-wrap:wrap;width:100%;overflow:auto;justify-content:right}nav ul li{list-style-type:none;text-align:center;justify-content:center}nav ul li a{padding:1em;width:fit-content;display:block;color:#1f2421;text-decoration:none;transition:.2s;width:auto}nav ul li a:hover{background-color:#216869;color:#fff;border-radius:1em}footer{min-height:8em;background-color:#49a078;display:flex;flex-wrap:wrap;justify-content:center}footer a{height:fit-content;display:block;margin:auto 0}footer p{color:#fff;text-align:center;margin:auto 0}main{flex:1;max-width:100em;padding:2em;margin:0 auto}.last-name{display:none}@media screen and (min-width: 400px){.last-name{display:inline}}.classDropdownContainer{margin:0 auto;width:fit-content}select{padding:.2em;border-radius:.5em;margin:1em auto}#student-list{display:flex;flex-wrap:wrap;gap:1em;justify-content:center}#student-list .student-name{width:10em;padding:.5em;text-align:center;background-color:#9cc5a1}#student-list .student-name span{color:#000}@media screen and (min-width: 400px){#student-list .student-name{width:15em}}#student-list .student-name.highlighted{background-color:#ff0;font-weight:700}#student-list .student-name.highlighted span{color:#000}button,.button-link{display:block;margin:2em auto;box-sizing:border-box;width:fit-content;background-color:#216869;border:none;padding:.5em 2em;color:#fff;transition:.2s;text-decoration:none}button:hover,.button-link:hover{cursor:pointer;background-color:#9cc5a1;color:#000;border-radius:1em}.logo img{width:150px}#loading-spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:5px solid #ccc;border-top:5px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}form{margin:2em auto}form fieldset{max-width:20em;margin:0 auto;box-sizing:border-box;border:.15em solid #49A078;border-radius:.7em;padding:1em}form fieldset legend{color:#49a078}form fieldset input{box-sizing:border-box;display:block;width:100%;padding:.3em;border-radius:.5em;border:.1em solid #49A078}form fieldset button{margin:1em auto 0}body{display:flex;min-height:100vh;flex-direction:column;background-color:#dce1de;transition:.5s}body .page_link{text-decoration:none;color:#216869;text-align:center;display:block;width:fit-content;margin:.5em auto 0;font-size:.9em}body .page_link:hover{text-decoration:underline}body.dark{background-color:#000}body.dark p,body.dark span,body.dark label,body.dark h1,body.dark h2,body.dark h3,body.dark h4,body.dark fieldset{color:#fff}body.dark #theme-btn{color:#49a078}body.dark #theme-btn:hover{color:#dce1de}body.dark fieldset input{background-color:#3d3d3d;color:#fff}body.dark .page_link{color:#9cc5a1}body.dark #hero .hero-content{background-color:#5151514a}body.dark #hero .hero-content:hover{background-color:#353535a7}body.dark #home-content #home-text ul li{color:#fff}body .logo-link{text-decoration:none}body .logo-link .logo{width:3em}#hero{position:relative;width:100%;height:24em;overflow:hidden}#hero .parallax-img{background-image:url(../../images/classroom.jpg);background-size:auto 120%;background-position-y:-4em;position:absolute;top:0;left:0;width:100%;height:100%;transform:translateZ(0)}@media screen and (min-width: 51em){#hero .parallax-img{background-size:cover}}@media screen and (min-width: 100em){#hero .parallax-img{background-size:cover;background-position-y:-8em}}#hero .hero-content{position:absolute;z-index:0;color:#fff;width:100%;height:100%;text-decoration:none;transition:.2s}#hero .hero-content .button{background-color:#49a078;width:fit-content;box-sizing:border-box;text-align:center;padding:.5em 1em;border-radius:1.5em;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);transition:.2s;box-shadow:0 0 1em .1em #000000af}#hero .hero-content:hover{background-color:#ffffff8d}#hero .hero-content:hover .button{padding:1em 1.5em}#home-content #home-text{max-width:50em;margin:0 auto}#home-content h3{margin:2em 0 1em;font-size:2em}#home-content p,#home-content li{margin:.5em 0;line-height:1.5}#home-content ul{padding:0 2em}#home-content ul li{list-style-type:circle}.student-name{position:relative;height:2.5em}.student-name img{position:absolute;width:1.5em;display:none;box-sizing:border-box}.student-name img:nth-of-type(1){left:25%}.student-name img:nth-of-type(2){left:67%}.student-name img:hover{cursor:pointer}.student-name:hover img{display:inline}.student-name:hover img:hover{border:1px solid black;border-radius:.2em}.student-name:hover span{display:none}#modal{display:none;position:fixed;z-index:3;left:0;top:0;width:100%;height:100vh;overflow:auto;background-color:#00000080}#modal .modal-content{background-color:#9cc5a1;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);padding:1em;max-width:20em;width:100%;border-radius:2em;box-shadow:0 .2em .4em #00000076}#modal .modal-content .close{position:absolute;right:10%;color:#49a078;font-size:28px;font-weight:700}#modal .modal-content .close:hover,#modal .modal-content .close:focus{color:#49a078;text-decoration:none;cursor:pointer}#modal .modal-content img{width:10em;display:block;margin:0 auto;box-shadow:0 .2em .4em #00000076;border-radius:1em}#modal .modal-content div{margin:1em auto;width:fit-content;text-align:center}#modal .modal-content .modalfname,#modal .modal-content .modallname{display:inline;margin-bottom:10px;color:#000;font-size:1.5em}