@import "fonts_styles.css";

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: #1e1e1e;
}


* { color: white; text-decoration: none;}

.text{
    font-family: peach;
    font-size: 25px;

}

.zoom-in-out-box {
    cursor: pointer;
    height: 150px;
    width: 150px;
    animation: zoom-in-zoom-out 2s ease infinite;
}


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

@media only screen and (max-width: 320px) and (max-height: 568px) {
 
    .index{
       margin-left: -20px;
    }

    .text{
        font-size: 20px;
    }

    .zoom-in-out-box{
        height: 20px;
        width: 20x;
    }
}

@media only screen and (max-width: 414px) and (max-height: 736px) {

    .index{
        margin-right: 20px;
     }

    .text {
        font-size: 15px;
    }

    .zoom-in-out-box{
        height: 120px;
        width: 120px;
    }
}