@import "reset.css";
@import "Styles.css";

/*
Author: Bryan Sempertegui
Date: Aug 6th, 2019

Filename: Project_Styles.css.html
*/


/*General Styles for Project Page*/
section#Project_Grid div img.Thumbnails{
    max-width: 80%;
    margin: 0 10% 0 10%;

}
section#Project_Grid div img.labels{
    max-width: 100%;
    object-fit: cover;
    margin: 35% 0 35% 0;
    box-shadow: none;

}
section#Project_Grid h1{
    text-align: center;
    margin: 15px;
    padding-bottom: 10px;
    text-decoration:underline;

}

/*Project Image Hover Effects*/
section#Project_Grid img.Thumbnails:hover{
    transition: 0.3s ;
    transition-timing-function: ease-in;

    border-top: 5px solid rgb(163, 166, 168);
    border-bottom: 5px solid rgb(163, 166, 168);
    border-radius: 50px;

}



/*Grid*/

section#Project_Grid div {
    display: grid;
    grid-template-columns: 3fr 1fr 3fr;
    grid-gap: 5px;
    grid-template-areas:
    "p1 C1 p2"
    "p3 C3 p4"
    "p5 C5 p6"
;
}


/* Grid area Names*/

section#Project_Grid div img#project1{grid-area: p1}
section#Project_Grid div img#project2{grid-area: p2}
section#Project_Grid div img#project3{grid-area: p3}
section#Project_Grid div img#project4{grid-area: p4}
section#Project_Grid div img#project5{grid-area: p5}
section#Project_Grid div img#project6{grid-area: p6}
section#Project_Grid div img#Ch1-2{grid-area: C1}
section#Project_Grid div img#Ch3-4{grid-area: C3}
section#Project_Grid div img#Ch5-6{grid-area: C5}