.fullBoi {
    background-image: linear-gradient(#003b59, #0892d0);
    display: flex;
    flex-direction: column;
    text-align: center;
    overflow: hidden;
    height: 100vh;
}

body {
    margin: 0
}

span {
    font-family: sans-serif;
    font-size: 4vh;
    color: rgb(200,200,200);
    text-shadow: black 1vh 1vh 1vh;
}

.clickable {
    color: white;
    text-decoration: underline;
}

.reset {
    margin-top: 10vh;
}

.contact{
    margin-top: auto;
    margin-bottom: 1vh;
}

.contactSpan {
    font-size: 2vh;
}

.invisible {
    display: none;

}

.predictionTop {
    margin: 10vh auto 0 auto;
    max-width: 90vw;
}

.predictionBottom {
    margin: 4vh auto 0 auto;
    max-width: 90vw;
}

.headerImage{
    height: 30vh;
    min-height: 30vh;
    max-width: 95vw;
    margin: 10vh auto 0 auto;
}

.textImage {
    max-width: 95vw;
    height: 15vh;
    margin: 5vh auto 0 auto;
}

.clickableClock {
    height: 20vh;
}

.fadeOut {
    height: 15vh;
    margin: 5vh auto 0 auto;
    animation-name: vanish;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.fadeIn {
    height: 15vh;
    margin: 5vh auto 0 auto;
    animation-name: appear;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

.growingAndVanishing {
    height: 20vh;
    animation-name: growAndVanish;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes growAndVanish {
    from {
        transform: scale(1);
    }
    to {
        transform:scale(20);
        opacity: 0;
    }
}

@keyframes vanish {
    from {
    }
    to {
        opacity: 0;
    }
}

@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* fuck using specific resolutions for this garbo, just check if it's vertical and base everything off vh */

@media only screen and (orientation: portrait) {

    .headerImage {
        margin-top: 1vh
    }

    .textImage {
        margin: 0 auto 0 auto;
    }

    .clickableClock {
        height: 30vh;
    }

    .fadeOut {
        max-width: 95vw;
        margin: 0 auto 0 auto;
    }

    .growingAndVanishing {
        height: 30vh;
    }

    .predictionTop{
        margin-top: 0;
        max-width: 90vw;
    }

    .predictionBottom {
        max-width: 90vw;
        text-overflow: clip;
    }

    .reset {
        margin-top: 5vh;
    }
}