:root {
    --sidebar:#a1bbe9;
    --transparent-box:rgba(179, 190, 242, 0.826);
    --main:#88a8e0;
    --background:#0c1727;
  
    --border-top:#5f659a;
    --border-left:#344071;
    --border-right: #1f2a80;
    --border-bottom:#585f8a;
  
    --linebreak:rgba(49, 52, 111, 0.75);
    --titles: #05043c;
    --text-emphasis:#051f44;
    --text-shadow:rgb(127, 122, 169);
    --text:#071932;

    --textFooter:#c8d9f0;
    --textFooter-emphasis:#86aadc;
  
    --musicButtonIcon:#c8d9f0;
    --musicButton:#1e1c4c;
    --musicButtonBorder:#3d3f6e;

    --galleryButtonBG:#4b59a4;
    --galleryButtonBorder:#434ea1;
    
    --tableBackground:#afb5f4;
    --tableHeading:#5d83f5;
    --tableOdds:#98abf7;
    --tableEvens:#8d94db;
  }
  
  
  
  /* Elements */
  body {
    background-color: var(--background);
    color: var(--text);
  }
  
  hr {
    background-image: linear-gradient(to right, rgba(12, 70, 0, 0), var(--linebreak), rgba(0, 0, 102, 0)); 
    }
  
  a {
    color: var(--text-emphasis);
    }
  
  h1 {
    text-shadow: 2px 2px 3px var(--text-shadow);
    color: var(--titles);
    }
  
  h2 {
    text-shadow: 2px 2px 3px var(--text-shadow);
    color: var(--titles);
    }
  
  h3 {
    text-shadow: 2px 2px 3px var(--text-shadow);
    color: var(--titles);
    }
  
  h4 {
    text-shadow: 2px 2px 3px var(--text-shadow);
    color: var(--titles);
    }
          
  b{
    color: var(--text-emphasis);
    }
          
  i{
     color: var(--text-emphasis);
    }
  /* END */
  
  /* Megan Ito Page */
    /* Small images on the page */
  img.megan{
    border-top-color: var(--border-top);
    border-right-color: var(--border-right);
    border-bottom-color: var(--border-bottom);
    border-left-color: var(--border-left);
    }
  /* END */

  /* Gallery Page */
    /* Gallery Buttons */
    .oldImage button{
      background-color: var(--galleryButtonBG);
      border-color: var(--galleryButtonBorder);
    }
    /* end */
  /* END */

  /* SO THAT WE CAN ACTUALLY SEE THE FOOTER!!!! */
  .credits{
    color:var(--textFooter);
  }
  .credits a{
    color:var(--textFooter-emphasis);
  }
  .credits b{
    color:var(--textFooter-emphasis);
  }
  .credits i{
    color:var(--textFooter-emphasis);
  }
  /* end */
  
  /* Box on the Left on Main Page */
  #madnessOne{
    background-color: var(--transparent-box); 
    color: var(--text);
    border-color: var(--text);
  }
  /* end */
  
  /* Box on the Right on Main Page */
  #madnessTwo{
    background-color: var(--transparent-box); 
    color: var(--text);
    border-color: var(--text);
  }
  /* end */
  
  /* music stuff */
  .scrolly b{
    color: var(--textFooter) 
  }

  .scrolly i{
    color: var(--textFooter) 
  }

  .music {
    color:  var(--musicButtonIcon);
    border-color:  var(--musicButtonBorder);
    background-color:  var(--musicButton);
  }
  /* end */
  
  .sidebar {
    background-color: var(--sidebar);
    border-top-color: var(--border-top);
    border-right-color: var(--border-right);
    border-bottom-color: var(--border-bottom);
    border-left-color: var(--border-left);
    }
    
  .item { 
    background-color: var(--main);
    border-top-color: var(--border-top);
    border-right-color: var(--border-right);
    border-bottom-color: var(--border-bottom);
    border-left-color: var(--border-left);
    }
  
  .directory {
    background-color: var(--main);
    border-color: var(--text);
    }
        
  .album {
    background-color: var(--main);
    border-color: var(--text);
    }
  
  /* yearly table stuff below */
  .yearly{
    background-color: var(--tableBackground); 
    color: var(--text);
  }
  
  .yearly th{
    background-color: var(--tableHeading); 
  }
  
  #t1 tr:nth-child(odd) {
    background-color: var(--tableOdds);
  }
  #t1 tr:nth-child(even) {
    background-color: var(--tableEvens);
  }
  /* END */
  
  
  
    /* index page deco */
      #indexPage{
      /* bottom background image stuff in index page */
      background-image: url(/deco/oceanCurrent/mascot_ocean.png), url(/deco/oceanCurrent/coral_ocean.png);
      /* END */
    }
  
          /* small boxes within items, main index page */
          #first {
            /* bottom background image stuff in index page */
          background-image: url(/deco/oceanCurrent/mascot_sit_one_o.png);
          /* END */
          }
          #second {
            /* bottom background image stuff in index page */
          background-image: url(/deco/oceanCurrent/mascot_sit_two_o.png);
          /* END */
          }
          
          .title { 
             /* bottom background image stuff in index page */
             background-image: url(/deco/oceanCurrent/banner_o.png);
          }
  
    #writingButton{
      background-image: url(/deco/oceanCurrent/writing_o.png);
    }
  
    #musicButton{
      background-image: url(/deco/oceanCurrent/music_o.png);
    }
  
    #creativeButton{
      background-image: url(/deco/oceanCurrent/creative_o.png);
    }
  
    #hobbiesButton{
      background-image: url(/deco/oceanCurrent/hobbies_o.png);
    }
  
    #personalButton{
      background-image: url(/deco/oceanCurrent/personal_o.png);
    }
  
    #extrasButton{
      background-image: url(/deco/oceanCurrent/extras_o.png);
    }
  /* END */
  
  /* Navigation Bar Buttons */
  #homeButton{
    background-image: url(/deco/oceanCurrent/home_image_o.png);
  }
  
  #aboutButton{
    background-image: url(/deco/oceanCurrent/about_img_o.png);
  }
  
  #projectsButton{
    background-image: url(/deco/oceanCurrent/projects_img_o.png);
  }
  
  #funButton{
    background-image: url(/deco/oceanCurrent/fun_img_o.png);
  }
  
  #galleryButton{
    background-image: url(/deco/oceanCurrent/gallery_img_o.png);
  }
  
  #artistButton{
    background-image: url(/deco/oceanCurrent/contact_img_o.png);
  }
  
  .logo {
      background-image: url(/deco/oceanCurrent/title_o.png);
    }
  
  /* END */