/*------------------- Universal styles ---------------------------*/

body{
    background-color: rgba(219, 105, 80, 1);

}
img{
    max-width: 70%;
}

.bio-container{
    background-image: url('../images/1wood.jpg');
    background-size: cover;
    margin: 0 12% 0 12%;
    padding-top: 30%;
    display: flex;
    flex-direction: column;
}

.flex-container :nth-child(5) {
  color: rgba(255, 183, 81, 1);
  font-size: 1.9em;
}

#footer-container {
  height: 20vh;
}

.nav-logo-img{
     background-color: rgba(144, 137, 137, .97);
}


/* ---------------------- bio name and image------------------------ */

.main-bio{
    display: flex;
    display: -webkit-flex;
    flex-direction: row-reverse;
}

.bio-header{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    clear: left;
    width: 70%;
}

.color{
   align-self: center;
   width: 100%;
   background-image: linear-gradient( to left, rgba(219, 105, 80, .8), 
   rgba(219, 105, 80, 1));
   padding: 1em 0;
   color: whitesmoke;
   text-shadow: 3px 5px 0 rgba(28, 49, 68, .3);
}

.bio-image{
    width: 30%;
}

.aerin{
    float: right;
    padding: 3% 27% 3% 3%;
    border-radius: 4px;
    background-color: rgba(219, 105, 80, .5);
    background-image: linear-gradient( to right,
     rgba(219, 105, 80, .6),rgba(219, 105, 80, 1));
    margin-top: -20%;

}

/* ------------------------------bio text ------------------------- */

.bio-text,
.bio-credentials{
    text-shadow: 1px 1px 0 rgba(28, 49, 68, .4),
    -1px 1px 0 rgba(28, 49, 68, .4),
    1px -1px 0 rgba(28, 49, 68, .4),
    -1px -1px 0 rgba(28, 49, 68, .4),
    0px 1px 0 rgba(28, 49, 68, .4),
    0px -1px 0 rgba(28, 49, 68, .4),
    -1px 0px 0 rgba(28, 49, 68, .4),
    1px 0px 0 rgba(28, 49, 68, .4),
    2px 2px 0 rgba(28, 49, 68, .4),
    -2px 2px 0 rgba(28, 49, 68, .4),
    2px -2px 0 rgba(28, 49, 68, .4),
    -2px -2px 0 rgba(28, 49, 68, .4),
    0px 2px 0 rgba(28, 49, 68, .4),
    0px -2px 0 rgba(28, 49, 68, .4),
    -2px 0px 0 rgba(28, 49, 68, .4),
    2px 0px 0 rgba(28, 49, 68, .4),
    1px 2px 0 rgba(28, 49, 68, .4),
    -1px 2px 0 rgba(28, 49, 68, .4),
    1px -2px 0 rgba(28, 49, 68, .4),
    -1px -2px 0 rgba(28, 49, 68, .4),
    2px 1px 0 rgba(28, 49, 68, .4),
    -2px 1px 0 rgba(28, 49, 68, .4),
    2px -1px 0 rgba(28, 49, 68, .4),
    -2px -1px 0 rgba(28, 49, 68, .4);

}
.bio-text{
    /* height: 30vh; */
    padding: 0 10%;
}

.radial-color{
    background-image: radial-gradient( circle, 
    rgba(219, 105, 80, .8), 50%, rgba(219, 105, 80, 1));
    padding: 1em 0;
    color: whitesmoke;
    text-shadow: 3px 5px 0 rgba(28, 49, 68, .3);

}

.bio-credentials{
    /* height: 50vh; */
    margin-top: 3em;
    padding: 0 6% 6%;
}

.bio-credentials a:hover{
    color: rgba(255, 183, 81, 1);
}

/* -----------------------------------Mobile ------------------------ */
@media only screen and (max-width: 414px) and (max-height: 823px) and (orientation: portrait){

    .main-bio{
        flex-direction: column;
    }

    .bio-image{
        align-self: flex-end;
        width: 70%;
    }

    .bio-header{
        width: 100%;
    }

    .color{
        background-image: radial-gradient( circle, 
        rgba(219, 105, 80, .8), 50%, rgba(219, 105, 80, 1));

    }
}

@media only screen and (max-width: 667px) and (max-height: 375px) and (orientation: landscape){

    .main-bio {
        flex-direction: column;
    }

    .bio-image {
        align-self: flex-end;
        width: 60%;
    }

    .bio-header {
        width: 100%;
    }

    .color {
        background-image: radial-gradient( circle, 
        rgba(219, 105, 80, .8), 50%, rgba(219, 105, 80, 1));
    }


}