/* @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');

* {
    font-family: 'Press Start 2P';
    color: cornflowerblue;
    background-color: black;
} */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


}

@font-face {
    font-family: myFont;
    src: url(MyGirlIsRetro-0Grz.ttf);

}

@font-face {
    font-family: Victory;
    src: url(VictoryComicsGradient-omLa.otf);
}

@font-face {
    font-family: romantic;
    src: url(Romantiques.ttf);
}

header {
    /* animation: tlo 0.2s linear 10; */
    width: 100%;
    text-align: center;
}




h1 {
    font-family: myFont;
    color: darkgreen;
    font-size: 5rem;

    letter-spacing: 4px;
    margin-left: 5vw;

}

.graty {
    font-family: Victory;
    font-size: 9rem;
    color: white;
    letter-spacing: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 5s linear;
    /* animation: hh22 5s linear; */



}

.poracha {
    font-family: Victory;
    font-size: 9rem;
    color: white;
    letter-spacing: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 5s linear;

}

main {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 85vh;
    width: 100%;
    align-items: stretch;

}

.eye {
    background-color: deepskyblue;
    height: 40%;
    display: block;
    position: relative;




}

.animated {
    animation: tlo 0.1s linear 60;
    /* background-color: red; */
}

img {
    display: block;
    position: absolute;
}

.upArrow {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 23vw;
    opacity: 0;
}

.downArrow {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14vw;
    opacity: 0;

}

.input {

    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;



}

.cry {
    height: 26vh;
    transition: linear 1.3s;
    overflow: hidden;

}

.move6 {
    opacity: 0;
    transform: translateY(90%);
}

.minions {
    height: 26vh;
    transition: linear 1.3s;
    overflow: hidden;


}

.move4 {
    /* transform: translateX(360%); */
    opacity: 0;

}

.trans0 {
    transition: 0s;
}

.question {
    width: 9%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}



.inpucik {
    height: 12vh;
    width: 18vw;
    font-family: myFont;
    color: darkgreen;
    font-size: 3rem;
    text-align: center;
    background-color: deepskyblue;
    border: solid 3px darkgreen;

    animation: shakes 4s linear infinite;
    border-radius: 30%;
    transition: linear 0.4s;




}


input::placeholder {
    color: darkgreen;
    font-size: 3rem;
    font-style: italic;
    letter-spacing: 3px;
    text-align: center;
}



.go {
    background-color: deepskyblue;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    display: block;
    position: relative;


    font-family: myFont;
    height: 23vh;
    width: 23vh;
    border-radius: 55%;
    border: 3px solid darkgreen;
    background-color: deepskyblue;
    color: darkgreen;
    font-size: 3rem;
    background-color: white;
    cursor: pointer;
    letter-spacing: 1px;
    transition: 0.5s;
    padding: 30px;
    overflow: hidden;

}

span {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;


}

.second {
    left: 200px;

}

.third {
    top: -12%;

}

.forth {
    top: -12%;
}

.fifth {
    top: -12%;
}

.move1 {
    top: 50%;
}

.move2 {
    top: 100%;

}

button:hover {

    border-color: white;
    color: white;
    background-color: #FF0000;
}

button:hover .first {
    left: -233px;

}

button:hover .second {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* input:hover:placeholder {
    color: transparent;
} */


/* @keyframes hh22 {
    from {
        transform: rotate(0deg);

    }

    to {
        transform: rotateX(360deg);


    }
} */

@keyframes shakes {
    0% {
        transform: translateX(0) rotateX(0deg)
    }

    90% {
        transform: translateX(0) rotateX(0deg)
    }

    91% {
        transform: translateX(20px) rotateX(-10deg)
    }

    92% {
        transform: translateX(-20px) rotateX(10deg)
    }

    93% {
        transform: translateX(20px) rotateX(-10deg)
    }

    94% {
        transform: translateX(-20px) rotateX(10deg)
    }

    95% {
        transform: translateX(20px) rotateX(-10deg)
    }

    96% {
        transform: translateX(-20px) rotateX(10deg)
    }

    97% {
        transform: translateX(20px) rotateX(-10deg)
    }

    98% {
        transform: translateX(-20px) rotateX(10deg)
    }

    99% {
        transform: translateX(20px) rotateX(-10deg)
    }

    100% {
        transform: translateX(0) rotateX(0deg)
    }
}

@keyframes tlo {
    0% {
        background-color: white;

    }

    100% {
        background-color:
            red;

    }

}