/* BASICS */

  body {
  background-color:yellow;
  align-content: center;
  justify-content: center;
  height:800px;
  background-color:yellow;
  }


  h1 {
  font-family: 'Righteous', cursive;
  font-size:50px;
  margin-top:100px;
  text-align: center;
  padding-bottom:30px;

  }

  h2 {
  font-family: 'Righteous', cursive;
  font-size:20px;
  text-align: center;


  }

  a {
  cursor:auto;
  color:black;
  text-decoration: none;
  }

  .logo img {
  position:absolute;
  left:20px;
  top:20px;
  width:50px;
  height:50px;
  cursor:pointer;
  }

  .wordmark {
  position:absolute;
  left:90px;
  top:30px;
  font-family: 'Righteous', cursive;
  font-size:30px;
  cursor:pointer;
  }




  /* INDEX */



  .listen {
  position:relative;
  top:200px;
  left:340px;
  font-family: 'Righteous', cursive;
  font-size:25px;
  cursor:pointer;
  }

  .about {
  position:relative;
  top:300px;
  width:100%;
  font-family: 'Righteous', cursive;
  font-size:25px;
  cursor:pointer;
  text-align: center;
  }

  .parts {
  position:relative;
  top:175px;
  left:-6%;
  font-family: 'Righteous', cursive;
  font-size:25px;
  cursor:pointer;
  }

  .listen:hover, .about:hover,.parts:hover {
  color:red;
  cursor:pointer;
  }

  .listen:active, .about:active,.parts:active {
  color:#cc0000;
  cursor:pointer;
  }

  .knob_container {
  transform-origin: 50% ;
  width:250px;
  margin:auto;
  padding:10px;

  }

  .nav {
  width:400px;
  height:400px;
  margin:auto;
  }



  .red {
  background-color:red;
  width: 100%;
  height: 300px;
  position: sticky;
  top: 20px;
  left: 50px;
  z-index:100;
  }


  .history.show {
  opacity:1;

  }

  .history {
  text-align:center;
  font-size:80%;
  color:black;
  font-family: 'Rokkitt', serif;
  line-height: 30px;
  margin-left:80px;
  margin-right:80px;
  margin-top:20px;
  }

  .space {
  width:100%;
  height:300px;
  }

  section {
  width: 100%;
  height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin:0;
  background-color:red;
  position: sticky;

  }

  .outer img {
  width:100%;
  height:auto;
  margin:auto;
  top:0;
  }

  .inner {
  position: relative;
  font-family: 'Righteous', cursive;
  font-size:10vh;
  color:white;

  }
  .outer {
  border-bottom: solid black 5px;
  }







  /* LISTEN */





  .fourgrid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 10px;
  margin:auto;
  }

  .cover1, .cover2, .cover3, .cover4 {
  display:block;
  width:250px;
  height:250px;
  background-color:black;
  cursor: pointer;
  z-index: 33;
  }

  .recorddisk {
  position:absolute;
  height:250px;
  width:250px;
  z-index: -11;
  display: block;
  transition: all .25s ease-out;
  background-color:black;
  border-radius: 50%;
  }

  div.album:hover .recorddisk {
  transform:  translateX(60px);
  }

  .record-player {
  height: 350px;
  width: 450px;
  background: blue;
  position: relative;
  margin: auto;
  z-index: 0;
  border-radius: 10px;
  margin-top:50px;
  margin-bottom:30px;
  }

  .record-player .arm-assembly {
  position: absolute;
  z-index: 200;
  height: 75%;
  top: 40px;
  left: 160px;
  }

  .record-player .arm-assembly .center {
  width: 40px;
  height: 40px;
  background: #00ff00;
  position: absolute;
  left: -75px;
  top: 8px;
  z-index: 199;
  border-radius: 50%;
  }

  .record-player .arm {
  position: absolute;
  z-index: 200;
  height: 100%;
  left: 25px;
  transform: rotate(-45deg);
  }

  .record-player .arm div {
  background: #ff00ff;
  width: 6px;
  position: absolute;
  }

  .record-player .arm .long {
  height: 60%;
  transform: rotate(10deg);
  border-radius: 35% 35% 0 10%;
  }

  .record-player .arm .cartridge {
  height: 30px;
  width:20px;
  transform: rotate(-20deg);
  background-color:black;
  top:200px;

  }

  .record-player .arm .short {
  height: 35%;
  top: 58%;
  left: 2px;
  transform: rotate(-20deg);
  border-radius: 0 10% 40% 40%;
  }

  .record-player .deck {
  position: absolute;
  top: 20px;
  left: 145px;
  height: 275px;
  width: 275px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(247, 147, 30), 1px 1px 5px 2px rgba(0, 0, 0, 0.9), -1px -1px 5px 2px rgba(0, 0, 0, 0.9);
  }

  .record-player .deck .needle {
  height: 2.5%;
  width: 2.5%;
  border-radius: 50%;
  position: absolute;
  top: 49.2%;
  left: 49.2%;
  background: #e1e1e1;
  z-index: 105; 
  }

  .record {
  background: white;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: relative;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  animation: spin-art 3000ms linear infinite;
  animation-play-state: paused;
  }

  .recordplay {
  background: white;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: relative;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  animation: spin-art 3000ms linear infinite;
  }

  .record.off, .record.off .grooves div {
  animation: none;
  transform: translate(-50%, -50%) rotate(80deg);
  }

  .record .label {
  background: #00a99d;
  height: 24%;
  width: 24%;
  position: absolute;
  z-index: 200;
  top: 38%;
  left: 38%;
  border-radius: 50%;

  }

  .record .label .hole {
  background: black;
  height: 13%;
  width: 13%;
  position: absolute;
  top: 45%;
  left: 45%;
  border-radius: 50%;
  }

  .grooves img {
  position: absolute;
  z-index: 150;
  left: 50%;
  top: 50%;
  height: 0.5%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  width: 0.5%;
  width:250px;
  height:250px;
  }


  .record .grooves div {
  animation: spin 10000ms linear infinite;
  border: 0px solid transparent;
  border-radius: 50%;
  height: 140%;
  width: 140%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  animation-play-state: paused;
  }

  .recordplay .grooves div {
  animation: spin 10000ms linear infinite;
  border: 0px solid transparent;
  border-top: 3px solid black;
  border-radius: 50%;
  height: 140%;
  width: 140%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  }

  @keyframes spin {
  0% {transform: translate(-50%, -50%) rotate(80deg);}
  100% {transform: translate(-50%, -50%) rotate(192deg);}
  }

  @keyframes spin-art {
  0% {transform: translate(-50%, -50%) rotate(0deg);}
  100% {transform: translate(-50%, -50%) rotate(360deg);}
  }

  section .controls{
  width:150px;
  height:70px;
  position:absolute;
  top:250px;
  left:-40px;
  z-index:400;
  background:none;
  }

  .on {
  position:relative;
  background-color:#71ccd8;
  border:2px solid black;
  border-radius:50%;
  width:50px;
  height:50px;
  text-align: center;
  top:5px;
  left:20px;
  cursor: pointer;
  }

  .on img {
  height:30px;
  width:30px;
  }


  .on:focus {
  outline:none;
  }

  .on:active {
  background-color:purple;
  }

  .light {
  position: relative;
  background-color:grey;
  border-radius:50%;
  width:10px;
  height:10px;
  border:3px solid black;
  left:70px;
  bottom:25px;
  }

  .clicked {
  background-color:red;
  }

  .play {
  position:relative;
  background-color:red;
  border:2px solid black;
  border-radius:50%;
  width:50px;
  height:50px;
  text-align: center;
  top:5px;
  left:20px;
  cursor: pointer;
  }

  .pause {
  position:relative;
  background-color:red;
  border:2px solid black;
  border-radius:50%;
  width:50px;
  height:50px;
  text-align: center;
  top:5px;
  left:20px;
  cursor: pointer;
  }

  .play, .pause:focus {
  outline:none;
  }

  .wrapper {
  margin:auto;
  width:480px;
  height:300px;
  position:relative;
  }

  .abouttext, .abouttext2, .abouttext3, .abouttext4, .abouttext5, .abouttext6 {
  white-space: nowrap;
  overflow: hidden; 
  font-size: 30px;
  color: red;
  text-align: center;
  margin:auto;
  padding-top:30px;
  font-family: 'Rokkitt', serif;
  padding-top:5px;
  padding-bottom:5px;
  }


  /* ABOUT */


  .abouttext {
  animation: animated-text 4s steps(29,end) 1s 1 normal both,
  animated-cursor 1000ms steps(20,end);
  }

  .abouttext2 {
  animation: animated-text 4s steps(29,end) 3.5s 1 normal both,
  animated-cursor 1000ms steps(29,end) infinite;
  }

  .abouttext3 {
  animation: animated-text 4s steps(29,end) 6s 1 normal both,
  animated-cursor 1000ms steps(29,end) infinite;
  }

  .abouttext4 {
  animation: animated-text 4s steps(29,end) 9s 1 normal both,
  animated-cursor 1000ms steps(29,end) infinite;
  }

  .abouttext5 {
  animation: animated-text 4s steps(29,end) 12s 1 normal both,
  animated-cursor 1000ms steps(29,end) infinite;
  }

  .abouttext6 {
  animation: animated-text 4s steps(29,end) 14s 1 normal both,
  animated-cursor 1000ms steps(29,end) infinite;
  }

  @keyframes animated-text{
  from{width: 0;}
  to{width: 500px;}
  }

  @keyframes animated-cursor{
  from{border-right-color: transparent;}
  to{border-right-color: transparent;}
  }


  /* About Page */

  .listenbtn {
  position:absolute;
  right:-10px;
  width:60px;
  height:60px;
  color:black;
  justify-content:center;
  transform:rotate(180deg);
  margin:auto;

  }

  .partsbtn {
  position:absolute;
  left:-10px;
  width:60px;
  height:60px;
  color:black;
  justify-content:center;
  margin:auto;

  }

  .btnbackground {
  width:100%;
  height:100px;
  background-color:yellow;
  }

  .listenword {
  position:absolute;
  top:23px;
  font-size:18px;
  font-family:helvetica;
  color:black;
  font-weight: bold;
  }

  .partsword {
  position:absolute;
  top:23px;
  left:35px;
  font-size:18px;
  font-family:helvetica;
  color:black;
  font-weight: bold;
  }

  .btnwrapper {
  width:100px;
  height:60px;
  position:absolute;
  right:60px;
  transition: .2s ease-in-out;
  cursor:pointer;

  }

  .btnwrapperparts {
  width:100px;
  height:60px;
  position:absolute;
  left:60px;
  transition: .2s ease-in-out;
  cursor:pointer;
  }

  .btnwrapper:hover, .btnwrapperparts:hover{
  transform: scale(1.2);
  transition:0s; }

  @keyframes fadeIn{
  0% { opacity:0; }
  66% { opacity:0; }
  100% { opacity:1; }
  }




  /*PARTS*/




  .onbtn img {
  height:50px;
  width:50px;
  }

  .onbtn {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  margin: auto;
  background-color:#71ccd8;
  text-align: center;
  display:block;
  padding:0;
  top:0;
  left:0;
  color:black;
  border:3px solid black;


  }

  .onbtn:focus {
  outline:none;
  }

  .icon h2 {
  font-size:30px;
  }

  .icon {
  width:auto;
  position:relative;
  padding:10px;
  }

  .grid1, .grid2, .grid3, .grid4, .grid5, .grid6 {
  display:grid;
  grid-template-columns: 150px 200px;
  column-gap: 5px;
  justify-content:center;
  align-content: center;
  margin-top:20px;
  margin-bottom:20px;
  background-color:red;
  width:500px;
  margin-left:auto;
  margin-right:auto;
  height:200px;

  }

  h2.bioname {
  text-align:left;
  margin-bottom:20px;
  color:white;
  }


  .description {
  margin-top:10px;
  text-align:left;
  color:white;
  font-family: 'Rokkitt', serif;
  line-height:20px;
  }

  div .platter {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin:auto;
  background-color:orange;
  }

  .recordwhite {
  background: white;
  height: 95px;
  width: 95px;
  border-radius: 50%;
  margin:auto;
  }



  .recordwhite .artistlabel {
  background: #00a99d;
  height: 20px;
  width: 20px;
  position: absolute;
  z-index: 200;
  top: 38%;
  left: 38%;
  border-radius: 50%;

  }


  .lines img {
  position: absolute;
  z-index: 150;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  width:80px;
  height:80px;
  }

  .redcircle {
  height:70px;
  width:70px;
  background-color:#00a99d;
  border-radius: 50%;
  margin:auto;
  }

  .greencircle {
  height:40px;
  width:40px;
  background-color:#00ff00;
  border-radius: 50%;
  margin:auto;
  }

  .stylis img {
  height:100px;
  width:auto;
  margin-left:20%;
  position: absolute;
  }

  .recordarm img {
  height:120px;
  width:auto;
  margin-left:10%;
  position: absolute;
  transform: rotate(-100deg);
  transform-origin: 50% 50%;
  }

  #yellowhover:hover {
  background-color:yellow;
  box-shadow: 0 0 25px orange, 0 0 20px purple;

  }



  @media only screen and (max-width:768px) {

  .fourgrid {
  display:grid;
  grid-template-columns: 1fr;
  column-gap: 10px;
  grid-row-gap: 10px;
  margin:auto;
  margin-left:120px;
  }


  }

  @media only screen and (max-width:1224px) {

  }