:root {
  --sidebar:#292c1f;
  --transparent-box:rgba(42, 49, 30, 0.6);
  --main:#32352b;
  --background:#1d2016;

  --border-top:#656f4f;
  --border-left:#575f46;
  --border-right: #495531;
  --border-bottom:#7a8a58;

  --linebreak:rgba(152, 168, 98, 0.75);
  --titles: #98a862;
  --text-emphasis:#b2c06a;
  --text-shadow:rgb(23, 37, 15);
  --text:#b8bda2;

  --musicButtonIcon:#bacda2;
  --musicButton:#252b19;
  --musicButtonBorder:#5d6e3d;

  --galleryButtonBG:#585b4d;
  --galleryButtonBorder:#909883;
  
  --tableBackground:#2d3324;
  --tableHeading:#272c1c;
  --tableOdds:#35412a;
  --tableEvens:#2a401a;
}



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



  /* index page deco */
    #indexPage{
    /* bottom background image stuff in index page */
    background-image: url(/deco/mascot_bug_d.png), url(/deco/grass_d.png);
    /* END */
  }

        /* small boxes within items, main index page */
        #first {
          /* bottom background image stuff in index page */
        background-image: url(/deco/mascot_sit_one_d.png);
        /* END */
        }
        #second {
          /* bottom background image stuff in index page */
        background-image: url(/deco/mascot_sit_two_d.png);
        /* END */
        }
        
        .title { 
           /* bottom background image stuff in index page */
           background-image: url(/deco/banner_d.png);
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* END */