/* the 100vh and 100vw set the size of the body to fill the viewport (screen) */
body {
  height: 100vh;
  width: 100vw;
  display: block;
  margin: 0;
}

img {
  max-height: 100%;
  max-width: 100%;
}
.center-content {
  justify-content: center;
  align-items: center;
  display: flex;
}
.centertext {
  align-items: center;
  display: flex;
}
.toprow {
  height: 30%;
  width: 100%;
  display: flex;
}
.toplinfo {
  height: 100%;
  width: 20%;
  position: relative;
  border: solid black 1px;
}
.topmimage {
  height: 100%;
  width: 60%;
  border: solid black 1px;
}
.toprimage {
  height: 100%;
  width: 20%;
  border: solid black 1px;
}
.bottomrow {
  height: 70%;
  width: 100%;
}
.album {
  width: 100%;
  height: 25%;
  display: flex;
}

.acoverbig {
  height: 100%;
  width: 20%;
  border: solid black 1px;
}
.ainfo {
  height: 100%;
  width: 80%;
  position: relative;

  border: solid black 1px;
}
.song {
  width: 100%;
  height: 10%;
  display: flex;
  border: solid black 1px;
}
.acoversmall {
  height: 100%;
  width: 15%;
  border: solid black 1px;
}
.songinfo {
  height: 100%;
  width: 85%;
  position: relative;
  border: solid black 1px;
}
.whiteborder {
  border: solid white 1px;
}
.tcdborder {
  border: solid rgb(245, 107, 107) 1px;
  filter: drop-shadow(0px 0px 5px);
}
.lrborder {
  border: solid rgb(121, 80, 65) 1px;
  filter: drop-shadow(0px 0px 5px);
}
.gradborder {
  border: solid rgb(187, 85, 255) 1px;
  filter: drop-shadow(0px 0px 5px);
}
.eoeborder {
  border: solid rgb(223, 231, 233) 1px;
  filter: drop-shadow(0px 0px 5px);
}
.mbdtfborder {
  border: solid rgb(253, 74, 101) 1px;
  filter: drop-shadow(0px 0px 5px);
}
.wttborder {
  border: solid rgb(230, 193, 142) 1px;
  filter: drop-shadow(0px 0px 5px);
}
.yeeborder {
  border: solid rgb(245, 252, 236) 1px;
  filter: drop-shadow(0px 0px 5px);
}

