:root{
  --body-background: url('/Background/05968718c1939509160dfd4253088193.jpg');
  --border: 2px groove black;
  --border2: 2px groove #EFBF04;
  --link: #EFBF04;
  --container-background: url('/Background/grid.png');
  --side-background: url('/Background/argyle.png');
  --header-background: url('/Background/c78363128dc74e29efc2fc08a6e74e49.jpg');
  --main-background: url('/Background/5111ff605b7beeab9da7b2d2d0ea8d9c.jpg');
  --divider: url('/Graphics/Piano.png');
  --entry-background: #fef9ff;
  --text: white;
  --footer-background:url('/Background/staffpaper.jpg');
  }
*{
 box-sizing: border-box; 
}
audio{
  width: 100%;
  }
  audio::-webkit-media-controls-panel{
    background: #8B0000;
    }
    audio::-webkit-media-controls-current-time-display{
      text-shadow: 0px;
      color: white;
      }
        audio::-webkit-media-controls-time-remaining-display{
      text-shadow: 0px;
      color: white;
      }
a{
  color: var(--link);
  }
a:hover{
  color: #FCDC5A;
  }
  li{
    color: var(--link);
    }
    li:nth-child(even){
      list-style-image: url('/Graphics/SmallSaxophone.png');
      }
      li:nth-child(odd){
     list-style-image: url('/Graphics/SmallViolin.png');
        }
    h6{
      
      }
body{
  background: var(--body-background);
  }
.container{
  border: var(--border);  
  width: 900px;
  height: 710px;
  margin: 0 auto;
  padding: 12px;
  background: var(--container-background);
    background-size: 20px;
    }
.side{
  height: 100%;
  width: 300px;
  display: inline-block;
  float: left;
  border: 2px dashed #7B3F00;
  padding: 12px;
  background: var(--side-background);
  background-size: 90px;
  color: var(--text);
  overflow-y: scroll;
  }
  .side::-webkit-scrollbar{
    display:none;
    }
  .side img{
    width: 100%;
    border: var(--border2);
    }
.main{
  height: 100%;
  width: 558px;
  display: inline-block;
  float:right;
  border:var(--border2);
  padding: 12px;
  background: var(--main-background);
  background-size: cover;
  overflow-y: scroll;
  }
  .header{
    height: 100px;
    width: 900px;
    overflow-y: scroll;
    border: var(--border);
    display: block;
    margin: 0 auto;
    margin-bottom: -1px;
    background: var(--header-background);
    background-size: 100%;
    background-position: center center;
    border-radius: 12px 12px 0px 0px;
    }
    .header-divider{
      background:var(--divider);
      height: 20px;
      width: 900px;
      display: block;
      margin: 0 auto;
      margin-bottom: -1px;
      border: var(--border);
      background-size: 200px 100%;
      }
      .entry{
        margin-bottom: 10px;
        width: 100%;
        padding: 12px;
        background: var(--entry-background);
        background-size: 40px;
        min-height: 100px;
        max-height: 500px;
        overflow-y: scroll;
        color: #7B3F00;
        border: var(--border);
        }
          .footer{
    height: 100px;
    width: 900px;
    overflow-y: scroll;
    border: var(--border);
    display: block;
    margin: 0 auto;
    margin-top: -1px;
    background: var(--footer-background);
    background-size: cover;
    background-position: center center;
    border-radius: 0px 0px 12px 12px;
    }