/*
     .d8888b.  888          888               888 
    d88P  Y88b 888          888               888 
    888    888 888          888               888 
    888        888  .d88b.  88888b.   8888b.  888 
    888  88888 888 d88""88b 888 "88b     "88b 888 
    888    888 888 888  888 888  888 .d888888 888 
    Y88b  d88P 888 Y88..88P 888 d88P 888  888 888 
     "Y8888P88 888  "Y88P"  88888P"  "Y888888 888 
*/

:root {
    --navbar-height : 8vh;
    color: #f0f0f0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #181818;
}

.content-button {
    color: transparent;
}

.centered-container {
    padding: 0 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--navbar-height);

    background-color: #181818;
    z-index: 1;
}

nav > a {
    position: relative;
    font-size: 4vmin;
    text-decoration: none;
    color: #f0f0f0;
    text-align: center;
    width: 33%;
}

nav > a:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 0.2vw;
    height: 100%;
    background-color: #f0f0f0;
    border-radius: 1rem;
}

nav::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 0.5vh;
    background-color: #f0f0f0;
}

section,
article {
    position: relative;
}

section:not(:last-of-type)::after,
article::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1.5vh;
    left: 0;
    width: 100%;
    height: 0.3vh;
    background-color: #f0f0f0;
    border-radius: 1rem;
}

section {
    position: relative;
}

.hero-image {
    margin: var(--navbar-height) 0;
    height: calc(100vh - (2 * var(--navbar-height)));
}

.hero-text > h1 {
    font-size: 9.5vmin;
    text-align: center;
}

footer {
    background-color: #181818;
    color: #f0f0f0;
    padding: 1.5rem;
    text-align: center;
    margin-top: 3rem;
}

footer p {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: bold;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

footer ul li a {
    color: #f0f0f0;
    transition: color 0.3s;
}

footer ul li a:visited {
    color: #666;
    transition: color 0.3s;
}

footer ul li a:hover {
    color: #f0f0f0;
}

footer .high-contrast-button {
    margin-top: 1vh;
    font-size: 2vh;
    padding: 0.5vmin 1vmin;
    background-color: #181818;
    outline: none;
    border: 2px solid #f0f0f0;
    color: #f0f0f0;
    font-weight: bold;
}