@import url(http://fonts.lug.ustc.edu.cn/css?family=Montserrat);

body {
  text-align: center; 
  background-color: #bdc3c7;
  margin: auto;
}

.body {
  margin: auto; 
  width: 70px; 
  text-align: center; 
}

.soundhole {
  background-color: #824E0D;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  position: absolute;
  margin-top: 148px;
  margin-left: 26px;
  border: 2px solid tan;
  z-index: 100;
}

.top {
    width: 85px;
    height: 70px;
    background: #B97012;
    border-radius: 60px / 70px;
    position: absolute;
    margin-top: 130px;
}

.bottom {
  width: 100px;
  height: 80px;
  background: #B97012;
  border-radius: 80px / 60px;
  position: absolute;
  margin-top: 170px;
  margin-left: -7px;
}

.brown {
  background-color: #320D15;
  width: 45px;
  height: 9px;
  border-radius: 5px;
  margin-top: 210px;
  margin-left: 20px;
  position: absolute;
}

.leftwhite {
  background-color: #f8f8fa;
    width: 7px;
    height: 3px;
  margin-top: 211px;
  margin-left: 22px;
  position: absolute;
  border-radius: 100%;
}

.saddle {
  background-color: #E0D4D8;
  width: 22px;
  height: 2px;
  margin-top: 211px;
  margin-left: 32px;
  position: absolute;
}

.rightwhite {
  background-color: #f8f8fa;
  width: 7px;
  height: 3px;
  margin-top: 211px;
  margin-left: 56px;
  position: absolute;
  border-radius: 100%;
}

.pin {
  background-color: #C6C6C8;
  width: 22px;
  height: 2px;
  margin-left: 32px;
  margin-top: 215px;
  position: absolute;
}

.fretboard {
  background-color: #3A3134;
  width: 22px;
  height: 115px;
  margin-top: 38px;
  margin-left: 32px;
  position: absolute;
}

.fret {
  width: 22px;
  height: 1px;
  background-color: #CDBEB9;
  position: absolute; 
  z-index: 99; 
}

.two {
  margin-top: 111px;
}

.three {
  margin-top: 107px;
}

.four {
  margin-top: 103px;
}

.five {
  margin-top: 98px;
}

.six {
  margin-top: 93px;
}

.seven {
  margin-top: 87px;
}

.eight {
  margin-top: 81px;
}

.nine {
  margin-top: 74px;
}

.ten {
  margin-top: 67px;
}

.eleven {
  margin-top: 60px;
}

.twelve {
  margin-top: 52px;
}

.thirteen {
  margin-top: 44px;
}

.fourteen {
  margin-top: 36px;
}

.fifteen {
  margin-top: 28px;
}

.sixteen {
  margin-top: 20px;
}

.seventeen {
  margin-top: 12px;
}

.eighteen {
  margin-top: 3px;
  height: 2px;
}

.headstock {
  background-color: #2A110C;
  width: 24px;
  height: 35px;
  border-radius: 5px 5px 0 0;
  margin-top: 5px;
  margin-left: 31px;
  position: absolute;
}

.dec {
  position: absolute;
  background-color: #2A110C;
  margin-top: 1px;
  margin-left: 33px;
  width: 19px;
  height: 6px;
  border-radius: 90px 90px 0 0;
}

.hole {
  background-color: #bdc3c7;
  height: 20px;
  width: 7px;
  margin-top: 15px;
  margin-left: 34px;
  position: absolute;
  border-radius: 100px;
}

.holeone {
  background-color: #bdc3c7;
  height: 20px;
  width: 7px;
  margin-top: 15px;
  margin-left: 45px;
  position: absolute;
  border-radius: 100px;
}

.tune {
  background-color: #D9C7C3;
  width: 7px;
  height: 2px;
} 

.s {
  background-color: #827775;
  margin-top: 15px;
}

.f {
  background-color: #827775;
  margin-top: -8px;
}

.fo {
  background-color: #827775;
  margin-top: -8px;
}

.t {
  background-color: #827775;
  margin-top: 15px;
}

.tw {
  background-color: #827775;
  margin-top: -8px;
}

.o {
  background-color: #827775;
  margin-top: -8px;
}

.tuner {
  background-color: #8F6B00;
  height: 5px;
  width: 2px;
  z-index: -100;
  position: absolute;
}

.tl {
  margin-top: 10px;
  margin-left: -1px;
  transform: rotate(30deg);
}

.ml {
  margin-top: 18px;
  margin-left: -1px;
  transform: rotate(-30deg);
}

.bl {
  margin-top: 23px;
  margin-left: -1px;
  transform: rotate(70deg);
}

.tr {
  margin-left: 23px;
  margin-top: 10px;
  transform: rotate(60deg);
}

.mr {
  margin-left: 23px;
  margin-top: 17px;
  transform: rotate(-90deg);
  
}

.br {
  margin-left: 23px;
  margin-top: 23px;
  transform: rotate(150deg);
}

.e {
  background-color: #645E60;
  width: 1px;
  height: 185px;
  margin-top: 32px;
  margin-left: 34px;
  position: absolute;
  z-index: 101;
}

.a {
  background-color: #645E60;
  width: 1px;
  height: 191px;
  position: absolute;
  z-index: 101;
  margin-top: 26px;
  margin-left: 38px;
}

.d {
  background-color: #645E60;
  width: 1px;
  height: 176px;
  position: absolute;
  z-index: 101;
  margin-top: 41px;
  margin-left: 41px;
}

.dskew {
  background-color: #645E60;
  width: 1px;
  height: 23px;
  position: absolute;
  z-index: 101;
  transform: rotate(175deg);
  margin-top: 18px;
  margin-left: 40px;
}

.g {
  background-color: #645E60;
  width: 1px;
  height: 197px;
  position: absolute;
  z-index: 101;
  margin-top: 20px;
  margin-left: 45px;
}

.b {
  background-color: #645E60;
  width: 1px;
  height: 191px;
  position: absolute;
  margin-top: 26px;
  margin-left: 49px;
  z-index: 101;
}

.highe {
  background-color: #645E60;
  width: 1px;
  height: 176px;
  position: absolute;
  margin-top: 41px;
  margin-left: 52px;
  z-index: 101;
}

.higheskew {
  width: 1px;
  height: 11px;
  background-color: #645E60;
  z-index: 101;
  position: absolute;
  transform: rotate(175deg);
  margin-top: 30px;
  margin-left: 51px;
}
 
p {
  color: #323232;
  font-family: Montserrat;
  font-size: 25px;
}

.rounder {
  position: absolute; 
  width: 81px; 
  height: 25px; 
  background-color: #B97012;
  margin-top: 175px; 
  margin-left: 2px; 
  border-radius: 90px;
}

.checkitout {
  width: 145px; 
  height: 105px; 
  background-color: lightgray; 
  top: 0px; 
  right: 0px; 
  position: fixed; 
  line-height: 22px; 
  font-size: 20px; 
  padding: 10px; 
  border-bottom-left-radius: 10px; 
  font-family: Montserrat; 
  color: #151B1F; 
}

a {
  text-decoration: none;
  color: red; 
}

a:active {
  text-decoration: underline;
}