/* Required */
*, *:before, *:after{box-sizing:border-box; margin:0; padding:0;}
html, body{height:100%; width:100%; font-family:Arial, sans-serif; font-weight:normal; color:#FAFAFA; background:#000c18;}

/* MAIN */
body{margin-top:4em;}
main{padding:0.5em 1em; margin:0 auto;}
figure img{width:auto; height:auto; max-width:100%; display:block; margin:0 auto;}

h1{text-transform:uppercase; height:auto; font-size:2em; text-align:center;}
h2{height:auto; font-size:1.5em; text-align:center;}
h3{text-align:center;}
p{padding:0.5em 0;}
section{padding:0.5em 0;}
abbr[title]{text-decoration:none; border-bottom:1px dashed #000; cursor:help;}
abbr[title]:after{content:" (" attr(title) ")";}

/* NAVIGATION */
nav{border:0;}
nav ul{list-style:none; margin:0; padding:0; overflow:hidden; background:#00162b; position:fixed; top:0; width:100%; height:4em; display:flex; justify-content:center; align-items:center;}
nav li{float:left;}
nav li a{display:block; color:#fff; text-align:center; padding:1.5em 0.8em; text-decoration:none;}
nav li a:hover{color:#0050a1;}
nav .active{color:#0078ef;}
nav img{width:1.6em; height:1.6em;}
nav img:hover{transform:rotate(360deg); transition-duration:2s;}

/* CONTENT */
.box{margin:1em; border:3px solid #000; min-width:20em;}
.box div{padding:1em 1.5em;}
.box p{font-size:1.25em;}
.box input{font-size:1.25em; background:#003366; color:#fff; border:5px double #dcedff; margin:10px; padding:5px;}
.box .donate{border:5px double #dcedff; margin:10px; padding:5px;}
.box .download form:before{content:" >> ";}
.box .download form:after{content:" << ";}
.box span{font-size:0.85em;}
.box a{color:#0078ef;}
.box .bg{background:#003366; color:#fff; border:0; margin:0 auto; text-align:center;}
.box .bg a{color:#fff;}

.faq{margin:1em; border:1px solid #000; min-width:20em;}
.faq td{padding:1em;}
.faq tr:nth-child(odd){background:#003366; color:#fff;}
.faq tr:nth-child(even){background:#000c18; color:#FAFAFA;}
.faq tr a{color:#0078ef;}
.box, .faq, figure img{box-shadow:0 0 20px #2196F3;}

.admin td{padding:0.5em;}
.admin input{background:#fff; color:#000; border:1px solid #003366; text-align:right;}
.admin .submit{width:12em; height:4em; background:#0050a1; border:none; color:#fff; text-align:center;}

/* FOOTER */
footer{background:#00162b; color:#fff;}
.contact{min-width:20em;}
.contact h3{padding:1em 0;}
.contact form{margin-bottom:1.5em;}
.contact label{display:block; margin:0.5em; cursor:pointer;}
.contact ul{list-style:none;}
.contact li{padding:0 0.5em;}
.contact input, .contact textarea{height:3em; background:#efefef; padding:0.7em; font-size:0.8em; color:#000; border:none;}
::placeholder{color: white; opacity: 1;}
.contact #name:valid, .contact #email:valid, .contact #human:valid, .contact textarea:valid{background:#efefef;}
.contact #name:invalid, .contact #email:invalid, .contact #human:invalid, .contact textarea:invalid{background:#990000;}

.contact textarea{height:10em; max-width:25em;}
.contact .submit{width:12.5em; height:3em; background:#0050a1; border:none; color:#fff;}
.contact_box{display:none;}
#tcontact:checked + .contact_box{display:block;}
#tcontact{display:none;}

footer .bar{background:#000c18; padding:1em;}
.valid, .social, .copyright{list-style:none;}
.copyright{margin:0 auto; text-align:center;}
.copyright a{text-decoration:none; color:#fff;}
.valid li, .social li{float:left; margin:0 0.5em;}
.valid img, .social img{display:block; margin:0; width:2em; height:2em;}


#favorite{list-style:none; margin:0; padding:0; overflow:hidden; background:red; position:fixed; bottom:0; width:100%; height:4em; display:flex; justify-content:center; align-items:center;}
#favorite .close{width:1.5em; height:1.5em; background:#fff; border:1px solid #000; color:#000; text-align:center; display:flex; position:absolute; top:1.25em; right:1.25em; text-decoration:none; justify-content:center; align-items:center;}


.hidden{display:none;}
.center{margin:0 auto; text-align:center;}
.flexed{display:flex; justify-content:space-around;}
.submit{cursor:pointer;}

/* MEDIA SCREENS */
@media screen and (max-width:37.9em){
	html{font-size:80%;}
	.flexed{flex-wrap:wrap;}
}
@media screen and (min-width:38em) and (max-width:47.9em){
	html{font-size:80%;}
}
@media screen and (min-width:48em) and (max-width:69.9em){
	html{font-size:90%;}
	.contact .flexed{justify-content:center;}
}
@media screen and (min-width:70em) and (max-width:91.9em){
	html{font-size:100%;}
	.contact .flexed{justify-content:center;}
}
@media screen and (min-width:92em) and (max-width:124.9em){
	html{font-size:110%;}
	.contact .flexed{justify-content:center;}
}
@media screen and (min-width:114em) and (max-width:135.9em){
	html{font-size:125%;}
	.contact .flexed{justify-content:center;}
}
@media screen and (min-width:136em){
	html{font-size:150%;}
	.contact .flexed{justify-content:center;}
}
@media (prefers-color-scheme:light) {
	body{background:#121212; color:#000;}
	main{background:#fff;}
	.faq tr:nth-child(even){background:#fff; color:#000;}
	.box, .faq, figure img{box-shadow:0 0 25px #000; border-color:#fff;}
}