body,html{
    height:100%;
    margin:0;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

body{
    background-image:url("../img/grid_pattern.png");
    background-repeat: repeat;
    background-size:500px;
}

nav{
    background-color: black;
    position: sticky;
    top:0;
    padding:10px;
    text-align:right;
    word-spacing: 20px;
    z-index:10;
}

nav a{
    color:white;
    text-decoration:none;
    padding:5px 10px;
    border-radius:5px;
}

nav a:hover{
    color:rgb(0, 0, 0);
    background-color:rgb(255, 255, 255);
    box-shadow: 0px 0px 5px 0px white;
}

.active{
    color:rgb(0, 0, 0);
    background-color:rgb(255, 255, 255);
    box-shadow: 0px 0px 5px 0px white;
}

a{
    color:rgb(0, 0, 0);
    text-decoration:none;
}

/* fix later. This is the least clickable button in the world rn */
.col_span4.button{
    color:rgb(0, 0, 0);
    box-shadow:inset 0px 0px 5px 0px rgb(0, 0, 0);
    box-shadow: 0px 0px 5px 0px solid black;
    cursor: pointer;
}

.button:hover{
    background-color: white;
    cursor: pointer;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.242);
}


/* grid stuff */
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;

}

.wrapper.contact{
    margin:30px;
}


/* this work, not sure if it's the optimal way to do it... */
.index{
    grid-template-areas: 
    ". . . . . . . . . . . ."
    "portrait . . . . . . . . . . ."
    "portrait . . . hero hero hero hero hero . . ."
    "portrait . . . hero hero hero hero hero . . ."
    "portrait . . . . . . . . . . .";
}

section.contact{
    background-color:rgb(255, 255, 255);
    border-color:solid gray 1px;
    border-radius:10px;
    margin-left:20px;
    margin-top:20px;
    margin-right:20px;
}



section.contact.top{
    background-color:rgba(104, 211, 115, 0);
}

section.contact.box{
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
    color:white
}

.index2{
    background-color:rgb(104, 211, 115);
}

.index2 section{
    background-color:rgb(255, 255, 255);
    border-radius:10px;
    margin:10px;
    padding: 5px;
}

.index2 section h2{
        text-align: center;
}

.wrapper.about{
    margin:20px;
}

.about img{
    width:100%;
}

section.project1{
    background-color:rgb(104, 211, 115);
}

section.project1 img{
    width:100%;
}

section.project1 img:hover{
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.242);
    cursor: pointer;
    filter:brightness(0.8)
}

section.about{
    background-color:rgb(104, 211, 115);
    border-radius:10px;
}


/* somehow combine this with the 'button' class later. It'd be best to have one clickable class */
.resume{
    border: 2px solid black;
    border-radius:10px;
    width: fit-content;
    padding: 6px 10px;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 6px;   
}

.resume:hover{
    background-color: white;
    cursor: pointer;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.242);
}

.icons{
    justify-content: left;
    display: flex;
    gap: 20px;
    margin-top:20px;
}

.col_span4{
    grid-column: span 4;
}

.col_span3{
    grid-column: span 3;
}

.col_span2{
    grid-column: span 2;
}

.col_span6{
    grid-column: span 6;
}

.col_span7{
    grid-column: span 7;
}

.col_span12{
    grid-column: span 12;
}

.row_span2{
    grid-row: span 2;
}

.row_span4{
    grid-row: span 4;
}

.row_span6{
    grid-row: span 6;
}
.row_span7{
    grid-row: span 7;
}

.row_span8{
    grid-row: span 8;
}

.portrait{
    grid-area: portrait;
    position: relative;
    max-width:20em;
    z-index:-3;
}

.hero{
    grid-area: hero;
    position: relative;
    margin:10px;
}


/* fix this later. It seems best to keep the grid at 1fr for phone size */
@media only screen and (max-width: 400px) {
    body{
        justify-content: center;
    }
    .wrapper.index{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "hero"
        "portrait";

    }
    .hero{
        justify-items: center;
        align-items: center;
    }
}