/* text font */
@font-face {
    font-family: 'Orbitron';
    src: 	url('../fonts/orbitron.woff2') format('woff2'),
            url('../fonts/orbitron.woff') format('woff');
    }
    
/* timer font */
@font-face {
    font-family: 'Ostrich';
    src: 	url('../fonts/ostrich.woff2') format('woff2'),
            url('../fonts/ostrich.woff') format('woff');
    }

/* timer will have a long font */
body {
    margin: 0;
    padding: 0;
    background-color: black;
    text-align: center;
    position: relative;
    font-family: 'Ostrich';
    font-size: 44vw;
    font-weight: bold;
    transition: all 0.5s ease-in-out, height 0ms;
}

/* inverted colors on every element inside h1 */
p {
    margin: 0;
    padding: 0;
    color: white; /* Set the text color to white */
    mix-blend-mode: difference; /* Use mix-blend-mode for inversion effect */
}

/* text will have a wide font */
.text {
    margin-top: -30%;
    font-family: 'Orbitron';
    font-size: 5.5vw;
}

.yes {
    margin-top: 10%;
    font-family: 'Orbitron';
    font-size: 4vw;
}