/* For all phones small than iPad from 0 - 767 px ------*/
@media only screen and (max-width: 767px) {
    
    .btn:link,
    .btn:visited {
        font-size: 70%;
    }
    
    .btn:hover,
    .btn:active {
        font-size: 70%;
    }
    
     #id-bio-area {
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: 10%;
        margin-right: 10%;  
        width: 80%;
    }
     
    .main-box {
        text-align: center;
        height: auto;
        width: auto;
    } 
    
    .container {
        width: auto;
    }
    
    
}

/* For Small Phones from 0 - 480 px --------------------*/
@media only screen and (max-width: 480px) {
    
    .btn:link,
    .btn:visited {
        font-size: 60%;
    }
    
    .container {
        height: 90%;
        width: auto;
    }
    
    #id-bio {
        font-family: 'Libre Baskerville', serif;
        font-size: 65%;
        text-align: justify;
        line-height: 1.8;
        color: #717070;   
    }
    
    #id-bio-area {
        margin-top: 20px;
        margin-bottom: 5px;
        margin-left: 5%;
        margin-right: 5%;      
    }
    
    .main-box {
        text-align: center;
        height: 86%;
        width: auto;
    }
    
    .social-media {
    text-align: center;
    width: 40%;
    margin: 0 30px 0 30px;
    list-style: none;
}

}