@charset "utf-8";
    /* CSS Document */

    @font-face {
        font-family: "Normal";
        src: url(fonts/normal.ttf);
    }

    @font-face {
        font-family: "Bold";
        src: url(fonts/bold.ttf);
    }

    * {
        border: 0px;
        margin: 0px;
        padding: 0px;
    }

    body {
        font-family: "Bold";
        background-color: white;
        animation-name: dynamic;
        animation-duration: 16s;
        animation-iteration-count: infinite;
        animation-direction: normal;
    }

    @-webkit-keyframes dynamic {
        0% {
            background-color: white;
        }

        4% {
            background-color: white;
        }

        8% {
            background-color: black;
        }

        42% {
            background-color: black;
        }

        48% {
            background-color: yellow;
        }

        64% {
            background-color: yellow;
        }

        100% {
            background-color: white;
        }
    }

    @keyframes dynamic {
        0% {
            background-color: white;
        }

        4% {
            background-color: white;
        }

        8% {
            background-color: black;
        }

        42% {
            background-color: black;
        }

        48% {
            background-color: yellow;
        }

        64% {
            background-color: yellow;
        }

        100% {
            background-color: white;
        }
    }

    a {
        color: white;
        text-decoration: none;
    }

    p {
        color: white;
        font-size: 4vw;
        mix-blend-mode: difference;
    }

    h1 {
        font-size: 10vw;
        color: white;
        mix-blend-mode: difference;
    }

    h2 {
        font-size: 4vw;
        color: white;
        mix-blend-mode: difference;
    }

    .header {
        position: fixed;
        inset: 0;
        mix-blend-mode: difference;
        z-index: 0;
    }

    #headertext {
        position: absolute;
        left: 5vw;
        top: 5 vw;
    }   

    #headerright {
        position: absolute; left: 40px;
    }


    .content {
        justify-content: center;
        align-items: center;
        display: flex;
        z-index: 1;
        width: 100%;
        height: 100vh;
        mix-blend-mode: normal;
    }

    #p5background {
        position: absolute;
        z-index: -1;
        mix-blend-mode: normal;
    }

    .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10vh;              /* optional */
    display: flex;
    align-items: center;
    padding-left: 40px;        /* optional to match your header */
    mix-blend-mode: difference;
    z-index: 10;
    }