@charset "utf-8";
@import "Styles.css";
/*
Author: Bryan Sempertegui
Date: Aug 6th, 2019

Filename: Home_Styles.css.html
*/

/*Section about me*/
section#about_me > img{
    width: 60%;
    margin-left: 20%;
}

section#about_me p{
    text-align: center;
    margin: 20px 10% 0 10%;
    color: lightgray;
    text-shadow: lightgray;
    box-shadow: inset 0 0 15px black;
    border-radius: 10px;

    padding: 10px;
    /*border-radius: 20px;*/
    font-weight: bolder;
}

/*Section Photo Gallery*/

section#gallery h1{
    text-align: center;
    margin-bottom: 30px;
    text-decoration: underline;

}
section#gallery img{
    max-width: 80%;
    margin: 0 10% 0 10%;

}
/*Section Photo Gallery - Effects*/

section#gallery img: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#gallery div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    grid-template-areas:
    "ti ti"
    "g1 g2"
    "g3 g4"
    "g5 g6";

}

/*Grid area names*/

section#gallery img#gallery1{ grid-area: g1}
section#gallery img#gallery2{ grid-area: g2}
section#gallery img#gallery3{ grid-area: g3}
section#gallery img#gallery4{ grid-area: g4}
section#gallery img#gallery5{ grid-area: g5}
section#gallery img#gallery6{ grid-area: g6}