body{
    display: none;
}

@media only screen and (max-width: 768px){
    *{
        box-sizing: border-box;
    }
    
    html,body{
        height: 100dvh;
        width: 100dvw;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }
    
    body{
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Ropa sans',sans-serif;
        background: rgba(134, 133, 133, 0.267);
    }
    
    .slider{
        width: 100dvw;
        height: 100dvh;
        text-align: center;
        overflow: hidden;
        margin-top: 0;
        padding-left: 2dvw;
        padding-right: 2dvw;
    }
    
    .slides{
        display: flex;
        overflow: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        margin-top: 0;
    }
    
    .slides::-webkit-scrollbar{
        width: 10px;
        height: 10px;
    }
    
    .slides::-webkit-scrollbar-thumb{
        border-radius: 3%;
    }
    
    .slides::-webkit-scrollbar-track{
        background: transparent;
    }
    
    .slides > article{
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 100dvw;
        height: 85dvh;
        border-radius: 3%;
        transform-origin: center;
        transform: scale(1);
        transition: 0.5s;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    footer > a{
        display: flex;
        width: 5dvw;
        height: 5dvh;
        padding: auto;
        background: transparent;
        text-decoration: none;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        position: relative;
    }
    
    footer > a:active{
        top: 1px;
    }
    
    footer > a:focus{
        background: white;
        color: navy;
    }
    
    @supports (scroll-snap-type: mandatory){
        .slider > a {
            display: none;
        }
    }

    footer{
        display: flex;
        bottom: 0;
        width: 95dvw;
        height: 12dvh;
        position: fixed;
        justify-content: space-evenly;
        align-items: center;
    }

    footer a{
        width: 16dvw;
        height: 9dvh;
        border: white 0.5px solid;
        border-radius: 5%;
        color: black;
        margin-top: 1dvh;
        margin-bottom: 2dvh;
        display: flex;
        background-color: white;
        align-items: center;
        justify-content: center;
        text-transform: capitalize;
        text-decoration: none;
        box-shadow: 0.5px 0.5px 0.5px 0.5px white;
    }
    footer a img{
        height: 7dvh;
        width: 12dvw;
    }
    img{
        height: 40dvh;
        width: 90dvw;
        margin-top: 0;
        border-radius: 3%;
    }

    .maintext{
        font-size: calc(14px + (26 - 14) * ((100dvw - 300px) / (1600 - 300)));
        color: black;
        background-color: white;
        height: 40dvh;
        width: 90dvw;
        margin-top: 3dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 3%;
        line-height: 0.15rem;
        border: white 0.5px solid;
        box-shadow: 0.5px 0.5px 0.5px 0.5px white;
        padding-bottom: 2dvh;
    }
    .maintext p{
        align-self: flex-start;
        justify-content: space-around;
        padding-left: 3dvw;
    }
    .maintext h1{
        color: navy;
    }
    .maintext h2{
        color: navy;
        font-size: calc(20px + (26 - 14) * ((100dvw - 300px) / (1600 - 300)));
    }
    .maintext h2::first-letter{
        color: red;
    }

    .mainform{
        font-size: 1rem;
        color: white;
        background-color: white;
        height: 80dvh;
        width: 90dvw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-wrap: nowrap;
        border-radius: 3%;
        line-height: .5dvh;
        text-wrap: wrap;
    }

    form{  
        height: 85dvh;
        width: 85dvw;
        border-radius: 1%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 5dvw;
        padding-right: 5dvw;
        padding-bottom: 1dvh; 
        color: navy;
        font-size: calc(16px + (26 - 14) * ((100dvw - 300px) / (1600 - 300)));
        font-weight: 400; 
    }
    
    form h1{
        margin-top: 2dvh;
        text-align: center;
    }

    form span{
        text-align: left;
    }

    input[type="text"],input[type="email"],input[type="button"]{
        height: 5dvh;
        width: 75dvw;
        font-size: 1rem;
        border-radius: 10px;
    }
    
    input[type="button"]{
        height: 6dvh;
        font-size: calc(14px + (26 - 14) * ((100dvw - 300px) / (1600 - 300)));
        text-transform: capitalize;
        color: white;
        background-color: navy;
        border-radius: 10px;
        margin-top: 1dvh;
        box-shadow: 1px 1px 1px 1px whitesmoke;
    }

    textarea{
        border-radius: 10px;
        min-height: 22.5dvh;
    }
    
    select{
        height: 5dvh;
        font-size: calc(14px + (26 - 14) * ((100dvw - 300px) / (1600 - 300)));
        border-radius: 10px;
    }

    .stars{
        color: red;
    }
}