:root {
  --sidebar:#d0df9b;
  --transparent-box:rgba(217, 248, 158, .6);
  --main:#c5e063;
  --background:#80b918;

  --border-top:#003528;
  --border-left:#185f39;
  --border-right: #2e8250;
  --border-bottom:#368d59;

  --linebreak:rgba(0, 102, 31, 0.75);
  --titles: #044810;
  --text-emphasis:#013816;
  --text-shadow:rgb(135, 153, 35);
  --text:#003528;

  --musicButtonIcon:#d8f6b3;
  --musicButton:#355410;
  --musicButtonBorder:#7da92d;

  --galleryButtonBG:#a2bc55;
  --galleryButtonBorder:#6c9324;
  
  --tableBackground:#dcf4af;
  --tableHeading:#adeb39;
  --tableOdds:#bdf68b;
  --tableEvens:#a7dc7b;
}





/* 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 */

/* 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 {
    color:  var(--musicButtonIcon);
    border-color:  var(--musicButtonBorder);
    background-color:  var(--musicButton);
}

.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 */


/* IMAGES */
#indexPage{
    /* bottom background image stuff in index page */
    background-image: url(/deco/mascot_bug.png), url(/deco/grass.png);
    /* END */
  }
  #writingButton{
    background-image: url(/deco/fun_icons/writing.png);
  }

  #musicButton{
    background-image: url(/deco/fun_icons/music.png);
  }

  #creativeButton{
    background-image: url(/deco/fun_icons/creative.png);
  }

  #hobbiesButton{
    background-image: url(/deco/fun_icons/hobbies.png);
  }

  #personalButton{
    background-image: url(/deco/fun_icons/personal.png);
  }

  #extrasButton{
    background-image: url(/deco/fun_icons/extras.png);
  }
/* END */

/* Navigation Bar Buttons */
#homeButton{
  background-image: url(/deco/home_img.png);
}

#aboutButton{
  background-image: url(/deco/about_img.png);
}

#projectsButton{
  background-image: url(/deco/projects_img.png);
}

#funButton{
  background-image: url(/deco/fun_img.png);
}

#galleryButton{
  background-image: url(/deco/gallery_img.png);
}

#artistButton{
  background-image: url(/deco/contact_img.png);
}

.logo {
    background-image: url(/title.png);
  }

.title {
     /* bottom background image stuff in index page */
     background-image: url(/deco/banner.png);
  }
/* END */