body {
      background:url('/images/bgstars.gif');    /* Image for page background. Remember to use relative path. Why does CSS use different comment coding than HTML... */
      font-family: Verdana
    }
      h1 {
        text-align: center;
        color: #ffffff    /* Text color for h(eading)1, etc. */
      }
      p {
        text-align:center;
        color: #ffffff
      }
      li {
        text-align:center;
        color: #ffffff
      }
      
    .rainbow-box {
      background-color: transparent;
      border: 4px solid;
      border-image: linear-gradient(to bottom right, #cd001a 0% 16.6%, #ef6a00 16.6% 33.2%, #f2cd00 33.2% 49.8%, #79c300 49.8% 66.4%, #1961ae 66.4% 83%, #61007d 83% 100%);
        /* I'd like to stop this from repeating colors eventually but oh well. I think this is literally just a box gradient with the center carved out right now? */
      border-image-slice: 1;
      display: inline-block;
    }
    
    .rainbow-box-middle {
      margin: 50px;
      width: 845px;
      padding: 6px 6px;
      min-height: 400px;
      align-items: center;
      display:inline-block;
      justify-content: center;
    }   /* One pixel off from aligning with the navigation buttons :/ */
    
    .rainbow-box-left {
     width: 300px;
     padding: 6px 6px;
     margin-top: 20px;
     min-height: 500px;
     position: absolute;
     margin-left: 40px;
    justify-content: center;
    }
    
    .rainbow-box-right {
      width: 300px;
      padding: 6px 6px;
      margin-top: 20px;
      min-height: 500px;
      position: relative;
      display: inline-block;
      margin-right: 40px;
      justify-content: center;
    }
    
    .rainbox-box-about {
      margin-top: 20px;
      min-height: 500px;
      padding: 4px 4px;
      max-width: 1000px;
      position: relative;
      margin-right: 40px;
      text-align: center;
      justify-content: center;
      display: flex;
      align-items: center;
    }
    
    .center {
      height: auto;
      display: flex;
      margin-left: auto;
      margin-right: auto;
    }   /* Centers objects when used as class. Or at least it should. Centering is a nightmare for no apparant reason. */
    
    .button-container {
      height: auto;
      display: flex;
      justify-content: center;
    }   /* Centers banners specifically. Because one centering tool isn't enough? */
    
    .banner-size {
      max-height: 31px;
    }
    
    .mybannerspacer {
      margin-bottom: 60px;
    }
    
    .glasscontainer {
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 50px;
      margin-right: 50px;
      background-color: rgba(255,255,255,0.01);
      border: 5px black solid;
      display: block;
      padding: 25px;
      width: 1750px;
    } /* Add extra space on sides? Make size non-relative to window size?*/
    
    .centerscreen {
      display: flex;
      justify-content: center;
      text-align: center;
      min-height: 90vh;
    } /* We're going to ignore the massive bowl of spaghetti I just created with this. */
    
    .button {
      background-color: #000000;
      color: white;
      padding: 15px 15px;
      text-align: center;
      display: block;
      font-size: 16px;
      text-decoration: none;
      transition-duration: 0.22s;
      cursor: pointer;
      margin-top: 25px;
    }   /* Double check how much of this is redundant */
  
    .button1 {
      border: 2px solid #cd001a;
      margin-right: 10px;
    }
  
    .button1:hover {
      background-color: #cd001a;
    }
    
    .button1filled {
      background-color: #cd001a;
    }
  
    .button2 {
      border: 2px solid #ef6a00;
      margin-right: 10px;
    }
  
    .button2:hover {
      background-color: #ef6a00;
    }
  
    .button2filled {
      background-color: #ef6a00;
    }
  
    .button3 {
      border: 2px solid #f2cd00;
      margin-right: 10px;
    }
  
    .button3:hover {
      background-color: #f2cd00;
    }
    
    .button3filled {
      background-color: #f2cd00;
    }
  
    .button4 {
      border: 2px solid #79c300;
      margin-right: 10px;
    }
  
    .button4:hover {
      background-color: #79c300;
    }
  
    .button4filled {
      background-color: #79c300;
    }
    
    .button5 {
      border: 2px solid #1961ae;
      margin-right: 10px;
    }
  
    .button5:hover {
      background-color: #1961ae;
    }
  
    .button5filled {
      background-color: #1961ae;
    }
  
    .button6 {
      border: 2px solid #61007d;
    }
    
    .button6:hover {
      background-color: #61007d;
    }   /* Do I even need the button hovering to have it's own separate container or w/e it's called? */
    
    .button6filled {
      background-color: #61007d;
    }
    /* Make the row of buttons the same width as the middle textbox. Then maybe add two long textboxes or something to the left and right of the middle textbox.*/
    
    /* Bugfixing to do: Find a way to prevent page assets popping-in? Maybe delay page loading briefly until all assets are loaded? I mainly notice this with the buttons and visitor counter on the bottom of the homepage. */