/*********************************************
  If the screen size is 901px wide or more...
 *********************************************/
@media screen and (min-width:901px) {

  @supports (aspect-ratio: 16/9) {
    .yt {
      width: calc(100% - 330px);
      aspect-ratio: 16/9;
    }
  }

  @supports not (aspect-ratio: 16/9) {
    .yt {
      width: 480px;
      height: 270px;
    }
  }
  
  .yt iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

}

/*********************************************
  If the screen size is 900px wide or less...
 *********************************************/
@media screen and (max-width:900px) {

  .yt {
    width: 480px;
    height: 270px;
  }

  .yt iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

}

/*********************************************
  If the screen size is 601px wide or more...
 *********************************************/
@media screen and (min-width:601px) {
  
  .border {
    border-style:double;
    border-width:2px;
    border-color:black;
  }

  .main-content {
    margin-top:5px;
    margin-left:107px;
  }
  
  .margie {
    margin-top:2px;
    margin-bottom:2px;
    margin-left:2px;
    margin-right:2px;
  }
  
  h1 {
    font-size:32px;
  }

  h2 {
    font-size:24px;
    margin-top:10px;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:0px;
  }

  h3 {
    font-size:24px;
    margin-top:5px;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:5px;
  }
  
  .buttons{
    position:fixed;
    top:5px;
    left:5px;
    margin:auto;
    width:100px;
    font-size:18px;
  }
  
  .rect-button {
    width:100px;
    height:56px;
    border:0px;
  }

  .square-button {
    width:56px;
    height:56px;
    border:0px;
  }
  
  ul{
    line-height: 1.5;
    margin-left:75px;
    padding: 0;
  }

  ul li {
    list-style: none;
    text-align: left;
  }

  #single {
    width:auto;
    background-color:silver;
  }
  
  #album {
    width:auto;
    background-color:white;
  }
  
}

/*********************************************
  If the screen size is 600px wide or less...
 *********************************************/
@media screen and (max-width:600px) {

  .border {
    border-style:double;
    border-width:1px;
    border-color:black;
  }

  .main-content {
    margin-top:5px;
    margin-left:49px;
  }
  
  .margie {
    margin-top:1px;
    margin-bottom:1px;
    margin-left:1px;
    margin-right:1px;
  }
  
  h1 {
    font-size:24px;
  }

  h2 {
    font-size:20px;
    margin-top:5px;
    margin-left:5px;
    margin-right:5px;
    margin-bottom:0px;
  }

  h3 {
    font-size:20px;
    margin-top:2px;
    margin-left:2px;
    margin-right:2px;
    margin-bottom:2px;
  }
  
  .buttons{
    position:fixed;
    top:5px;
    left:5px;
    margin:auto;
    width:42px;
    font-size:8px;
  }
  
  .rect-button {
    width:42px;
    height:42px;
    border:0px;
  }

  .square-button {
    width:42px;
    height:42px;
    border:0px;
  }
  
  ul{
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  ul li {
    list-style: none;
    text-align: center;
    margin-left:10px;
    margin-right:10px;
  }

  #single {
    width:100%;
    background-color:silver;
  }
  
  #album {
    width:100%;
    background-color:white;
  }
  
}

/*******************************************************
    Below here, things don't vary based on screen size
 *******************************************************/

body {
  font-family:Avenir;
  font-size:13px;
  background-image:url(./images/joe-home-studio-sound-panels=IMG_2247.jpg);
  background-color:white;
  background-size:cover;
  color:black;
  text-align:center;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

p {
  margin-top:0px;
  margin-left:0px;
  margin-right:0px;
  margin-bottom:0px;
  padding-top:0px;
  padding-left:0px;
  padding-right:0px;
  padding-bottom:0px;
}
.menu {
  font-size:15px;
}

.story {
  font-size:13px;
  font-weight:400;
  text-align:left;
  width:42ch;
  margin-top:6px;
  margin-left:6px;
  margin-right:6px;
  margin-bottom:6px;
}

#lyrics-display {
  height:200px;
  border-style:inset;
  border-width:3px;
  border-color:black;
  background-color:white;
  margin-top:0px;
  margin-left:4px;
  margin-right:4px;
  margin-bottom:4px;
}

#bio {
  border-style:solid;
  border-width:1px;
  border-color:white;
  background-color:white;
}

a:link {
  text-decoration:none;
  color:steelblue;
}

a:visited {
  text-decoration:none;
  color:steelblue;
}

a:hover {
  text-decoration:none;
  color:dimgray;
}

a:hover .lyric-icon, a:active .lyric-icon {
  border-color:dimgray;
  border-width:1px;
  border-style:dotted;
}

.lyric-icon{
  width:11px;
  height:11px;
  background-color:silver;
  margin-right:2px;
}

.stretch{
  width:100%;
}

.flexie {
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.rounded-corners {
  border-radius:15px;
  border-spacing:0;
}

.surrounding-div {
  display: flex;
  flex-direction: column;
  width: auto; /* or any specific width you prefer */
}

.inner-div {
  flex: 1; /* makes both inner divs take up equal space if no specific height is set */
  width: 100%;
}

.footer {
  font-size:13px;
  color:white;
}