/* GENERAL */
* {font-family: Arial, Helvetica, sans-serif; font-kerning: auto;}

html, body {margin: 0 auto; height: auto; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: bottom; background-image: url(https://i.pinimg.com/originals/50/e6/d2/50e6d2c491ab9b7126c52bf9480a490e.jpg);}
    
.dark-mode {color: white; height: auto; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: top; background-image: url(https://wallpapercave.com/wp/wp9290438.jpg);}

h1, h2, h3, h4, h5, h6 {
    font-family: "Impact", sans-serif; letter-spacing: 2px;}

h1 {color: hotpink; font-size: 30px; margin-top: 30px;}

p {font-size: 14px;}

/* NAV HEADER */
header {
    background-image: url(https://scified.com/u/IMG_20250824_170351.jpg); 
    background-repeat: no-repeat; background-size: cover; background-position: top;
    color: white; 
    font-family: Impact, sans-serif; 
    font-size: 14px; 
    position: fixed; 
    height: 60px; width: 100%; z-index: 999;}

header a {
    float: left; color: white; padding-left: 30px; padding-right: 20px; text-decoration: none; text-shadow: 0 0 10px violet;}

header img {
    max-height: 30px; max-width: 200px; padding-top: 15px; padding-left: 25px; cursor: pointer;}
  
header a:hover {
    color: white; text-shadow: 0 0 20px hotpink;}

/* HERO */
.hero {
    width: 100%; height: 830px; background-repeat: no-repeat; background-size: cover; background-position: top; 
    background-image: url(https://images.hdqwalls.com/wallpapers/godzilla-x-kong-the-new-empire-5k-chinese-poster-vo.jpg);}

.hero-text {
    position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); font-family: Impact, 'Arial Narrow Bold', sans-serif; letter-spacing: 2px; font-size: 50px; color: white; text-shadow: 0 0 30px hotpink;}

/* SECTION LAYOUT & COLLAPSABLE HEADINGS */
.section0 {padding-top: 10px; padding-left: 50px; padding-right: 50px; padding-bottom: 30px; text-shadow: 0 0 20px white;}

.collapsible {background-color: darkslateblue; border-style: solid 5px; border-color: white; color: white; cursor: pointer; width: 100%; text-align: left;}

.active, .collapsible:hover {background-color: hotpink;}

.content {padding-left: 0 50px; padding-top: 10px; display: none; overflow: hidden; background-color: clear;}

/* FOOTER */
footer {
    background-image: url(https://scified.com/u/IMG_20250824_170351.jpg); 
    background-repeat: no-repeat; background-size: cover; background-position: bottom; 
    color: white; height: 90px; width: 100%; text-align:center; text-shadow: 0 0 10px violet;}

footer p {
    padding-top: 10px;}

footer a {
    color: white; font-size: 14px; text-decoration: none;}

footer a:hover {
    color: white; text-shadow: 0 0 20px hotpink;}