.h1 {
    font-size: 5em;
    color: #FFFFFF;
    text-align: left;
    margin-top: 5vh;
    margin-left: 5vw;
    margin-right: 5vw;
    font-family: "Coolvetica", sans-serif;
}

@font-face {
    font-family: "Atkinson Hyperlegible Mono";
    src: url("AtkinsonHyperlegibleMono-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}

.h2 {
    font-size: 1.8em;
    color: #FFFFFF;
    text-align: left;
    margin-top: 10px;
    margin-left: 5vw;
    margin-right: 5vw;
    font-family: "Atkinson Hyperlegible Mono", sans-serif;
    font-weight: 100;
}

.project {
    background-color: #161616;
    text-align: left;
    margin-top: 5vh;
    margin-left: 5vw;
    margin-right: 5vw;
    margin-bottom: 5vh; /* Add bottom margin for spacing */
    position: relative; /* Enable positioning for child elements */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    max-width: 1000px; /* Limit the maximum width */
}

.project-title {
    font-size: 2em;
    color: #FFFFFF;
    font-family: "Atkinson Hyperlegible Mono", sans-serif;
    margin: 10px; /* Reset margin to avoid collapsing */
}

.project-description {
    font-size: 1.2em;
    color: #FFFFFF;
    font-family: "Atkinson Hyperlegible Mono", sans-serif;
    margin: 20px 10px; /* Use vertical margin for spacing */
}

.project-button {
    background-color: #ffee00;
    color: #161616;
    font-family: "Atkinson Hyperlegible Mono", sans-serif;
    font-size: 1em;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 0px;
    border: none;
    font-weight: 900;
    display: inline-block;
    /* transition: background-color 0.3s ease, color 0.3s ease; */
    margin: 0;
}
.project-button:hover {
    background-color: #000000;
    color: #ffee00;
}

/* container for project buttons removes whitespace gaps */
.project-buttons {
    display: flex;
    gap: 0;
    bottom: 0;
    left: 0;
    margin-top: 2vh;
}