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

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#get-your-fuck {
    /* font-family: 'Eater', serif; */
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100vh;
    background-color: orange;

    #milk-face-container {
        position: absolute;
        width: 100%;
        height: 100vh;
        background-color: transparent;
    }

    .milk-face {
        /* display: none; */
        width: 200px;
        height: 100px;
        aspect-ratio: 2 / 1;

        background-image: url('/getyourfuck/assets/miabomiabom.jpg');
        background-size: 100% 220%;
        background-repeat: no-repeat;
        background-position-x: -33px;

        position: absolute;
        bottom: calc(50% - 100px);
        right: calc(50% - 100px);
        z-index: 1;

        opacity: 0.5;

        animation-name: fade;
        animation-duration: 1000ms;
        animation-timing-function: linear;
        animation-direction: normal;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;

        /* border: 10px solid red; */
    }


    #globe {

        position: absolute;
        width: 100%;

        img {
            width: 100%;
        }
    }


    h1 {
        color: yellow;
        font-size: 90px;
        /* text-align: center; */

        position: absolute;
        z-index: 2;

        width: 100%;

        /* animation-name: shrink; */
        animation-duration: 2000ms;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: linear;

        span {
            text-transform: uppercase;
            color: white;
            background-color: black;
            display: inline-block;
            text-align: center;
            width: 300px;
        }
    }

    #getyour {
        left: 0;
        top: 0;
    }

    #getyour:before {
        content: '“';
    }


    #outtamy {
        top: 90px;
        right: 0;

        text-align: right;
    }

    #outtamy:after {
        content: '”';
    }

}

@keyframes shrink {
    0% {
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
    }

    100% {
        width: 0%;
        margin-left: 50%;
        margin-right: 50%;
    }

}

@keyframes fade {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0;
    }

}