/* style rule for container class */
.container{
    margin: 5% 10%;
    border-radius: 1em;
    
}
header{
    border: 0.1em solid burlywood;
}
/* style for body */
body{
    background-color: #E0F0FF
}
/* style rule for profile-image class */
.profile-image{
    width: 60em;
    max-width: 100%;
    text-align: center;
}
/* style for img tag within profile image class */
.profile-image img{
    width: 10em;
    height: 10em;
    border-radius: 90px;
}

/* style element for profile info class */
.profile-info{
    display: inline;
    margin-top: 20px;
}

/* style rule for a tag within header element */
.profile-info a{
    text-decoration: none;
    color: black;
    margin: 5em;
    font-style: italic;
    font-size: medium;

}
.profile-info a:hover{
    color: burlywood;
}

/* style rule for buttons */
.buttons{
    display: inline-block;
}

/* style for buttons class and button element with in header element */
.buttons button{
    text-align: center;
    margin: 1.2em 0 ;
    height: 2.5em;
    width: 100%;
    background-color: coral;
    border-radius: 1.2em;
    border:none;
}
/* style for figcaption element */
figcaption{
    color: coral;
}


/* style rule for dt element within inner-section class */
dt{
    font-weight: bold;
    /* margin-top: 2.2em; */
}

dt, dl{
    margin-left: 10px;
    padding: 0.5em;
}
dd{
    padding: 0.5em;
}

.objectives{
    text-align: justify;
}

/* style for footers */

footer{
    text-align: center;
    margin-top: 5px;
    border-top: 0.1em solid coral;
}
footer a{

    text-decoration: none;
    color: black;
}

footer a:hover{
    color: coral;
}

i{
    color: crimson;
}

/* style rule for language preferences class */
.btn{
    text-align: center;
}
.language-preferences button{
    background-color: coral;
    text-align: center;
    border-radius: 2em;
    border:none;
    height: 2.2em;
    width: 8em;
    margin: 0.5em;
}

/* style rule for li element within dd tag */
li{
    text-align: justify;
    padding-bottom: 1em;
}

article h1{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.4em;
}

/* style for table viewport with minimum width 660px */
@media only screen and (min-width:660px){
    /* .profile-image{
        display: flex;
    } */
    .profile-image img{
        width: 10em;
        height: 10em;
        border-radius: 90px;
    }
    /* style for buttons class and button element within header element */
    .buttons{
        display: inline-block;
    }
    .buttons button{
        text-align: center;
        margin: 1.2em 0 ;
        height: 2.5em;
        width: 100%;
        background-color: coral;
        border-radius: 1.2em;
        border:none;
    }
    .buttons button:hover{
        background-color: cornflowerblue;
    }

    .language-preferences button:hover{
        background-color: cornflowerblue;
    }

    /* style for anchor tag within profile-info class */

    .profile-info a{
        display: block;
        padding: 0.1em;
        margin: 0.1em;
    }

}


/* style for desktop viewport with minimun width 769px*/

@media only screen and (min-width:830px){
    /* style for profile-image class */
    .profile-image{
        display: flex;
    }
    /* style for img tag within profile-image class */
    .profile-image img{
        width: 10em;
        height: 10em;
        border-radius: 30em;
        margin: 1em;
    }
    /* style for profile-info class */

    .profile-info{
        margin-left: 30px;
    }
    /* style for buttons class and button element within header element */
    .buttons{
        display: flex;
        margin-top: 50px;
        margin-left: 300px;
    }
    .buttons button{
        height: 40px;
        width: 160px;
        text-align: center;
        margin: 5px;
        background-color: coral;
        border-radius: 1.2em;
        border : none
    }

    .buttons button:hover{
        background-color: cornflowerblue;
    }

    .outer-section{
        display: flex;
    }

    .inner-section{
        width: 45%;
        padding-right: 10px;
        border-right: coral solid 0.1em;
    }
    
    .inner-section-right{
        margin-left: 30px;
    }


}