body {
    background-color: #1a1a1a;
    color:azure;
    padding: 0;
    margin: 0;
}
h1 {
    
    font-size: 4.25vw;
    text-align: center;
}

section {
    width: 100%;
}

/*Space for the fixed navigation bar*/
#spaceHolder {
    height: 20px;
}

/*style for Introduction div on the right*/
#about_content {
    display:flex;
}

#about_description h3 {
    margin-top: 1em;
}

/*color for code-academy href*/
#about_description img {
    
    margin-left: 25px;
}

/*media query for wide chreen*/
@media screen and (min-width:600px) {
    #about_description {
        margin-left: 2em;
        margin-right: 2em;
        width:60%;
    }
}

/*media query for mobile devices*/
@media screen and (max-width: 599px) {
    #about_content {
        flex-direction: column;
        align-content: center;
    }
    #about_description {
        margin-top: 2em;
        margin-left: 2em;
        width:90%;
    }    
}



/*Style for name card on the left*/
.main-box{
    margin: auto;
    width: 300px;
    height: 400px;
    box-shadow: 2px 4px 2px 4px rgba(70, 224, 151, 0.65);
    border-radius: 10px;
    text-align: center;
    padding: 20px 0;
}

.big-circle{
    width: 150px;
    height: 150px;
    border: 10px solid #46E097;
    border-radius: 50%;
    margin: auto;
    
}
.small-circle{
    width: 140px;
    height: 140px;
    border: 10px solid #DAF9F6;
    border-radius: 50%;
    position: relative;
    top: -5px;
    left: -5px;
    background-image: url("./media/face2019_processed.jpg");
    background-position: center;
    background-size: cover;
}

.heading-name{
 margin: 3px 0;  
 color:azure; 
}

.heading-work{
    color: #46E097;
    font-weight: 300;
    margin: 3px 0;
}
.info{
    padding: 0 20px;
    margin-bottom: 15px;
    color:azure;
}

#icon-container {
    display: flex;
    justify-content: space-between;
    width: 40%;
    height:40px;
    margin: auto;
}

.contact-icon:link, .contact-icon:visited {
    color: antiquewhite;
    text-decoration: none;
}

#resume_btn{
    text-decoration: none;
    background:azure;
    color:#e1a87a;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 2px 2px 1px 1px rgba(70, 224, 151, 0.65);
}
/*hover effect for the resume-button*/
#resume_btn:hover{
    color: #46E097;
    background: #DAF9F6;
    font-weight: 600;
}