@charset "UTF-8";
*{
  box-sizing: border-box;
}
body #warning{
  width: 100%;
  margin: 0;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 1.3rem;
}
body #warning a:first-of-type{
  color: rgb(255, 255, 255);
  cursor: pointer;
}
body{
  margin: 0;
  background: #8c6239;
}
header img{
  width: 50%;
  margin-left: 25vw;
  margin-bottom: 1rem;
}
#container{
  width: 100%;
  display: flex;
}
#main-contain{
  width: 90%;
  padding: 3rem;
  background: #c69c6d;
  box-shadow:  -2px -1px 5px #c69c6d;
}
aside nav{
  display: flex;
  flex-direction: column;
  text-align: center;
}
a{
  color: #1a1a1a;
  text-decoration: none;
}
aside nav a{
  background: #4d4d4d;
  padding: 2rem;
  border-top: 2.5px solid black;
  border-bottom: 2.5px solid black;
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
}
nav a:hover{
  background: #1a1a1a;
  transition: .5s;
}
figure figcaption{
  text-align: center;
  font-size: 1.2rem;
  padding-top: 1rem;
}
#top{
  border-top: 5px solid #979797;
  box-shadow: 0 -1px 5px #979797;
}
#bottom{
  border-bottom: 5px solid #000;
    box-shadow: 0 1px 5px #000;
}
h1,h2{
  text-align: center;
}
h1{
  font-size: 3rem;
}
h2{
  font-size: 2.5rem;
}
p{
  display: block;
  font-size: 1.3rem;
}
#tune{
  text-align: center;
}
#container-contain, #video-wrap{
  width: 100%;
  display: flex;
}
.guitar-contain{
  width: 15%;
  margin: 0 15% 0 15%;;
}
.guitar-contain img{
  width: 100%;
}
#guitar-contain-tune{
  width: 80%;
  margin-left: 15%;
}
.group{
  width: 100%;
  display: flex;
}
.note{
  width: 33%;
}
.note img{
  width: 100%;
}
#chord{
  width: 15%;
}
.vid_fig img{
  width: 100%
}
.vid_fig figcaption{
  font-size: 1.4rem;
}
video{
  width: 100%;
}
.qContain p{
  display: inline;
}
.qContain img{
  max-width: 1.25%;
}
.special{
  width: 0.75%;
}
.answer{
  margin: 0.5rem;
}
input[type=submit]{
  margin: 1rem;
}
.answer{
  display: block;
}
.fret_link{
  float: right;
}
input[type=submit], .fret_link{
  background: #4d4d4d;
  color: white;
  font-size: 1.5rem;
  padding: 0.5rem;
  border: 1px solid #4d4d4d;
}
input[type=submit]:hover, .fret_link:hover{
  background: #1a1a1a;
  transition: 0.5s;
}
label{
  font-size: 1.1rem;
  line-height: 1.2;
}
footer{
  text-align: center;
  padding: 1rem;
  clear: both;
  position: relative;
}
@media all and (max-width: 925px) {
  #container-contain, .container-contain, #video-wrap{
    display: block;
    width: 100%;
  }
  .guitar-contain{
    width: 100%;
  }
  .guitar-contain img{
    width: 80%;
  }
  #guitar-contain-tune{
    width: 100%;
  }
  .group{
    display: block;
  }
  #chord{
    width: 50%;
  }
  .note{
    width: 80%;
  }
  .note img{
    width: 30%;
    margin-left: 40%;
  }
}