@font-face {
        font-family: BebasNeue;
        src: url(fonts//Oswald/Oswald-Regular.ttf);
    }

    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        scroll-behavior: smooth;
        scroll-snap-type: y proximity;
        overflow-x: hidden;
        font-family: BebasNeue;
    }

    body>div {
        min-height: 100vh;
        scroll-snap-align: start;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1rem;
        position: relative;
        overflow: visible;
    }

    h1 {
        font-size: clamp(9rem, 21vw, 15rem);
        margin: 0.5rem 0;
    }

    .bigText {
        font-size: clamp(3rem, 10vw, 6rem);
        margin: 0.5rem 0;
    }

    .projectText,
    h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin: 0.5rem 0;
    }

    p,
    .formText,
    .smallText {
        font-size: clamp(1rem, 2.5vw, 1.5rem);
        max-width: 800px;
    }

    img {
        max-width: 80%;
        height: auto;
    }

    nav {
        position: fixed;
        top: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
        padding: 0.75rem 1rem;
        z-index: 10;
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        transition: transform 0.3s ease;
    }

    nav.hidden {
        transform: translateY(-100%);
        /* slide nav out of view */
    }

    nav a {
        color: white;
        text-decoration: none;
        font-size: clamp(1rem, 2vw, 1.25rem);
    }

    nav a:hover {
        text-decoration: underline;
    }

    footer {
        background: #eee;
        color: black;
        padding: 1rem;
        text-align: center;
        position: relative;
        scroll-snap-align: none;
        font-size: clamp(3rem, 4vw, 3rem);
    }

    footer a {
        color: inherit;
        text-decoration: none;
    }

    footer a:hover {
        text-decoration: underline;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
    }

    .card {
        flex: 0 1 20rem;
        margin: 0;
        border: none;
    }

    .card-text {
        font-size: clamp(1rem, 2vw, 1.5rem);
    }

    .card-body {
        border: none;
    }

    .card-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        padding: 2rem;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    li {
        padding: 0.5rem 0;
        padding-left: 1rem;
        margin-bottom: 0.5rem;
        background: #ccd5db;
        border-radius: 4px;
        border: none;
    }

    table {
        margin: 25px auto;
        border-collapse: collapse;
        width: auto;
        max-width: 1000px;
        border-radius: 8px;
    }

    td,
    th {
        padding: 10px;
        text-align: left;
        font-size: clamp(1rem, 2vw, 1.5rem);
    }

    a {
        text-decoration: none;
    }

    .no-link {
        text-decoration: underline;
        color: inherit;
    }

    code {
        font-size: clamp(100rem, 50vw, 50rem);
    }

    .strokesPictures {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
        align-items: flex-start;
        max-width: 1400px;
        margin: 0 auto;
        padding: 1rem;

    }