body
{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5A5A5A;
}


/* PleaseRotate prompting */

/* background set to black */
#pleaserotate-graphic
{
  fill: black;
}

/* phone gif set to white */
#pleaserotate-graphic-path
{
  fill: white;
}

#pleaserotate-backdrop
{
  color: #fff;
  background-color: #000;
}

/* the rest */
.heading
{
  font-weight: bold;
  color: whitesmoke;
}
.wrapper
{
  background-color: #333;
  border-radius: 20px;
  box-shadow: 0 0 200px;
  
  width: 80vw;
  height: 85vh;

  padding: 3rem;

  align-items: center;
  justify-content: center;
}

.heading
{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: whitesmoke;
}

.footer
{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: whitesmoke;

  padding-top: 70px;
}

/* icons (linkedin, github) */
.footer a
{
  margin-left: 0.5vw;
  color: whitesmoke;
  text-align: center;
}
.list-social-icons a
{
  color: #495057;
}
  .list-social-icons a:hover
  {
    color: #393646;
  }


/*key text*/
.keys
{
  display: flex;
  text-transform: capitalize;
  color: darkgrey;
  font-weight: 300;

  justify-content: center;
  margin: 2rem auto;
}

/*white keys*/
.keys .white
{
  width: 8.5vw;
  height: 45vh;
  background: white;
  border-radius: 5px;
  border: 1px solid black;
}
/*black keys*/
.keys .black
{
  width: 5.4vw;
  height: 29.5vh;
  margin: 0 -1.5rem;
  background: linear-gradient( black 97%, #333 3%);
  border-radius: 7px;

  z-index: 2;
}

/*key letter text*/
.white span
{
  position: absolute;
  margin-top: 37vh;
  margin-left: 3.5vw;
  text-align: center;
}
.black span
{
  position: absolute;
  margin-top: 20vh;
  margin-left: 1.1rem;
}









/*keys when clicked or keypressed*/
.keys .white.active
{
  background: skyblue;
}
.keys .black.active
{
  background: skyblue;
}



/*label*/
.heading h1
{
  margin-left: 5rem;
}


/*switch area*/
.switch
{
  position: relative;
  display: inline-block;
  width: 6rem;
  height: 3rem;
  margin: 0 3px;
}

/*place switch into area, half as much*/
.slider
{
  position: absolute;
  cursor: pointer;
  width: 3rem;
  height: 1.5rem;
  margin-top: 0.9rem;
  background-color: #cdcdcd;
  border-radius: 30px;

  transition: 0.5s;
}


/*so we can hide checkbox*/
.switch input
{
  display: none;
}

/*ball for the slider (including its color, dimensions, and position*/
.slider:before
{
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;

  margin-top: 0.25rem;
  margin-left: 0.25rem;

  border-radius: 50px;
  background-color: whitesmoke;

  transition: 0.5s;

}

/*
  transition for when the toggle is clicked on/off
  use type= because in index.html, <input type="checkbox" checked>
*/
input[type=checkbox]:checked + .slider
{
  background-color:#777;
}

input[type=checkbox]:checked + .slider:before
{
  transform: translateX(1.5rem);
}


@media (min-width: 576px) and (max-width: 767px) {
  .footer
  {
    padding-top: 7vh;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .footer
  {
    padding-top: 8vh;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  /* Styles for screens between 992px and 1199px */
  .keys .white
  {
    width: 4.5rem;
    height: 20rem;
  }

  .keys .black
  {
    width: 3rem;
    height: 12.75rem;
    margin: 0 -1.5rem;
  }

  .white span
  {
    position: absolute;
    margin-top: 18rem;
    margin-left: 2rem;
    text-align: center;
  }
  .black span
  {
    position: absolute;
    margin-top: 11rem;
    margin-left: 1rem;
  }
  .footer
  {
    padding-top: 15vh;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  /* Styles for screens between 1200px and 1399px */
  .keys .white
  {
    width: 5.5rem;
    height: 27rem;
  }

  .keys .black
  {
    width: 3.5rem;
    height: 17.5rem;
    margin: 0 -1.75rem;
  }

  .white span
  {
    position: absolute;
    margin-top: 24rem;
    margin-left: 2rem;
    text-align: center;

    font-size: 25px;
  }
  .black span
  {
    position: absolute;
    margin-top: 15rem;
    margin-left: 1rem;

    font-size: 25px;
  }
  .footer
  {
    padding-top: 20vh;
  }
}

@media (min-width: 1400px) {
  /* Styles for screens larger than 1400px */
  .keys .white
  {
    width: 8rem;
    height: 25rem;
  }

  .keys .black
  {
    width: 5rem;
    height: 16.5rem;
    margin: 0 -2.5rem;
  }

  .white span
  {
    position: absolute;
    margin-top: 22rem;
    margin-left: 3rem;
    text-align: center;

    font-size: 25px;
  }
  .black span
  {
    position: absolute;
    margin-top: 14rem;
    margin-left: 2rem;

    font-size: 20px;
  }
  .footer
  {
    padding-top: 10vh;
  }
}