@media (min-width:280px) and (max-width:680px){
    body{
        background-size: cover;
        background-attachment: fixed;
        font-size: 13px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;   
    }
    header{
        padding: 10px 0px;
    }
    h1{
        margin-left:25px;
        font-size: x-large;
    }
    .empty{
        width: 0px;
    }
    .dives{
        padding: 15px 20px;
        box-sizing: border-box;
        margin: 0 auto;
    }
    section{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top:20px;
        width: 85%;
        margin: 0 auto;
    }
    .bigdives{
        width: 100%;
        display: none;
    }
    
    #usefuldiv{
        padding: 15px 15px;
    }
   .button{
       margin-left: 0px;
       width: 40%;
    }
    .phone_button{
        display: block;
        text-align: center;
        padding-bottom: 10px;
        transition: 1s;
        text-shadow: 2px 2px 8px rgb(124, 136, 190),
        2px -2px 8px rgb(124, 136, 190),
        -2px 2px 8px rgb(124, 136, 190),
        -2px -2px 8px rgb(124, 136, 190);
    }
    
    .phone_button:hover{
        transform: scale(1.05);
        cursor: pointer;
    }
    #simple{
        margin-top: 100px;
    }
    #drip{
        margin-bottom: 100px;
    }
    .note{
        display: none;
    }
    .result{
        width: 85%;
        font-size: large;
    }
    .result_heading{
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        margin: 0px;
        padding: 0px;
        font-size: medium;
    }
    .divi{
        font-size: medium;
    }
    footer{
        flex-direction: column;
        align-items: center;
        padding-top: 2px;
        bottom: 0;
        
    }
    
}
@media (min-width:680px) and (max-width:1024px){
    body{
        background-size: cover;
        background-attachment: fixed;
    }
    section{
        flex-wrap: wrap;
    }
    #useful{
        width: calc(100% - 4%);
    }
    .bigdives{
        width: 45%;
    }
    input, select{
        width: 150px;
    }
   footer{
       bottom: 0;
   }
}