@media screen and (max-width: 360px) {
    body{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    h1,h2,h3,h4,h5,h6,label{
        font-family: 'Fira Sans', sans-serif;
    }
    
    p,ul,li,a,button,input{
        font-family: 'Quicksand', sans-serif;
    }
    
    section{
        width: 100%;
        height: auto;
    }
    
    .padding{
        padding: 5vh 0;
    }
    
    .padding-atas{
        padding-top: 7vh;
    }
    
    .padding-bawah{
        padding-bottom: 5vh;
    }
    
    
    .bg-gradien-hijau{
        background: linear-gradient(180deg, #1D788C -47.95%, #00A7CC 80.2%);
    }
    
    .text-hitam{
        color: #474747;
    }
    
    .text-putih{
        color: #ffffff;
    }
    
    .text-hijau{
        color: #00A7CC;
    }
    
    .btn-putih{
        width: 49%;
        margin: 10px 0.5%;
        display: block;
        border: 1px solid #ffffff;
        background-color: #ffffff;
        padding: 7px 15px;
        border-radius: 5px;
        float: left;
    }
    
    .btn-polos{
        display: block;
        margin: 10px 0.5%;
        width: 49%;
        border: 2px solid #ffffff;
        background-color: #ffffff00;
        padding: 7px 15px;
        border-radius: 5px;
        float: left;
    }
}

@media screen and (max-width: 390px) {
    body{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    h1,h2,h3,h4,h5,h6,label{
        font-family: 'Fira Sans', sans-serif;
    }
    
    p,ul,li,a,button,input{
        font-family: 'Quicksand', sans-serif;
    }
    
    section{
        width: 100%;
        height: auto;
    }
    
    .padding{
        padding: 5vh 0;
    }
    
    .padding-atas{
        padding-top: 7vh;
    }
    
    .padding-bawah{
        padding-bottom: 5vh;
    }
    
    
    .bg-gradien-hijau{
        background: linear-gradient(180deg, #1D788C -47.95%, #00A7CC 80.2%);
    }
    
    .text-hitam{
        color: #474747;
    }
    
    .text-putih{
        color: #ffffff;
    }
    
    .text-hijau{
        color: #00A7CC;
    }
    
    .btn-putih{
        width: 49%;
        margin: 10px 0.5%;
        display: block;
        border: 1px solid #ffffff;
        background-color: #ffffff;
        padding: 7px 15px;
        border-radius: 5px;
        float: left;
    }
    
    .btn-polos{
        display: block;
        margin: 10px 0.5%;
        width: 49%;
        border: 2px solid #ffffff;
        background-color: #ffffff00;
        padding: 7px 15px;
        border-radius: 5px;
        float: left;
    }
}

@media screen and (max-width: 428px) {
    body{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    h1,h2,h3,h4,h5,h6,label{
        font-family: 'Fira Sans', sans-serif;
    }
    
    p,ul,li,a,button,input{
        font-family: 'Quicksand', sans-serif;
    }
    
    section{
        width: 100%;
        height: auto;
    }
    
    .padding{
        padding: 5vh 0;
    }
    
    .padding-atas{
        padding-top: 7vh;
    }
    
    .padding-bawah{
        padding-bottom: 5vh;
    }
    
    
    .bg-gradien-hijau{
        background: linear-gradient(180deg, #1D788C -47.95%, #00A7CC 80.2%);
    }
    
    .text-hitam{
        color: #474747;
    }
    
    .text-putih{
        color: #ffffff;
    }
    
    .text-hijau{
        color: #00A7CC;
    }
    
    .btn-putih{
        width: 49%;
        margin: 10px 0.5%;
        display: block;
        border: 1px solid #ffffff;
        background-color: #ffffff;
        padding: 7px 15px;
        border-radius: 5px;
        float: left;
    }
    
    .btn-polos{
        display: block;
        margin: 10px 0.5%;
        width: 49%;
        border: 2px solid #ffffff;
        background-color: #ffffff00;
        padding: 7px 15px;
        border-radius: 5px;
        float: left;
    }
}