html{
  background-image:url('/images/spider.png');
  background-size:fill;
  }
  
   @font-face {
    font-family: 'OCR-A BT'; 
    src: url('/font/OCR-a___.woff') format('woff');
    }
    @font-face {
    font-family: 'kal';
    src: url('/font/Kalmari.woff2') format('woff2');
  
  }
    
  button{
    width:150px;
    height:50px;
    background: black;
    border:white 1px double;
    box-sizing: border-box;
    color:white;
    padding:10px;
    font-family:'OCR-A BT';
    font-size:20px;
    
    }
  button:hover{
    background: red;
    border:black 4px double;
    color:black;
    
    
    }
    #mainbox{
      flex-grow:1;
      display:flex;
      width:1000px;
      height:100%;
      background-image:url('/images/mcrbg-min.png');
      background-size:fill;
      border-radius:15px;
      box-shadow:0px 0px 10px 10px black;
      
      
      }
    
    #navbar{
      
    width: 99%;
    height: 50px;
    min-height:50px;
    background: linear-gradient(180deg, rgba(0,241,255,1) 0%, rgba(17,100,153,1) 29%, rgba(32,81,112,0.6978992280505952) 65%, rgba(54,54,54,0) 86%, rgba(124,208,255,1) 100%); 
    border: 5px groove #585858;
  border-radius:15px;
  margin-bottom:-55px;
  margin-right:10px;
  padding-bottom:5px;
  text-shadow: 4px -2px 0px #2e0300;
    }
    
  #year{
    flex-grow: 1;
    width:20%;
    background:red;
    }
  #criteria{
    flex-grow: 1;
    width:100%;
  }
  
  #Thumbnails{
    flex-grow: 1;
    }
    
  #artwork{
    flex-grow: 1;
    }