a{
  text-decoration: none;
  color: black;
}
a:hover {
  background-color: lightgray;
  text-decoration: underline;
}

.container{
  border: 5px double black;
  margin: -5vw auto;
  padding: 10vw 0.7em;
  width: 85vw;
  font-family: Geneva, Tahoma, sans-serif;
}

#music-box{
  border: 2px solid black;
  border-radius: 8px;
  padding: 0.1em 0 0.5em 0;
  font-family: monospace;
  font-size: 15px;
}

header{
  padding: 0 0.4em ;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
header p {
  margin: 0;
}
header a {
  font-weight: bold;
  font-size: 16px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid black;
  border-left: hidden;
  border-right: hidden;
  font-size: 14px;
}
nav ul li {
  float: left;
}
nav ul li a {
  display: block;
  color: black;
  text-align: center;
  padding: 0 6px;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: lightgray;
  text-decoration: underline;
}

win-dow{
  margin: 0.5em;
  padding: 0.5em 0.7em;
  border: 2px solid black;
  border-radius: 8px;
  display: grid;
  grid-template-areas: 
    "time-tracker in-fo audio-gif"
    "time-tracker na-me audio-gif";
  gap: 0.5em;
}
time-tracker{
  grid-area: time-tracker;
}
in-fo{
  grid-area: in-fo;
}
na-me{
  grid-area: na-me;
  font-size: 12px;
}
audio-gif{
  grid-area: audio-gif;
}
#bar img{
  width: 180px;
}


fe-ed{
  margin: 0.3em;
}

#list{
  text-align: center;
  margin: 0.3em;
}
.side{
  text-align: center;
  margin: 0.5em;
}

article{
  border: 2px solid black;
  border-radius: 8px;
  margin-bottom: 0.7em;
  padding: 0.5em;
}
section, .a-side, .b-side{
  margin: auto;  
  padding: 0.6em;
  border: 2px solid black;
  border-radius: 8px;
  background: url("/Images/cd-bg1.jpeg") no-repeat ;
  width: 75vw;
  height: 75vw;
  max-height: 400px;
  max-width: 400px;
  min-height: 200px;
  min-width: 200px;
    overflow: auto;
  font-size: 13px;
  grid-auto-rows: 20% auto;
}
a-side title-text{
  grid-area: title-text;
  margin: 1.5em  0 0 1em;
}
b-side title-text{
  margin: 1.5 1em 0 0;
}
review-text{
  grid-area: review-text;
  margin: 0.7em;
}
song-list{
  grid-area: song-list;
}


ul{
  padding: 0;
}
 li{
  list-style-type: none;
}
.a-side{
  display: grid;
  grid-template-areas: 
    "title-text song-list"
    "review-text song-list";
}
.a-side li{
  padding-right: 0.5em;
  text-align: right;
}
.cdone{
  padding: 0 0 -2em -2em;
}
.b-side{
  display: grid;
  text-align: right;
  grid-template-areas: 
    "song-list title-text"
    "song-list review-text";
}
.b-side li{
  padding-left: 0.5em;
  text-align: left;
}
.cdtwo{
  float: right;
  padding : 0 -2px -2px 0;
}