* {
  margin: 0;
  padding: 0;
}
html {
  background-color: #ff88ba;
}
@font-face {
  font-family:"std";
  src:url("https://use.typekit.net/af/1ba16c/00000000000000007735bb5a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/1ba16c/00000000000000007735bb5a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/1ba16c/00000000000000007735bb5a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
  font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}
@font-face {
  font-family:"medium";
  src:url("https://use.typekit.net/af/153042/00000000000000007735bb62/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/153042/00000000000000007735bb62/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/153042/00000000000000007735bb62/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
  font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}
@font-face {
  font-family:"bold";
  src:url("https://use.typekit.net/af/384d9b/00000000000000007735bb6a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/384d9b/00000000000000007735bb6a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/384d9b/00000000000000007735bb6a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}
@font-face {
  font-family:"black";
  src:url("https://use.typekit.net/af/c906c2/00000000000000007735bb6e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/c906c2/00000000000000007735bb6e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/c906c2/00000000000000007735bb6e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
  font-display:auto;font-style:normal;font-weight:900;font-stretch:normal;
}
@font-face {
  font-family:"std2";
  src:url("https://use.typekit.net/af/0230dd/00000000000000007735bb33/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/0230dd/00000000000000007735bb33/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/0230dd/00000000000000007735bb33/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
  font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
@font-face {
  font-family:"medium2";
  src:url("https://use.typekit.net/af/160664/00000000000000007735bb32/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/160664/00000000000000007735bb32/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/160664/00000000000000007735bb32/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
  font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}
@font-face {
  font-family:"bold2";
  src:url("https://use.typekit.net/af/305037/00000000000000007735bb39/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/305037/00000000000000007735bb39/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/305037/00000000000000007735bb39/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}
@keyframes spin {
  from {
    transform: translate(-50%) rotate(0deg);
  }
  to {
    transform: translate(-50%) rotate(360deg);
  }
}
@keyframes frame1 {
  0% {color: #fe6767;}10% {color: #fe6767;}20% {color: black;}30% {color: black;}40% {color: black;}50% {color: black;}60% {color: black;}70% {color: black;}80% {color: black;}90% {color: black;}100% {color: black;}
}
@keyframes frame2 {
  0% {color: black;}10% {color: #feb567;}20% {color: #feb567;}30% {color: black;}40% {color: black;}50% {color: black;}60% {color: black;}70% {color: black;}80% {color: black;}90% {color: black;}100% {color: black;}
}
@keyframes frame3 {
  0% {color: black;}10% {color: black;}20% {color: #fef967;}30% {color: #fef967;}40% {color: black;}50% {color: black;}60% {color: black;}70% {color: black;}80% {color: black;}90% {color: black;}100% {color: black;}
}
@keyframes frame4 {
  0% {color: black;}10% {color: black;}20% {color: black;}30% {color: #aafe67;}40% {color: #aafe67;}50% {color: black;}60% {color: black;}70% {color: black;}80% {color: black;}90% {color: black;}100% {color: black;}
}
@keyframes frame5 {
  0% {color: black;}10% {color: black;}20% {color: black;}30% {color: black;}40% {color: #67feb2;}50% {color: #67feb2;}60% {color: black;}70% {color: black;}80% {color: black;}90% {color: black;}100% {color: black;}
}
@keyframes frame6 {
  0% {color: black;}10% {color: black;}20% {color: black;}30% {color: black;}40% {color: black;}50% {color: #67fef5;}60% {color: #67fef5;}70% {color: black;}80% {color: black;}90% {color: black;}100% {color: black;}
}
@keyframes frame7 {
  0% {color: black;}10% {color: black;}20% {color: black;}30% {color: black;}40% {color: black;}50% {color: black;}60% {color: #679cfe;}70% {color: #679cfe;}80% {color: black;}90% {color: black;}100% {color: black;}
}
@keyframes frame8 {
  0% {color: black;}10% {color: black;}20% {color: black;}30% {color: black;}40% {color: black;}50% {color: black;}60% {color: black;}70% {color: #9567fe;}80% {color: #9567fe;}90% {color: black;}100% {color: black;}
}
@keyframes frame9 {
  0% {color: black;}10% {color: black;}20% {color: black;}30% {color: black;}40% {color: black;}50% {color: black;}60% {color: black;}70% {color: black;}80% {color: #ee67fe;}90% {color: #ee67fe;}100% {color: black;}
}
@keyframes frame10 {
  0% {color: black;}10% {color: black;}20% {color: black;}30% {color: black;}40% {color: black;}50% {color: black;}60% {color: black;}70% {color: black;}80% {color: black;}90% {color: #fe67b5;}100% {color: #fe67b5;}
}
@keyframes coverbounce {
  50% {transform: scale(.95,.95) rotate(0deg); box-shadow: 1px 1px rgba(0, 0, 0, 0.9);} 100% {transform: scale(1,1) rotate(1deg); box-shadow: 5px 5px rgba(0, 0, 0, 0.3);}
}
@keyframes mobilecoverbounce {
  50% {transform: scale(.95,.95) rotate(0deg); box-shadow: .1vh .1vh rgba(0, 0, 0, 0.9);} 100% {transform: scale(1,1) rotate(1deg); box-shadow: .5vh .5vh rgba(0, 0, 0, 0.3);}
}
.std {
  font-family: std;
}
.medium {
  font-family: medium;
}
.medium2 {
  font-family: medium2;
}
.bold {
  font-family: bold;
}
.spacing {
  padding-top: 5px;
}
#desktopsite {
  height: 100vh;
}
#mobilesite {
  display: none;
}

/*header*/
#headbg {
  position: relative;
  height: 60px;
  overflow: auto;
  background-color: black;
}
#head {
  height: 40px;
  margin: 5px;
  border-style: solid;
  border-color: white;
  border-width: 5px;
  display: flex;
  font-size: 38px;
  color: white;
}
.title {
  position: relative;
  top: -1px;
  padding-left: 5px;
  color: white;
  text-decoration: none;
}
.divider {
  position: absolute;
  margin-left: calc(25vw - 155px);
}
#headlinks {
  position: absolute;
  right: 5px;
  display: flex;
}
.headlink {
  position: relative;
  top: -1px;
  padding-right: 15px;
}
.headlinkspacer {
  padding-right: 15px;
}
.hoverstate {
  position: absolute;
  opacity: 0;
  color: #ff88ba;
  text-decoration: none;
}
.hoverstate:hover {
  opacity: 1;
}
.hoverstatesolid {
  position: absolute;
  color: #ff88ba;
  z-index: 10;
}

/*body*/
#body {
  height: calc(100% - 80px);
  display: flex;
}
#leftside {
  position: relative;
  height: 100%;
  width: 25vw;
  margin: 5px;
  border-style: solid;
  border-color: black;
  border-width: 5px;
  font-size: 38px;
  color: black;
  background-color: #e1d0d8;
}
#leftsidetext {
  margin-left: 5px;
}
.littlepicture {
  position: absolute;
  width: 11vw;
  bottom: 4vw;
  left: 50%;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.5);
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: linear;
}
#rightside {
  height: 100%;
  width: 75vw;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;
  border-style: solid;
  border-color: black;
  border-width: 5px;
  overflow: scroll;
  background-color: #ffedf5;
}
#latestrelease {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.latestreleasecover {
  width: 500px;
  margin-bottom: 10px;
  transform: rotate(1deg);
  border-style: solid;
  border-color: black;
  border-width: 5px;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.3);
  animation-name: coverbounce;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.dividingline {
  width: 250px;
  margin-top: 5px;
  margin-bottom: 10px;
  border-top: 4px solid black;
}
.latestreleasetitle {
  text-shadow: 2.5px 2.5px rgba(0, 0, 0, 0.3);
  font-size: 35px;
  font-style: italic;
  color: black;
}
.frame1 {
  animation-name: frame1;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.frame2 {
  animation-name: frame2;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.frame3 {
  animation-name: frame3;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.frame4 {
  animation-name: frame4;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.frame5 {
  animation-name: frame5;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.frame6 {
  animation-name: frame6;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.frame7 {
  animation-name: frame7;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.frame8 {
  animation-name: frame8;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.frame9 {
  animation-name: frame9;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}
.frame10 {
  animation-name: frame10;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
}

/*resizing*/
@media only screen and (max-width: 1200px) {
  #desktopsite {
    display: none;
  }
  #mobilesite {
    display: initial;
  }

  /*mobilehead*/
  #mobileheadbg {
    position: relative;
    height: 15vh;
    overflow: auto;
    background-color: black;
  }
  #mobilehead {
    height: 13vh;
    margin: .5vh;
    border-style: solid;
    border-color: white;
    border-width: .5vh;
    color: white;
  }
  #mobileheadtitle {
    padding-left: 1vh;
    font-size: 6vh;
  }
  .mobiletitle {
    color: white;
    text-decoration: none;
  }
  .mobiledivider {
    position: absolute;
    right: 2vh;
  }
  #mobileheadlinks {
    position: absolute;
    bottom: 1vh;
    right: 1.5vh;
    left: 1vh;
    height: 7vh;
    display: flex;
    text-align: center;
  }
  .mobileheadlinkbox {
    position: relative;
    width: 25%;
    margin-top: .5vh;
    margin-bottom: .5vh;
    margin-left: .5vh;
    border-style: solid;
    border-color: white;
    border-width: .5vh;
  }
  .mobileheadlink {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2vh;
    color: white;
  }
  .mobileheadhoverstatesolid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5vh;
    color: #ff88ba;
    z-index: 10;
  }

  /*mobilebody*/
  #centerside {
    position: absolute;
    height: calc(100% - 31.5vh);
    width: calc(100% - 2vh);
    margin: .5vh;
    border-style: solid;
    border-color: black;
    border-width: .5vh;
    background-color: #ffedf5;
    overflow: scroll;
  }
  #mobilelatestrelease {
    margin-top: 1vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .mobilelrtext {
    text-shadow: .25vh .25vh rgba(0, 0, 0, 0.3);
    font-size: 5vh;
  }
  .mobiledividingline {
    width: 25vh;
    margin-bottom: 1vh;
    border-top: .4vh solid black;
  }
  #mobilecoverandtitle {
    width: 40vh;
    margin-top: 1vh;
  }
  .mobilelatestreleasecover {
    width: 39vh;
    margin-bottom: .5vh;
    transform: rotate(1deg);
    border-style: solid;
    border-color: black;
    border-width: .5vh;
    box-shadow: .5vh .5vh rgba(0, 0, 0, 0.3);
    animation-name: mobilecoverbounce;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
  }
  .mobilelatestreleasetitle {
    text-shadow: .25vh .25vh rgba(0, 0, 0, 0.3);
    font-size: 3vh;
    font-style: italic;
    color: black;
  }

  /*mobilebottom*/
  #bottomside {
    position: absolute;
    height: 13vh;
    width: calc(100% - 2vh);
    bottom: 0;
    margin: .5vh;
    border-style: solid;
    border-color: black;
    border-width: .5vh;
    background-color: #e1d0d8;
  }
  #bottomsidelinkboxes {
    height: 12.5vh;
    margin: .25vh;
    text-align: center;
  }
  #bslbrow1 {
    display: flex;
    height: 50%;
  }
  #bslbrow2 {
    display: flex;
    height: 50%;
  }
  .row1 {
    width: 100%;
  }
  .row2 {
    width: 100%;
  }
  .bottomsidelinkbox {
    position: relative;
    margin: .25vh;
    border-style: solid;
    border-color: black;
    border-width: .5vh;
  }
  .bottomsidelink {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2vh;
    color: black;
    text-decoration: none;
  }
  .mobilebottomhoverstatesolid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2vh;
    color: #ff88ba;
    z-index: 10;
  }
  .frame1 {
    animation-name: frame1;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
  }
  .frame2 {
    animation-name: frame2;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
  }
  .frame3 {
    animation-name: frame3;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
  }
  .frame4 {
    animation-name: frame4;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
  }
  .frame5 {
    animation-name: frame5;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
  }
  .frame6 {
    animation-name: frame6;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
  }
  .frame7 {
    animation-name: frame7;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
  }
  .frame8 {
    animation-name: frame8;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
  }
  .frame9 {
    animation-name: frame9;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
  }
  .frame10 {
    animation-name: frame10;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: linear;
  }
}