:root{
    --primary-color: orange;
    --secondary-color: rgb(255, 255, 255);
    --accent-color: rgb(0, 0, 0);
    --main-padding: 5px;
    --pad-sm: 10px;        
    --pad-xs: 6px;     
    --gap: 10px;  
}

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;
}

.text{
  font-size:1em;
  color:var(--secondary-color)
}

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

.text::before {
transform: scaleX(0);
transform-origin: bottom right;
color:var(--secondary-color)
}

.text:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}

.text::before {

content: " ";
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
inset: 0 0 0 0;
background: var(--primary-color);
z-index: -1;
transition: transform .5s ease;
}

.text {
position: relative;
}   

nav{
  background-color: black;
  position: sticky;
  top:0;
  padding: var(--pad-sm); 
  text-align:right;
  word-spacing: 20px;
  z-index:10;

  /* a{
    color:white;
    text-decoration:none;
    padding: var(--pad-xs) var(--pad-sm); 
    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: var(--gap);
    &.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: var(--gap);       
    padding: var(--pad-xs);   
}

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

.wrapper.about{
    margin:20px;
}

.about img{
    width:100%;
}


section {
  padding: var(--main-padding);
  &.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%;
      transition: filter 0.25s ease, box-shadow 0.25s ease;
      &: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;
    transition: color 0.25s ease, filter 0.25s ease;

    &:hover {
      color:var(--secondary-color);
      filter: brightness(0.9);
    }
  }
  &.contact{
    background-color:var(--secondary-color);
    border-color:solid gray 1px;
    border-radius:10px;
    margin-left:20px;
    margin-top:20px;
    margin-right:20px;
    transition: box-shadow 0.25s ease, filter 0.5s ease;

    &:hover{
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.242);
        filter:sepia(20);
    }
  }

}

/* 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: var(--pad-xs) var(--pad-sm); 
  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;
    transition:rotate 2s ease;
    &:hover{
        rotate: 500000000deg;
    }
}

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

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 4s linear infinite;
}

/* 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;
  }
}