.tlopborder {
  border: solid rgb(245, 157, 114) 1px;
  filter: drop-shadow(0px 0px 5px);
}
.yeborder {
  border: solid rgb(83, 106, 141) 1px;
  filter: drop-shadow(0px 0px 5px);
}
.jikborder {
  border: solid rgb(68, 104, 223) 1px;
  filter: drop-shadow(0px 0px 5px);
}
.dondaborder {
  border: solid rgb(66, 66, 66) 1px;
  filter: drop-shadow(0px 0px 5px);
}
.dondaaltborder {
  border: solid #343f90ff 1px;
  filter: drop-shadow(0px 0px 5px);
}
.HTCDborder {
  border: solid #362022ff 1px;
  filter: drop-shadow(0px 0px 5px);
}
.SWABFborder {
  border: solid #424343ff 1px;
  filter: drop-shadow(0px 0px 5px);
}
.imageborder {
  border: solid rgb(0, 0, 0) 1px;
  filter: drop-shadow(0px 0px 5px);
}
.divborder {
  border: solid rgb(0, 0, 0) 1px;
}
.clickable {
}
.clickable:hover {
  cursor: pointer;
}
.clickable:active {
  filter: drop-shadow(0px 0px 3px);
  transform: scale(0.98);
}
.hidden {
  display: none;
}
.down {
  transform: translate(0px);
  transition: transform 2s ease;
}
.up {
  transform: translate(0px, -100%);
  transition: transform 2s ease;
}
.otherorange {
  background-color: fe6300;
}
.otherblue {
  background-color: #2256a6;
}
.grey {
  background-color: rgb(229, 233, 216);
}
.red {
  background-color: rgb(245, 107, 107);
}
.blue {
  background-color: rgb(142, 242, 255);
}
.black {
  background-color: rgb(0, 0, 0);
}
.yellow {
  background-color: rgb(255, 212, 119);
}
.orange {
  background-color: rgb(255, 161, 107);
}
.green {
  background-color: rgb(223, 255, 116);
}
.purple {
  background-color: rgb(187, 85, 255);
}
.cyan {
  background-color: rgb(14, 255, 183);
}
.brown {
  background-color: rgb(121, 80, 65);
}
.pink {
  background-color: rgb(223, 94, 205);
}
.white {
  background-color: rgb(255, 255, 255);
}
.tcdbrown {
  background-color: rgb(111, 15, 18);
}
.lrbrown {
  background-color: rgb(104, 56, 38);
}
.gradpurple {
  background-color: rgb(133, 50, 132);
}
.eoeswhite {
  background-color: rgb(195, 210, 214);
}
.MBDTFred {
  background-color: rgb(235, 32, 61);
}
.wttgold {
  background-color: rgb(190, 152, 97);
}
.yeewhite {
  background-color: rgb(229, 238, 216);
}
.tloporange {
  background-color: rgb(245, 139, 87);
}
.yeblue {
  background-color: rgb(38, 58, 89);
}
.jikblue {
  background-color: rgb(12, 54, 193);
}
.dondablack {
  background-color: rgb(0, 0, 0);
}
.eoelight {
  background-color: rgb(223, 231, 233);
}
.MBDTFlight {
  background-color: rgb(253, 74, 101);
}
.wttlight {
  background-color: rgb(230, 193, 142);
}
.yeelight {
  background-color: rgb(245, 252, 236);
}
.tloplight {
  background-color: rgb(245, 157, 114);
}
.yelight {
  background-color: rgb(83, 106, 141);
}
.jiklight {
  background-color: rgb(68, 104, 223);
}
.dondalight {
  background-color: rgb(66, 66, 66);
}
.grammyblue {
  background-color: #3596d2;
}
.kandbwhite {
  background-color: #e8e6efff;
}
.hdondablack {
  background-color: #121619ff;
}
.nsmabrown {
  background-color: #946517ff;
}
.hmbrown {
  background-color: #463525ff;
}
.hdondablue {
  background-color: #07178dff;
}
.lighthdondablue {
  background-color: #343f90ff;
}
.hTCDbrown {
  background-color: #400f14ff;
}
.lighthTCDbrown {
  background-color: #362022ff;
}
.SDWABFblue {
  background-color: #24313aff;
}
.lightSDWABFblue {
  background-color: #424343ff;
}

.p1 {
  font-size: 20px;
}
p2 {
  font-size: 20px;
  text-indent: 10px;
}

p3 {
  font-size: 20px;
  margin-left: auto;
  margin-right: 20px;
}

h1 {
  background-color: #ffffff;
  position: absolute;
  filter: drop-shadow(0px 0px 2px);
}
.hiddenimage {
  display: none;
}
.hrow {
  height: 33.333333333333333333333333%;
  width: 100%;
  display: flex;
}
.hcolumn {
  height: 100%;
  width: 33.333333333333333333333333%;
  display: block;
}
.hsong {
  height: 50%;
  width: 100%;
  display: flex;
  border: solid black 1px;
}

.hscover {
  height: 100%;
  width: 25%;
  border: solid black 1px;
}
.hsinfo {
  height: 100%;
  width: 75%;
  border: solid black 1px;
}
.himage {
  height: 100%;
  width: 100%;
}
.slide {
  transform: translate(0, 55px);
  transition: transform 3s ease;
}
.KO {
  background-image: url("images/kanyeopen.png");
}
@media only screen and (max-width: 600px) {
  .toplinfo {
    width: 100%;
  }
  .topmimage {
    display: none;
  }
  .toprimage {
    display: none;
  }
  p1 {
    font-size: 11px;
  }
  p2 {
    font-size: 16px;
  }

  p3 {
    font-size: 16px;
  }
  .hiddenimage {
    display: block;
  }
  h1 {
    filter: drop-shadow(5px 5px 5px);
  }
}