html {
    font-size: 62.5%;
}


.main {
    display: flex;
    justify-content: space-evenly;
    margin-top: 5vw;
    margin-left: 5vw;
    flex-direction: column;
}


.nav {
    display: flex;
    justify-items: start;
    padding: 0;
    margin: 0;
}


.nav a, p{
    color: #000033;
    text-decoration: none;
    font-size: 2.8em;
   
    margin: 0;
    padding: 0;
}


.container2{
    width: 85vw;
    height: auto;
    
   display: grid;
   grid-gap: 1.5vw;
   grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
   
}



.folio2a, .folio2b, .folio4a, .folio4b {

height: 30vw;

}

.folio1, .folio3, .folio5 {

    height: 61.85vw;

}

.folio5 {

    width: 85vw;

}

.folio1{

    /* background-image: url('https://images.pexels.com/photos/827518/pexels-photo-827518.jpeg?auto=compress&cs=tinysrgb&w=1600'); */
    background-image: url('/img/poster_clouds.jpg');
}
.folio2{

    display: grid;
    grid-gap: 1.5vw;
}

.folio2a{

    /* background-image: url('https://images.pexels.com/photos/2360684/pexels-photo-2360684.jpeg?auto=compress&cs=tinysrgb&w=1600'); */
    background-image: url('/img/Irma_Boom.jpg');
}
.folio2b{

    /* background-image: url('https://images.pexels.com/photos/2817549/pexels-photo-2817549.jpeg?auto=compress&cs=tinysrgb&w=1600'); */
    background-image:url('/img/take-out.png')
}
.folio3{

    /*background-image: url('https://images.pexels.com/photos/414181/pexels-photo-414181.jpeg?auto=compress&cs=tinysrgb&w=1600');*/
    background-image: url('/img/bread.png')
}
.folio4{
    
    display: grid;
    grid-gap: 1.5vw;
}
.folio4a{    

    /*background-image: url('https://images.pexels.com/photos/15239/flower-roses-red-roses-bloom.jpg?auto=compress&cs=tinysrgb&w=1600');*/
    background-image: url('/img/book_02.jpg')
}
.folio4b{  
    
    /*background-image: url('https://images.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg?auto=compress&cs=tinysrgb&w=1600');*/
    background-image: url('/img/business_card_resto.png');
}
.folio5{   

    /* background-image: url('https://images.pexels.com/photos/58899/pexels-photo-58899.jpeg?auto=compress&cs=tinysrgb&w=1600'); */
    background-image: url('/img/skateboard_1.jpg');
}

.folio2b {
    background-size:cover;
    background-position:top;
}

.folio4b {
    background-size:contain;
    background-position: left;
}

.folio1, .folio2a, .folio3, .folio4a, .folio5 {
    
    background-size: cover;
    background-position: center;
    font-size: 0%;
   

    text-align: center;
    
    color: white;
    text-decoration: none;
    
}

/* .book {
    position: absolute;
    top: 50%;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: white;
    text-decoration: none;
} */


.anime {
    
    transition: all 650ms linear;
    
}

    

/* ANIMATION */

.anime:hover {
    
    transform: translateY(-1vw);
    
}

.folio1:hover, .folio2a:hover, .folio2b:hover, .folio3:hover, .folio4a:hover, .folio4b:hover, .folio5:hover {
    font-size: 2rem;
    opacity: .85;

    text-align: center;
    
    color: white;
    text-decoration: none;

}

/* .book:hover {
    top: 50%;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    
    color: white;
    text-decoration: none;
} */

@media screen and (min-width: 300px){

    .nav{
        margin-bottom: 28px;
    }

}

@media screen and (min-width: 495px){


    .folio5 {

        width: 56vw;
    
    }

 

}

@media screen and (min-width: 675px){


    .folio5 {

        width: 85vw;
    
    }

}

@media screen and (min-width: 862px){

    .main {
        display: flex;
        justify-content: space-evenly;
        margin-top: 5vw;
        flex-direction: row;
        margin-left: -2vw;
        
    }


    .container2{

        width: 85vw;
        height: 75vh;

    } 

    .folio2a, .folio2b, .folio4a, .folio4b {

        height: inherit;

        }
        
        .folio1, .folio3, .folio5 {

            height: inherit;

        }

        .folio5 {

            width: auto;
        
        }
    

}


/* intro animatiom */

 /* .overlay {
    position: absolute;
    z-index: 999;
    background: white;
    width: 85vw;
    height: 95vh;
    animation: reveal 2s ease-in forwards;
    transform-origin: bottom;
}

@keyframes reveal {
    from { 
        transform: scaleY(1);
    }
    to {
        transform: scaleY(0);
    }
} */ 

/* .container2 {
    animation: growIn 2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
    transform: scale(.4);
}

@keyframes growIn {
to{
    transform: scale(1);
}

}