body {
    font-family: monospace;
    background: #24afc1;
    text-transform: uppercase;
}



.bg {
    /* background-image: url(./bggif.gif);
    background-repeat: no-repeat;
    background-position: center; */
}

.zoom-in-out-box {
    display: none;
}

.box0,
.box1,
.box2,
.box3,
.box4 {
    display: none;
}

.box0 {
    width: 900px;
    height: auto;
    background-color: #fccf47;
    position: relative;
    animation: box-anim0 2s ease-in-out;
    position: absolute;
    left: 50%;
    top: 17%;
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
    border-radius: 5px;
}

@keyframes box-anim0 {
    0% {
        left: -100%;
    }

    100% {
        left: 50%;
        transform: translateX(-50%);
    }
}

.box {
    width: 900px;
    height: auto;
    background-color: #fccf47;
    position: relative;
    left: 50%;
    top: 10%;
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
    border-radius: 5px;
}

.box1 {
    width: 900px;
    height: auto;
    background-color: #fccf47;
    position: relative;
    animation: box-anim1 2s ease-in-out;
    position: absolute;
    left: 50%;
    top: 30%;
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
    border-radius: 5px;
}

@keyframes box-anim1 {
    0% {
        left: -100%;
    }

    100% {
        left: 50%;
        transform: translateX(-50%);
    }
}

.box2 {
    width: 900px;
    height: auto;
    background-color: #fccf47;
    position: relative;
    animation: box-anim2 2s ease-in-out;
    position: absolute;
    left: 50%;
    top: 43%;
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
    border-radius: 5px;
}

@keyframes box-anim2 {
    0% {
        left: -100%;
    }

    100% {
        left: 50%;
        transform: translateX(-50%);
    }
}

.box3 {
    width: 900px;
    height: auto;
    background-color: #fccf47;
    position: relative;
    animation: box-anim3 2s ease-in-out;
    position: absolute;
    left: 50%;
    top: 56%;
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
    border-radius: 5px;
}

@keyframes box-anim3 {
    0% {
        left: -100%;
    }

    100% {
        left: 50%;
        transform: translateX(-50%);
    }
}

.box4 {
    width: 900px;
    height: auto;
    background-color: #fccf47;
    position: relative;
    animation: box-anim4 2s ease-in-out;
    position: absolute;
    left: 50%;
    top: 69%;
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
    border-radius: 5px;
}

@keyframes box-anim4 {
    0% {
        left: -100%;
    }

    100% {
        left: 50%;
        transform: translateX(-50%);
    }
}



.zoom-in-out-box {
    /* margin: 24px; */
    /* width: 50px; */
    /* height: 50px; */
    /* background: #f50057; */
    animation: zoom-in-zoom-out 1.5s linear;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(.1, .1);
    }

    50% {
        transform: scale(.5, .5);
    }

    100% {
        transform: scale(1, 1);
    }
}

.head h1 {
    /* margin-top: 18px; */
    /* font-size: 50px; */
    font-weight: 600;
    letter-spacing: 2px;
}