/* Dark Black Themed */
:root {
    --dark-black: #0B0C0A;   /* Deep black background */
    --dark-gray: #121212;   /* Dark gray for contrast */
    --text-color: #E0E0E0;  /* Soft white text */
    --accent-gray: #A0A0A0; /* Lighter gray for accents */
    --font1: "Oswald";
    --font2: "Montserrat";
    --font3: "Roboto";
    --horizontal_margin: 7.5%;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

a {
    color: var(--text-color);
    transition: 0.2s;
}

a:hover {
    color: var(--accent-gray);
    transition: 0.2s;
}

header {
    z-index: 1;
    position: fixed;
    height: 10vh;
    width: 100%;
    display: flex;
    background: rgba(11, 12, 10, 0.9);  /* Black with slight opacity */
    font-family: var(--font2);
}

header #home {
    margin-left: var(--horizontal_margin);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    font-size: 150%;
}

header #pages {
    margin-right: var(--horizontal_margin);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    display: flex;
}

header #pages li {
    text-align: center;
    margin-left: 2vh;
}

@media (max-width: 800px) {
    header {
        height: 10vh;
    }
    header #home {
        font-size: 120%;
    }
    header #pages li {
        font-size: 80%;
    }
}

#hero {
    background: var(--dark-black);  /* Black background */
    height: 100vh;
    padding: 0 var(--horizontal_margin);
}

#hero #title {
    top: 45%;
    transform: translateY(-50%);
    position: absolute;
    width: 42.5%;
}

#hero #title h1 {
    color: var(--text-color);  /* White title */
    font-family: var(--font1);
}

#hero #title p {
    color: var(--accent-gray);  /* Gray text */
    text-align: left;
    font-family: var(--font3);
}

#hero #contact {
    bottom: 0;
    position: absolute;
    width: 85%;
    padding: 40px 0;
    border-top: var(--dark-gray) 2px solid;  /* Dark gray border */
    font-family: var(--font2);
}

#hero #contact ul {
    display: flex;
    justify-content: center;
}

#hero #contact ul li {
    padding: 0 10%;
    font-size: 80%;
}

#hero #contact ul li p {
    color: var(--accent-gray);  /* Gray text */
}

@media (max-width: 800px) {
    #hero #title h1 {
        font-size: 170%;
    }
    #hero #title p {
        font-size: 80%;
    }
    #hero #contact {
        padding: 7.5px 0;
    }   
    #hero #contact ul {
        display: block;
    }
    #hero #contact ul li {
        padding: 10px 5%;
        font-size: 60%;
    }
}