@import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap');

*{
    color: #1D7A7A;
    font-family: "Inclusive Sans", sans-serif;
}

body{
    background-color: #EEFCFC;
    background-image: url("../images/background-mobile.svg");
    background-size: cover;     
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 1.2rem;
    
    
    content{
        max-width: 32rem;
        text-align: center;
        flex-grow: 1;
        align-content: center;

    
        img{
            width: 8rem;
        }
        

        h1{
            font-size: 1.6rem;
            font-family: "Lemon", serif;
            margin-block: 0.8rem;
        }
    
        p{
            font-size: 0.9rem;
            font-weight: 400;
            color: rgba(29, 122, 122, 0.863);
        }

        a{
            text-decoration: none;
        }
        
        a:hover{
            background-color: #CFF6F6;
            color: #1D7A7A;
        }

        .downloadBtn{
            background-color: #1D7A7A;
            padding-block: 0.6rem;
            padding-inline: 1.2rem;
            color: white;
            border-radius: 0.4rem;
            margin-block-start: 2rem;
            display: inline-block;
        }

        .downloadBtn:hover{
            background-color: #135858;
            transform: translateY(-0.2rem);
            color: white;

        }

        
    }

}

footer{
    background-color: #EEFCFC;
}

@media (width>650px) {

    body{
    background-image: url("../images/background.svg");

    content{
        max-width: 28rem;

        h1{
            font-size: 2.5rem;
        }
    
        p{
            font-size: 1rem;
        }
    
        .downloadBtn{
            padding-block: 0.8rem;
        }
    }
        
    }

    
}

@keyframes guppyMove {
    0%{ transform: translateY(0) }
    50% { transform: translateY(-0.5rem) }
    100% { transform: translateY(0) }
}

.applyFishMove{
    animation-name: guppyMove;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}