@font-face {
    font-family: 'edoregular';
    src: url('fonts/edo-webfont.woff2') format('woff2'), url('fonts/edo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
}

.home {
    background-color: rgb(41, 37, 39);
    background-image: url(../img/asfault.png);
}

.home_background {
    background-image: url(../img/home_art_phone.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 0;
    padding-top: 190%;
}

.bio {
    background-color: rgb(190, 30, 30);
    background-image: url(../img/concrete-wall.png);
}

.gallery {
    background-color: rgb(238, 232, 218);
    background-image: url(../img/paper2.png);
}

.style {
    background-color: rgb(41, 37, 39);
    background-image: url(../img/style_texture.png);
}

main {
    margin: 0 13%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.text {
    font-family: 'Oswald', sans-serif;
}

nav {
    width: 85%;
    margin: 4% 8%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.nav_item:link {
    font-size: 3.5vw;
    text-align: center;
    color: white;
    text-decoration: none;
}

.nav_item:visited {
    color: white;
    text-decoration: none;
}

.nav_item:hover {
    color: grey;
    text-decoration: none;
}

.gallery_nav_item:link {
    font-size: 3.5vw;
    color: black;
    text-decoration: none;
}

.gallery_nav_item:visited {
    color: black;
}

.gallery_nav_item:hover {
    color: grey;
}

footer {
    padding-top: 3%;
    width: 100%;
    height: 6vw;
    background-color: #292727;
    opacity: 1;
    display: flex;
}

footer a {
    padding: 0 43%;
    text-decoration: none;
}

footer a:link {
    color: white;
    font-size: 2.7vw;
    text-decoration: none;
}

footer a:visited {
    color: white;
}

footer a:hover {
    color: grey;
}


/*Start of individual webpages: HOME*/

.home_art {
    width: 100%;
}

.h1home {
    font-family: 'edoregular';
    font-size: 19vw;
    color: white;
    width: 50%;
    position: absolute;
    top: 26vw;
    left: 10vw;
    transform: rotate(-5deg);
}

.h1home2 {
    font-family: 'edoregular';
    font-size: 19vw;
    color: white;
    width: 50%;
    margin-left: 6%;
    position: absolute;
    top: 44vw;
    left: 16vw;
    transform: rotate(-5deg);
}

.subhome {
    color: white;
    width: 35%;
    font-size: 4.5vw;
    line-height: 5vw;
    position: absolute;
    top: 109vw;
    left: 59%;
    transform: rotate(24deg);
}


/*start of bio*/

.h1bio {
    font-family: 'edoregular';
    font-size: 20vw;
    color: white;
    width: 20%;
    position: absolute;
    top: 15vw;
    left: 15%;
    transform: rotate(14deg);
}


.background_img_bio {

        background-image: url(../img/bio_mobile.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 0;
        padding-top: 70%;
    }
    
.bio h2 {
    width: 100%;
    font-size: 8vw;
    color: #353535;
    text-align: center;
    margin: 2% 0;
}

.biobody {
    width: 100%;
    font-size: 4vw;
    line-height: 4.5vw;
    text-align: justify;
    color: white;
    margin: 2%;
}

.portrait {
    width: 70%;
    display: block;
    margin: 5% 14%;
}

.flex-container2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}



.date {
    width: 30%;
    font-size: 8vw;
    text-align: left;
    color: white;
    border-right: 5px gray solid;
    
}
.content {
    font-size: 4.5vw;
    width: 60%;
    margin: 3% 0;
    padding-left: 5%;
    text-align: center;
    
}



/*start of style*/

.style_background {
    background-image: url(../img/style_art_900.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 0;
    padding-top: 51.5%;
}

.h1style {
    font-family: 'edoregular';
    font-size: 15vw;
    width: 40%;
    color: white;
    transform: rotate(4deg);
    position: absolute;
    left: 47%;
    top: 14vw;
}

.substyle {
    color: #eece85;
    font-size: 3vw;
    width: 35%;
    position: absolute;
    top: 32vw;
    left: 55%;
    transform: rotate(3deg);
}

.style h2 {
    margin-bottom: 2%;
    font-size: 5vw;
    color: white;
    width: 100%;
}

.style h3 {
    font-size: 4vw;
    color: #ca8611;
}

.pstyle {
    font-size: 3.1vw;
    line-height: 3.5vw;
    text-align: justify;
    color: #eece85;
    width: 98%;
    margin: 5% 0;
    position: relative;
}

.p1 {
    top: 1vw;
}

.p4 {
    top: 3.9vw;
    padding-bottom: 19%;
}

.paintblob img {
    width: 96%;
    margin: 0 2%;
    opacity: .1;
    z-index: -1;
    position: absolute;
}

.paint1 {
    top: 65vw;
}

.paint2 {
    top: 125vw;
}

.paint3 {
    top: 15vw;
}

.paint4 {
    top: 255vw;
}

.style_img {
    margin-left: 25%;
    width: 50%;
}


/*start of gallery*/

.h1gallery {
    width: 50%;
    position: absolute;
    top: 25vw;
    left: 8vw;
    transform: rotate(2deg);
}

.subgallery {
    position: absolute;
    top: 43vw;
    left: 14%;
    width: 42%;
    transform: rotate(-16deg);
    font-size: 2.5vw;
}

.header-art {
    margin: 0;
}

.gallery h2 {
    font-size: 10vw;
    font-variant-caps: all-small-caps;
    text-align: center;
    line-height: 8vw;
    padding: 0 10%;
    margin-bottom: 5%;
}

.flex-container {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: baseline;
    /*aligns items vertically or horizontally in relation to each item*/
}

.flex-container a {
    width: 65%;
    padding: 1.1em;
}

@media (min-width: 500px) {
    .home_background {
        background-image: url(../img/home_art_mobile.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 0;
        padding-top: 129%;
    }
    .h1home {
        font-size: 14vw;
        color: white;
        position: absolute;
        top: 17vw;
        left: 19vw;
    }
    .h1home2 {
        font-size: 14vw;
        top: 31vw;
        left: 24vw;
    }
    .subhome {
        color: white;
        width: 26%;
        font-size: 3vw;
        line-height: 3.2vw;
        position: absolute;
        top: 80vw;
        left: 62%;
        transform: rotate(24deg);
    }

    .pstyle {
        font-size: 3.2vw;
        line-height: 3.8vw;
        text-align: justify;
        color: #eece85;
        width: 100%;
        margin: 5% 0;
    }

    .paint1 {
        top: 65vw;
    }
    .paint2 {
        top: 130vw;
    }
    .paint3 {
        top: 195vw;
    }
    .paint4 {
        top: 262vw;
    }

@media (min-width: 800px) {
    .nav_item:link {
        font-size: 2.3vw;
    }
    .gallery_nav_item:link {
        font-size: 2.3vw;
    }
    footer {
        height: 4.5vw;
        padding-top: 2%;
    }
    .home_background {
        background-image: url(../img/home_art.png);
        padding-top: 74.75%;
    }
    .h1home {
        font-size: 10vw;
        top: 11.5vw;
        left: 33vw;
    }
    .h1home2 {
        font-family: 'edoregular';
        font-size: 10vw;
        top: 20vw;
        left: 35vw;
    }
    .subhome {
        color: white;
        font-size: 2.1vw;
        line-height: 2.3vw;
        width: 20%;
        top: 52vw;
        left: 62%;
    }
    /*bio*/
    .background_img_bio {

    background-image: url(../img/bio_1000.png);
    padding-top:45%;
    }
    
    .h1bio {
        font-size: 16vw;
        top: 11vw;
        left: 11%;
    }
    
    .bio h2 {
        font-size: 4vw;
    }

    .biobody {
    font-size: 2.5vw;
    line-height: 3vw;
    }
    
    .date {
    font-size: 5vw;
    text-align: left;
    
}
.content {
    font-size: 2.5vw;

    
}
   
    /*style*/
    .style_background {
        background-image: url(../img/style_art_1000.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 0;
        padding-top: 51.5%;
    }
    .h1style {
        font-size: 13vw;
        left: 49%;
        top: 12vw;
    }
    .substyle {
        top: 28vw;
        left: 57%;
    }
    .pstyle {
        font-size: 2.3vw;
        line-height: 2.5vw;
        text-align: justify;
        color: #eece85;
        width: 100%;
        margin: 5% 0;
    }
    .style_img {
        margin-left: 25%;
        width: 50%;
    }
    .paint1 {
        top: 65vw;
    }
    .paint2 {
        top: 113vw;
    }
    .paint3 {
        top: 160vw;
    }
    .paint4 {
        top: 220vw;
    }
    .flex-container {
        width: 96%;
        margin: 0 2%;
    }
    
    .flex-container a {
        width: 38%;
        padding: 1.6em;
    }
    .gallery h2 {
        font-size: 7vw;
        line-height: 6vw;
    }
    .subgallery {
        font-size: 2.2vw;
        position: absolute;
        top: 42vw;
        left: 64%;
        width: 14%;
        transform: rotate(10deg)
    }
}

@media (min-width: 1300px) {
    .nav_item:link {
        font-size: 2vw;
    }
    .gallery_nav_item:link {
        font-size: 2vw;
    }
    .subhome {
        top: 52vw;
    }
    
     /*bio*/
  

    .bio h2 {
        font-size: 4vw;
    }

    .biobody {
    font-size: 1.5vw;
    line-height: 2vw;
    width: 60%;
    margin-left: 20%;
    }
    .portrait {
        width: 60%;
         margin-left: 20%;
    }
    
    .date {
    font-size: 4vw;
    text-align: left;
    
}
    
    .main {
        width: 70%;
    }
.content {
    font-size: 2.5vw;

    
}
    .style_background {
        background-image: url(../img/style_art_1200.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 0;
        padding-top: 42%;
    }
    .h1style {
        top: 11vw;
        left: 55%;
    }
    .substyle {
        top: 28vw;
        left: 64%;
    }
    .style h2 {
        margin-top: 12%;
    }
    .flex-container {
        width: 90%;
        margin: 0 5%;
    }
    .flex-container a {
        width: 25%;
        padding: 1em;
    }
    footer {
        padding-top: 2.5%
    }
    footer a:link {
        color: white;
        font-size: 2vw;
        text-decoration: none;
    }
}