@media screen and (min-width:1025px) and (max-width:1200px) {
    nav{
        height: 5vh;
    }

    .cover{
        height: 30vh;
    }
}
@media screen and (min-width:769px) and (max-width:1024px) {
    nav{
        height: 5vh;
    }

    .cover{
        height: 30vh;
    }
    .diner-img{
        width: 80%;
    }
}
@media screen and (min-width:481px) and (max-width:768px){
    nav .links{
        display: none;
    }
    .cover a{
        width: 70%;
    }

    .diner-img{
        width: 500px;
    }

    .contain .steps{
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .contain .steps div{
        width: 100%;
    }
}
@media screen and (min-width:320px) and (max-width:480px) {
    nav .links{
        display: none;
    }

    .cover.about{
        width: 100%;
        height: 80vh;
    }
    .cover a{
        width: 90%;
        font-size: 12px;
    }
    .cover a i{
        font-size: 1rem;
    }


    .diner-img{
        width: 250px;
    }

    .contain .steps{
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .contain .steps div{
        width: 100%;
    }
}



@media screen and (max-width:1024px) and (max-height:768px) and (orientation: landscape){
    nav{
        height: 10vh;
    }
    nav .links{
        display: none;
    }

    .cover{
        height: 50vh;
    }

    .contain .steps{
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .contain .steps div{
        width: 100%;
    }
}
@media screen and (max-width:812px) and (max-height:600px) and (orientation: landscape){
    .cover{
        height: 80vh;
    }
}
@media screen and (max-height:414px) and (orientation: landscape) {
    nav{
        height: 15vh;
    }

    .cover{
        height: 80vh;
    }
}