/* Yellow background colour */

body {
    background-color: #ffe900;
}

/* Main image */

#bio-image-div {
    z-index: -1;
    overflow-y: hidden;
}

#main-image {
    position: relative;
    width: 100%;
}

/* Image facade has no width for mobile size */

#bio-image-facade-div {
    width: 0%;
}

/* Bio text */

#bio-text-div {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 50px;
}

#bio-text {}

/* Links in bio */

a.bio-link:link {
    color: #7D7B75;
    text-decoration: none;
}

a.bio-link:visited {
    color: #7D7B75;
    text-decoration: none;
}

a.bio-link:hover {
    text-decoration: none;
}

/*Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) {
    #bio-image-div {
        height: 50%;
    }
    #main-image {
        top: -190px;
    }
}

/*Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) {
    #main-image {
        top: -250px;
    }
    #bio-text-div {
        padding-top: 40px;
        padding-bottom: 60px;
        padding-left: 80px;
        padding-right: 80px;
    }
}

/*Large devices (desktops, 992px and up)*/

@media (min-width: 992px) {
    #main-image {
        top: -340px;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {
    #bio-image-div {
        position: fixed;
        width: 45%;
        top: 0;
        z-index: -1;
        height: 100%;
        overflow-y: hidden;
    }
    #main-image {
        position: static;
        width: 100%;
    }
    #bio-image-facade-div {
        width: 45%;
        float: left;
    }
    #bio-text {
        font-size: 18px;
    }
    #bio-text-div {
        width: 55%;
        float: left;
        padding-top: 60px;
        padding-bottom: 60px;
        padding-left: 110px;
        padding-right: 110px;
    }
}