.navbar{grid-area:n;background:-webkit-linear-gradient(rgba(230,235,235,.9),rgba(240,240,240,.7));background:-o-linear-gradient(rgba(230,235,235,.9),rgba(240,240,240,.7));background:linear-gradient(rgba(230,235,235,.9),rgba(240,240,240,.7));position:fixed;width:100%;z-index:3}
.navbar ul{margin:0;padding:0;list-style:none;overflow:hidden}
.navbar li a{display:block;padding:5px 5px;color:var(--darkPurple);text-decoration:none;text-align:center}
.navbar .menu-btn:hover,.navbar li a:hover{background:rgb(175,17,17,.8);color:var(--white);border-radius:3px}
.navbar .logo{display:block;float:left;font-size:1.25em;padding: 0.5em;margin-top:0.1em;text-decoration:none;place-self: center;}
.navbar .logo img{height:2em;width:auto; margin: auto;}
.navbar .menu{clear:both;max-height:0;transition:max-height .4s ease-out}
.navbar .menu-icon{cursor:pointer;float:right;padding:35px 20px;position:relative;user-select:none}
.navbar .menu-icon .nav-icon{background:#524343;display:block;height:2px;position:relative;transition:background .4s ease-out;width:18px}
.navbar .menu-icon .nav-icon:after,.navbar .menu-icon .nav-icon:before{background:#524343;content:'';display:block;height:100%;position:absolute;transition:all .4s ease-out;width:100%}
.navbar .menu-icon .nav-icon:before{top:5px}
.navbar .menu-icon .nav-icon:after{top:-5px}
.navbar .menu-btn{display:none}
.navbar .menu-btn:checked~.menu{max-height:350px}
.navbar .menu-btn:checked~.menu-icon .nav-icon{background:0 0}
.navbar .menu-btn:checked~.menu-icon .nav-icon:before{transform:rotate(-45deg);top:0}
.navbar .menu-btn:checked~.menu-icon .nav-icon:after{transform:rotate(45deg);top:0}
@media (width>47em){
.navbar li{float:left}
.navbar li a{padding:30px 15px}
.navbar .menu{clear:none;float:right;max-height:none}
.navbar .menu-icon{display:none}
}
@media (min-width:1080px){
.navbar li a{padding:30px 35px}
}
.switch{margin-top:24px;position:relative;display:inline-block;width:68px;height:34px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.3s;transition:ease-in .3s}
.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:var(--white);-webkit-transition:.4s;transition:.4s}
input:checked+.slider{background-color:#2196f3}
input:focus+.slider{box-shadow:0 0 1px #2196f3}
input:checked+.slider:before{-webkit-transform:translateX(34px);-ms-transform:translateX(34px);transform:translateX(34px)}
.slider.round{border-radius:34px}
.slider.round:before{border-radius:50%}
@media (prefers-color-scheme:dark){
:root{--blue:#323ffa;--white:#faf0f0;--red:#c70f0f;--darkred:#aa0a0a;--grey:rgb(0, 0, 0,)}
.navbar{grid-area:n;background:-webkit-linear-gradient(to right,rgba(5,5,15,.9),rgba(5,5,15,.75),rgba(5,5,15,.9));background:-o-linear-gradient(to right,rgba(5,5,15,.9),rgba(5,5,15,.75),rgba(5,5,15,.9));background:linear-gradient(to right,rgba(5,5,15,.9),rgba(5,5,15,.75),rgba(5,5,15,.9));color:var(--white);position:fixed;width:100%;z-index:3}
.navbar li a{color:var(--white);text-decoration:none}
.navbar .menu-btn:hover,.navbar li a:hover{background:rgba(157,5,5,.8);color:var(--grey)}
.navbar .menu-icon .nav-icon{background:rgba(121,92,92,.7)}
.navbar .menu-icon .nav-icon:after,.navbar .menu-icon .nav-icon:before{background:rgba(121,92,92,.7)}
.slider{background-color:#ccc}
.slider:before{background-color:var(--white)}
input:checked+.slider{background-color:#2196f3}
input:focus+.slider{box-shadow:0 0 1px #2196f3}
}