html, body {
    height: 105vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 40px;
    padding: 0;
}


#welcome {
    background: whitesmoke;
    width: 60%;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 7px;
    padding-bottom: 12px;
    border: 8px solid black;
    border-radius: 10px;

    text-align: center;
    color: #331602;
    font-size: 1.35em;
}

#welcome {
    h1 {
        padding: 0;
        margin: 0;
        margin-top: 20px;
        margin-bottom: 5px;
    }
    h2 {
        padding: 0;
        margin: 0;
        margin-bottom: 15px;
        margin-top: 5px;
    }
}

#main {
    background: whitesmoke;
    width: 80%;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 7px;
    padding-bottom: 12px;
    border: 8px solid black;
    border-radius: 10px;

    text-align: center;
    color: #331602;
}

    /* Always Horizontal Navbar */
#navbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}
#navbar a {
    display: block;
    padding: 15px 20px;
    background: rgba(21, 21, 39, 0.7);
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s ease;
    font-size: 1.1em;
    font-weight: bold;
}
#navbar a:hover {
    background: rgba(21, 21, 39, 0.9);
}
#navbar a img {
    vertical-align: middle;
    margin-right: 8px;
    width: 20px;
}


    /* Wavy Text Animation */
.wave-letter {
    display: inline-block;
    animation: wave 1250ms ease-in-out infinite;
}
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

    /* Adjustments for Smaller Screens */

@media (max-width: 560px) {
    #welcome h2 {
        font-size: 1.34em;
    }
}
@media (max-width: 500px) {
    #welcome {
        width: 70%;
        margin-top: 10px;
        font-size: 1.6em;
    }
    #welcome h1 {
        font-size: 1.6em;
    }
    #welcome h2 {
        font-size: 1.4em;
    }
    #main {
        width: 70%;
        font-size: 1em;
    }
    html, body {
        gap: 20px;
    }
}
@media (max-width: 435px) {
    #welcome h1 {
        font-size: 1.6em;
    }
    #welcome h2 {
        font-size: 1.2em;
    }
}
@media (max-width: 350px) {
    #welcome h1 {
        font-size: 1.35em;
    }
    #welcome h2 {
        font-size: 1em;
    }
}