* {
    box-sizing: border-box;
}

/* BODY */
    body {
        margin : 0;
    }
/* BODY end */


.switcherItem {
    color: black;
}







/* NAME-TITLE */
    #name-title {
        border: 1px solid black;
        position: fixed;
        right: 4%;
        top: 4%;
        padding-top: 3px;
        padding-bottom: 3px;
        z-index: 5;
        background-color: white;
        width: 150px;
        text-align: center;
        
    }
    #name-title a {
        color: black;
        text-decoration: none;
        display: block; /* to make entire box the link */
    }
    #name-title:hover a {
        color: white;
    }
/* NAME-TITLE end */




#google-sheet-embed iframe {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: 0;

}



iframe element.style {

background-color: white;
}







/* WRAPPER */
    .wrapper {
        display: grid;
        grid-template-columns: repeat(20, 1fr);
        grid-auto-rows: auto;
        /*grid-template-rows: repeat(15, 1fr);*/
        justify-items: stretch;
        /* grid-gap: 2px; need to fix the margins(?) on the side if doing gap */
    height: 100vh;
    width: 100vw;
    
    }
/* WRAPPER end */




/* PROJECT DESCRIPTION */
    ul {
        list-style-type: none;
    }
    
   
    
    table a:visited {
        text-decoration: none;
        color: black;
    }

    #project-table {
        cursor: default;
        
    }
    
    table, th, td {
        border:1px solid black;
        border-collapse: collapse;
        font-family: serif;
    }
    
    #project-table th, td {
        padding: 4px;
        text-decoration: none;
    }
    
    table {
        width: 90vh;
        position: fixed;
        margin: auto;
        top:0;
        bottom: 0;
        background-color: white;
        text-align: initial;
    justify-self: center;
        table-layout: fixed;
        z-index: 5;
    }
    
    table td.project:hover {
        text-decoration: none;
        background: #f0ff00;
        cursor: e-resize;
    }
    
    td#project-year {
        width: 40px;
        text-align: center;
    
    }
    
   
    
    #project-text {
        max-height: 50px;
        overflow: scroll;
        overflow-x: hidden; /* to hide horizontal scrollbar on windows */
    }
    
    #project-tableheader {
        cursor: move;
    }
    
    #project-tableheader:hover {
        background: #e8d1ff; 
    }


    .alignleft {
        float: left;
    }
    .alignright {
        float: right;
    }
  /* PROJECT DESCRIPTION end */





































  /* MEDIA QUERIES */

.small-screen {
    display: none;
    position: absolute;
     top: 50%;
        transform: translate(0, -50%);
        /* ^ to keep the box centered vertically + top:50% */
}

.small-screen img {
    object-fit: cover;
    width: 60vw;
    pointer-events: none;

}





  /* SKETCHES */

  .sketch-1 {
    position: fixed;
    right: 10%;
    top: 33%;
    z-index: -5;
    display: inline;
    width: 18%;
    height: 27%;
    background-image: url("../../resources/images/deck1-gutter-01.jpg");
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .sketch-2 {
    position: fixed;
    left: 2%;
    bottom: 4%;
    z-index: -5;
    display: inline;
    width: 16%;
    height: 35%;
    background-image: url("../../resources/images/deck1-gutter-02.jpg");
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .sketch-3 {
    position: fixed;
    left: -1%;
    top: 2%;
    z-index: -5;
    display: inline;
    width: 10%;
    height: 23%;
    background-image: url("../../resources/images/deck1-gutter-03.jpg");
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .sketch-5 {
    position: fixed;
    left: 6%;
    top: 25%;
    z-index: -1;
    display: inline;
    width: 15%;
    height: 18vw;
    background-image: url("../../resources/images/20240206-5.jpg");
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .sketch-6 {
    position: fixed;
    right: 2%;
    top: 8%;
    z-index: -5;
    display: inline;
    width: 20%;
    height: 20%;
    background-image: url("../../resources/images/deck1-gutter-04.jpg");
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .sketch-8 {
    position: fixed;
    right: 3%;
    bottom: 5%;
    z-index: -5;
    display: inline;
    width: 23%;
    height: 25%;
    background-image: url("../../resources/images/deck1-gutter-05.jpg");
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
   
  }
  .sketch-9 {
    position: fixed;
    right: -6%;
    top: 50%;
    z-index: -5;
    display: inline;
    width: 18%;
    height: 18%;
    background-image: url("../../resources/images/deck1-gutter-06.jpg");
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .sketch-10 {
    position: fixed;
    right: -8%;
    top: 20%;
    z-index: -5;
    display: inline;
    width: 23%;
    height: 19%;
    background-image: url("");
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .sketch-12 {
    position: fixed;
    right: 17%;
    bottom: 2%;
    z-index: -5;
    display: inline;
    width: 13%;
    height: 11%;
    background-image: url("");
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  










  




  /* SKETCHES end */


  .nav-link a {
    text-decoration: none;
    display: block;
    color: black;
  }
  
  .nav-link a:visited {
    text-decoration: none;
    color: black;
    display: block;
  }

  .nav-link:hover {
    text-decoration: none;
     background: #fcf40a;
    cursor: pointer;

  }

/* LINKS */


#next-link {
    border: 1px solid black;
    position: fixed;
    right: 4%;
    bottom: 4%;
    padding-top: 3px;
    padding-bottom: 3px;
    z-index: 10;
    background-color: white;
    width: 70px;
    text-align: center;
    display: block;
}
#next-link a {
    color: black;
    text-decoration: none;
    display: block; /* to make entire box the link */
}
#next-link:hover  {
    background-color: #fcf40a;
}


#back-link {
    border: 1px solid black;
    position: fixed;
    left: 4%;
    bottom: 4%;
    padding-top: 3px;
    padding-bottom: 3px;
    z-index: 10;
    background-color: white;
    width: 175px;
    text-align: center;
    display: block;
}
#back-link a {
    color: black;
    text-decoration: none;
    display: block; /* to make entire box the link */
}
#back-link:hover  {
    background-color: #fcf40a;
}









  /* hide body on smaller screens */


.center-text {
    position: absolute;
    text-align: center;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -75px;
    color: black;
    cursor: default ;
}

@media screen and (max-width: 900px) {
    .wrapper {
      display: none;
    }

    #name-title {
        display: none;
    }

    .small-screen {
        display: block;
        
        
    }
  }