:root {
    --header-height: 200px; 
  }
  
  body {
      font-family: 'Noto Sans', sans-serif;
      margin: 0px;
      padding: 0px;
      height: 100%;
      text-align: left;
      background-image: linear-gradient(to right, rgb(255, 255, 255) , rgb(176, 233, 255));
      background-color: rgb(255, 255, 255);
  }
  
  
  /* HEADER */
  .header {
  /*    float: left;*/
      padding: 5px;
      height: 25px;
      background: rgba(0, 0, 0, 0.76);
      position: fixed;
      width: 100%;
      align-content: center;
      overflow: hidden;
   
      border-style: solid;
      border-right: 0px;
      border-left: 0px;
      border-top: 0px;
      border-bottom-width: 1px;    
  }
  
  .header #name{
      font-size: 50px;
      font-weight: bold;
      text-align: left; 
      color: white;
      text-decoration: none;
  }
  
  .header #links{
      
      margin-right: 20px; /* scroll bar! */    
      float: right;
      text-align: right;
      color: white;
      text-decoration: none;
      
  }
  
  #sketch-holder{
  
      height: var(--header-height);
      width: 100%;
      position: absolute;
      overflow:hidden; /*hides the overflow if a scrollbar is present*/

      border-style: solid;
      border-right: 0px;
      border-left: 0px;
      border-top: 0px;
      border-bottom-width: 1px;   
  }
  
  
  
  /* MAIN */
  .first {
      /*background-color: rgb(66, 162, 191);*/
  /*  Removed the following line because it just looked goofy, good idea though to show
      somethig if there is no javascript enabled.
      background-image: url("./img3.JPG");   */
      background-color: #1C2541;
      background-size: 100%;
      background-repeat: no-repeat;
      height: var(--header-height);
      overflow: hidden;
      
  }
  
  
  .first .title {
      position: absolute;
      top: calc(var(--header-height) - 185px);
      left: 45px;
      font-weight: bold;
      color: white;
      font-size: 100px;
      text-align: left;
      vertical-align: baseline;
      padding-bottom: 0px;
      border: 0px;
  }
  
  
  .arrow {
      position: absolute;
      top: calc(var(--header-height) - 35px);
      right: 20px;
      left: auto;
  }
  
  
  .time {
      position: absolute;
      top: calc(var(--header-height) - 35px);
      right: 20px;
      right: 55px;
      left: auto;
  }


  
  .flex-container {

      display: flex;
      flex-flow: column wrap;
      max-width: 1000px;
      margin-bottom: 50px;
      padding-left: 15px;
      padding-right: 15px;
      margin-left: auto;
      margin-right: auto;
      

  }

  .flex-item {
      margin-top: 0px;
      margin-left: 35px;
      max-width: 600px;
      padding: 35px;
      border-radius: 5px;
      background-color: #F0F0F0;
  }  
    

  /* FOOTER */
  .footer{
      position: static;
      margin-top: 15px;
      padding-top: 10px;
      padding-bottom: 100px;
      background-color: rgba(88, 237, 255, .8);
      background-image: url("./footer_bg.png");
      background-repeat: repeat-x;
      text-align: center;
      bottom: auto;
  
  }