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

.imgScale {
    max-height: 80vh;
    display: block;
}

.vertical {
    position: fixed;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: 20px;
    color: red;
}

.centerText {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.popupImg {
    width: 500px;   
    transition: transform 0.2s;
}

.popupImg:hover {
    animation: shake 0.3s infinite;
}

.finalImg {
    opacity: 0;
    animation: finalImg 20s forwards;
    animation-delay: 3s;
    width: 500px;
}

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

.goBack {
    opacity: 0;
    font-size: 25px;
    color: red;
    text-decoration: line-through;

    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);

    animation: showText 1s forwards;
    animation-delay: 15s;
}


.goBack:hover {
    text-decoration: underline;
    cursor: pointer;
}

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

@keyframes shake {
    0%   { transform: translate(0px, 0px) rotate(0deg); }
    20%  { transform: translate(-3px, 1px) rotate(-1deg); }
    40%  { transform: translate(3px, -1px) rotate(1deg); }
    60%  { transform: translate(-3px, 1px) rotate(0deg); }
    80%  { transform: translate(3px, -1px) rotate(1deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}