:root {
  
  --bgimg: url(/img/fishstucki.png);
  
  --pgcolor: #A8D78E;
  --txtcolor: black;
  --bgcolor: #2F2D57;
  --navbutton: #8CB579;
  --navbuttonsel: #2D572D;
  --bodyheaders: #2D572D;
  --headertxtcolor: white;
  --postbg: #FBFAE9;
  --navlinktxt: black;
  --bodylink: #0087DB;
  --bodylinkhover: #FF9D2E;
  --albumglow: #F5CB25;
  --albumshadow: black;
  
  --bodyfont: Garamond, serif;
  --headerfont: Garamond, serif;
  
  
}





body {
  background-color: var(--pgcolor);
  background-image: var(--bgimg);
  color: var(--txtcolor);
  font-family: var(--bodyfont);
}

/*NAVIGATION SIDEBAR YAYYYYYY*/


.sidebar {
  float: left;
  width: 225px;
  margin: 50px 10px 10px -10px;
}

.sidebarimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}

.sidebar h2 {
  font-family: var(--headerfont);
  font-size: 1em;
  padding: 0 15px 0px;
}

.sidebar a {
  color: var(--darker);
  font-weight: bold;
  font-size: 1em;
  text-decoration: none;
}


.sidebar .nav-item {
  background-color: var(--navbutton);
  margin: 5px 15px 5px -40px;
  padding: 10px 20px 10px;
  text-align: right;
  font-family: var(--bodyfont);
  font-size: 1em;
}

.littleicons{
 height: 18px;
 vertical-align: sub;
}

.sidebar .nav-item:hover {
  background-color: var(--albumglow);
  margin: 5px -20px 5px -40px;
}

.sidebar .here {
  background-color: var(--navbuttonsel);
  margin: 5px -20px 5px -40px;
}




/*MAIN CONTENT*/


h3 {
  color: var(--headertxtcolor);
  background-color: var(--bodyheaders);
  font: 1.1em var(--headerfont);
  text-align: center;
  padding: 8px;
}

.content {
  position: static;
  display: block;
  
  background-color: var(--postbg);
  
  width: 885px;
  margin: 50px;
  padding: 10px 20px 10px 20px;
  margin-left: 350px;
  
}

.content ul {
    display: inline-block;
    zoom: 1;
    margin: 10px 40px 20px;
    border-left: 2px solid var(--bodyheaders);
    border-right: 2px solid var(--bodyheaders);
    padding: 0 20px 0 40px;
    font-family: var(--bodyfont);
    font-size: 1em;
}

.content p {
    margin: 10px 40px 20px;
    border-left: 2px solid var(--bodyheaders);
    border-right: 2px solid var(--bodyheaders);
    padding: 0 20px 0;
    font-family: var(--bodyfont);
    font-size: 1em;
}


.content a {
  text-decoration: none;
  font-family: var(--bodyfont);
  font-size: 1em;
  color: var(--bodylink);
}

.content a:hover, .content a:active {
  cursor:pointer;
  color: var(--bodylinkhover);
}

.content .title {
  width: 100%;
  margin: auto;
  text-align: center;
}

.title h1 {
  font: 1em var(--headerfont);
  margin: 0;
}

.content .description {
  width: 100%;
  font-size: 1em;
}


.imglist img {
  width: 200px;
  display:inline-block;
  margin: 0 7px 15px;
  border: 1px solid var(--bodyheaders);
/*  box-shadow: 2px 2px 15px var(--albumshadow); */
}

.imglist a img:hover{
  cursor: pointer;
  width: 200px;
  display:inline-block;
  box-shadow: 0 0 10px var(--albumglow);

}

.imglist a:hover, .imglist a:active { 
  border: none;
  width: 125px;
}

.imglist a:hover:after {
    content: url(img/cdblank.png); /* no need for qoutes */
    position: absolute;
    margin-left: -7px;
}

.buttons a:hover, .buttons a:active { 
  border: none;
}

.cdstack {
  position: absolute;
  
  top: 300px;
  right: 60px;
}







@font-face {
  font-family: Baskerville;
  src: url(https://grackleclaw.neocities.org/LibreBaskerville-Regular.ttf);
}