overview.css

@import url('https://fonts.googleapis.com/css?family=Space+Mono');
@import url('https://fonts.googleapis.com/css?family=Staatliches');
@import url('https://fonts.googleapis.com/css?family=Coiny');
@import url('https://fonts.googleapis.com/css?family=VT323');
@import url('https://fonts.googleapis.com/css?family=Work+Sans');

@media only screen and (min-width: 600px){

  .dropdown{
    display: none;
  }

/*This is to be copied*/
    .side-bar-background{ 
      overflow: hidden;
      position: fixed;
      z-index: +1;
      margin-top: 30px;
      margin-bottom: -10px;
      padding-left: 10px;
      height: 400px;
      width: 200px;
      background-color: white;
    }

    .header-00{
      position: fixed;
      margin-top: -20px;
      margin-left: -30px;
      width: 270px;
    }

    .header-01:link{        

      margin-top: 30px;
      font-size: 20pt;
      font-family: 'Work Sans', thin;            
      color: #AA3939;
      font-weight: normal;
      text-decoration: none;
      line-height: 1;
    }

    .header-01:visited{                
      color: #AA3939;
      text-decoration: none;
    }

    .header-01:hover{
      color: black;  
      text-decoration: none;
    }

    .header-001{
      margin-top: 30px;
    }

    .header-011:link{        
      margin-top: 30px;
      margin-left: 5px;
      font-size: 10pt;
      font-family: 'Work Sans', sans-serif;             
      color: black;
      font-weight: normal;
      text-decoration: none;
      line-height: 1;
    }

    .header-011:visited{                
      color: black;
      text-decoration: none;
    }

    .header-011:hover{
      background-color: white;
      padding-right:5px;
      font-family: 'Work Sans', sans-serif; 
      color: #AA3939;  
      text-decoration: none;
    }

    .header-012:link{        
      margin-top: 30px;
      margin-left: 5px;
      font-size: 10pt;
      font-family: 'Work Sans', sans-serif;             
      color: gray;
      font-weight: normal;
      font-weight: normal;
      text-decoration: none;
      line-height: 1;
    }

    .header-012:visited{                
      color: gray;
      font-weight: normal;
      text-decoration: none;
    }

    .header-012:hover{
      font-family: 'Work Sans', sans-serif; 
      color: #AA3939;  
      text-decoration: none;
    }

  .projects {
   display: grid;
   position: absolute;
   margin-left: 350px;
   margin-top: 30px;
   grid-row-gap: 75px;
   grid-column-gap: 75px;
   grid-template-columns: 250px 250px 250px;
  }

  .project-images{
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 200px;
  }

  .project-link:link{
    color: black;  
    text-decoration: none;
    background-color: white;
  }

  .project-link:hover .project-title{
    color: #AA3939;
    text-decoration: none;
    font-weight: normal;
  }

  .project-link:hover .project-images{
    border-style: solid;
    border-width: 2px;
    border-color: #AA3939;
    box-sizing: border-box;
  }

  .project-line:visited{
    color: red;
    text-decoration: none;
  }

  .project-title{
    font-family: 'Work Sans', sans-serif;
    color: black;
    text-decoration: none;
    margin-top: 10px; 
    font-size: 12pt;
    font-weight: normal;
    text-align: center;
  }

  .project-subtitle{
    font-family: 'Work Sans', sans-serif;
    color: gray;
    font-weight: normal;
    text-decoration: none; 
    font-size: 8pt; 
    text-align: center;
    margin-top: 5px;
    
  }

  ul {
    list-style-type: none;
    line-height: 2;
  }
}

/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/


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

    /*dropdown functions*/

      .material-icons.md-36 { font-size: 36px; }

      .dropdown {
        position: relative;
        display: inline-block;
      }

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      }

      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }

      .dropdown-content a:hover {background-color: #f1f1f1}

      .show {display:block;}

    /*Dropdown stuff*/

        .side-bar-background{
          display: none;
        }

        .dropdown-sidebar{ 
          overflow: hidden;
          position: fixed;
          z-index: +1;
          margin-bottom: -10px;
          margin-left: -10px;
          padding-left: 10px;
          height: 100%;
          width: 200px;
          background:url(
            data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQYV2NkQAX/GZH4/xkYGBhhAmAOSBJEwDkgAQCCrgQEjpMcPgAAAABJRU5ErkJggg==) 
          repeat;
          background-color: white;

        }

        .header-01:link{       
          float: left;
          margin-left: -30px;
          margin-top: 30px;
          font-size: 15pt;
          font-family: 'Work Sans', sans-serif;             
          color: #AA3939;
          font-weight: normal;
          text-decoration: none;
          background-color: #f1f1f1;
        }

        .header-01:visited{                
          color: #AA3939;
          text-decoration: none;
          background-color: #f1f1f1;
        }

        .header-01:hover{
          font-family: 'Work Sans', sans-serif; 
          color: black;  
          text-decoration: none;
        }

        .header-02{          
          float: left;
          margin-top: 5%;
          margin-left: -20px;
          margin-right: 100px;
          width: 150%;
          font-family: 'Work Sans', sans-serif;
          font-size: 12pt;             
          color: navy;
          text-decoration: none;
          line-height: 1.1; 
        }

        .header-03:link{
          background-color: #f1f1f1;
          color:black;
          text-decoration: none;
        }

        .header-03:visited{
          background-color: #f1f1f1;
          color:black;
          text-decoration: none;
        }

        .header-03:hover{
          font-family: 'Work Sans', sans-serif; 
          color: black;  
          text-decoration: none;
        }

        ul {
          list-style-type: none;
        }

    .projects {
      display: grid;
       position: absolute;
       margin-left: 30px;
       margin-top: 30px;
       width: 80%;
       grid-row-gap: 20px;
       grid-template-columns: 100%;
    }

    .project-link:link{
      text-decoration: none; 
    }

    .project-link:hover{
      text-decoration: underline;
      border-color: red;
      border-width: 5px;
      color: rgb(255, 0, 0);  
    }

    .project-images{
      text-decoration: none;
      width: 100%;
    }

    .project-images:hover{
      width: 100%;
    }

    .project-title{
      margin-left: 2%;
      font-family: 'Work Sans', sans-serif;
      color: black;
      text-decoration: none; 
      font-size: 10pt;
      font-weight: normal;
    }

    .project-subtitle{
      margin-left: 2%;
      font-family: 'Work Sans', sans-serif;
      color: black;
      text-decoration: none; 
      font-size: 8pt; 
      font-style: italic;

    }
}