/* GENERIC */
*{
    --colorFeature:#4dbd98;
    --colorLightest:#fff;
    --colorDark:#2c4241;
    --colorDarker:#192625;
    --colorDarkest:#152824;
    color:var(--colorLightest);
    font-family: "Poppins", serif;
    
    font-weight: 600;
    font-style: normal;
    text-decoration:none;
}
body{
    background:var(--colorDarkest);
    margin:0;
}
h1{
    
    font-size:48px;
    grid-column:1/-1;
}
h2{
    font-size:16px;
    text-transform:uppercase;
}
p{
    font-size:16px;
    line-height:180%;
}
.textColorFeature{
    color:var(--colorFeature);
}
/* MASTER GRID */
#grid{
    display:grid;
    grid-template-columns:minmax(50px, 1fr) minmax(700px, 1000px) minmax(50px, 1fr);
    grid-template-rows:auto;
}

/* HEADER */
#header{
    background:url(../images/header.png) no-repeat bottom right var(--colorLightest);
    background-size:auto 100%;
    
    grid-column:1/4;
    height:350px;
    margin:0 auto;
    display:flex;
}
.intro{
    display:inline;
    font-size:24px;
    line-height:110%;
    padding:50px 50px 0;
    transition:color 1s;
    width:45%;
}
#introText{
    color:var(--colorFeature);
}
#logo{
    display:inline;
    width:60px;
    margin-bottom:30px;
}
.intro span{
    opacity:0;
}

/* NAV */
#nav{
    background:var(--colorFeature);
    grid-column:1/4;
    padding:10px 50px 0 50px;
    position:sticky;
    top:0;
    z-index:2;
}
#navInner{
    margin:0 auto;
    max-width:1000px;
}
.navButton{
    color:var(--colorLightest);
    border-radius:10px;
    display:inline-block;
    padding:10px;
}

/* PROJECTS GRID */

#projects{
  height:auto;
  padding:50px 0;
  grid-column:2/3;
}

#projectsGrid{
    display:grid;
    grid-auto-flow:dense;
    grid-column:2/3;
    grid-gap:2vw;
    grid-template-columns:1ft 1fr 1fr;
    grid-auto-rows:auto;
    height:auto;
}
@media (min-width: 1000px){
    #projectsGrid{
        grid-template-columns:1fr 1fr 1fr 1fr;
    }
}
.tile{
    aspect-ratio: 1 / 1;
    border-radius:8px;
    background:var(--colorFeature);
    line-height:0.9;
    overflow:hidden;
    position:relative;
    width:100%;
}
.tile img{
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center center;
}
.tall{
    aspect-ratio:1/2.12;
    grid-row:span 2;
}
.wide{
    aspect-ratio:2.15/1;
    grid-column:span 2;
}
.tall.wide{
  aspect-ratio:1/1;
}
.tile h1{
  text-align:center;
}

/* TEXT SECTIONS */
.textblock{
    background:var(--colorLightest);
    display:subgrid;
    grid-column:1/4;
    padding:80px;
}

.highlight{
    background:var(--colorFeature);
    border-radius:5px;
    padding:0 4px;
}

/* ABOUT */
#profile{
}
#profileSkills{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:auto;
}

/* FOOTER */

#footer{
    grid-column:2/3;
    padding:50px 0;
    text-align:right;
}
.social{
    background:var(--colorDark);
    border-radius:10px;
    font-size: 13px;
    margin-right:10px;
    padding:6px 12px;
}
.social:hover{
    background:var(--colorFeature);
}