:root{
    --primary-color: rgb(144, 212, 168);
    --secondary-color: rgb(255, 255, 255);
    --accent-color: rgb(0, 0, 0);
}

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;
    a{
        color:white;
        text-decoration:none;
        padding:5px 10px;
        border-radius:5px;
    }
    a:hover{
        color:var(--accent-color);
        background-color:var(--secondary-color);
        box-shadow: 0px 0px 5px 0px white;
    }
}

.active{
    color:var(--accent-color);
    background-color:var(--secondary-color);
    box-shadow: 0px 0px 5px 0px white;
}

a{
    color:var(--accent-color);
    text-decoration:none;
}

/* fix later. This is the least clickable button in the world rn */
.col_span4.button{
    color:var(--accent-color);
    box-shadow:inset 0px 0px 5px 0px var(--accent-color);
    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;
    &.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 . . . . . . . . . . .";
}

.index2{
    background-color:var(--primary-color);
}

.index2 section{
    background-color:var(--secondary-color);
    border-radius:10px;
    margin:10px;
    padding: 5px;
}

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

.wrapper.about{
    margin:20px;
}

.about img{
    width:100%;
}


section {

  &.contact {

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

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

  &.project1 {
    background-color: var(--primary-color);

    img {
      width: 100%;

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

  &.about {
    background-color: var(--primary-color);
    border-radius: 10px;
  }
  &.contact{
    background-color:var(--secondary-color);
    border-color:solid gray 1px;
    border-radius:10px;
    margin-left:20px;
    margin-top:20px;
    margin-right:20px;
  }

}

/* 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;   
    &:hover{
        color:var(--accent-color);
        background-color:var(--secondary-color);
        box-shadow: 5px 5px 10px 0px var(--accent-color);
    }
}


.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: 768px) {

  .wrapper {
    grid-template-columns: 1fr;

    &.about,
    &.contact {
      grid-template-columns: 1fr;
    }

    &.index {
      grid-template-columns: 2fr 1fr;
      grid-template-areas:
        "portrait hero";
    }

    &.index2 {
      grid-template-columns: 2fr;
    }

    &.project1 {
      grid-template-columns: 2fr 1fr;
    }
  }

  .col_span12,
  .col_span7,
  .col_span6,
  .col_span4,
  .col_span3,
  .col_span2 {
    grid-column: auto;
  }

  .portrait {
    z-index: 0;
    max-width: 100%;
  }
}



@media only screen and (max-width: 520px) {

  .wrapper {
    grid-template-columns: 1fr;

    &.about,
    &.contact,
    &.index2,
    &.project1 {
      grid-template-columns: 1fr;
    }

    &.index {
      grid-template-columns: 1fr;
      grid-template-areas:
        "hero"
        "portrait";
    }
  }

  .col_span12,
  .col_span7,
  .col_span6,
  .col_span4,
  .col_span3,
  .col_span2 {
    grid-column: auto;
  }

  .portrait {
    z-index: 0;
    max-width: 100%;
  }

  nav {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 20px;
    word-spacing: normal;
  }
}