body {
  background-color: black;
  font-family: "Verdana", Geneva, sans-serif;
  margin: 0;

}

.main {
  width: 100%;
  height: 100vh;
  background-image: url('black-brick.jpg');
  background-size: cover;
  /*opacity: .3;*/
  position: relative;
  /*z-index: -1;*/


}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  width: 100%;

  }

.blue {
  color: blue;
}

.icon {
  width: 75px;
  height: 75px;
  margin: 0px 0px 70px 0px;
}

input {
  margin:5px;
  width: 300px;
  font-size: 30px;
  z-index: 1;
  border-radius: 5px;
  box-shadow: inset;
  border-color: #00ffd8;
  color: darkgrey;
  background-color: white;
  opacity: .9;
  text-align: center;

}

button {
  margin:5px;
  min-width: 300px;
  font-size: 30px;
  z-index: 1;
  border-radius: 5px;
  box-shadow: inset;
  border-color: #00ffd8;
  color: #00ffd8;
  background-color: transparent;
  text-align: center;
  cursor: pointer;

}

button:hover{
  box-shadow: outset;
  color: white;
}


.search-bar {
  width: 100%;
  height: 90px;
  position: relative;
}

.search-color {
  width: 100%;
  height: 90px;
  background-color: white;
  opacity: .2;
  position: absolute;

}

.search-results {
  width: 100%;
  /*background-color: #00ffd8;*/
}

.search {
  float: left;
  background-color: #00ffd8;
  margin: 3px;
  border-style: ridge;
  width: 300px;
  height: 360px;
  text-align: center;
  color: white;
  float: right;
}

h1{
  color: #00ffd8;
}

.tracks {
  color: #00ffd8;
}

.row {
  width: 60%;
  /*background-color: blue;*/
  float: left;
  margin: 0px 0px 0px 200px;
  /*border-style: dotted;*/
  border-bottom: thin solid #ffffff;

}

.white{
  color: #ffffff;
  margin: 0px;
  /*z-index: 10;*/
  /*opacity: .5;*/
}

.track {
  width: 55%;
  float: left;
  /*background-color: red;*/
  padding: 2px;
}

.artist {
  width: 35%;
  float: left;
  /*margin: 0px 10px;*/
  /*background-color: green;*/
  padding: 5px;
}

.corner {
  color: white;
  float: right;
  font-style: underline;
  z-index: 15;
  margin: 0px;
  cursor: pointer;
}

.corner:hover {
  color: darkgrey;
}

.corner-fix {
  width: 400px;
  height: 90px;
  padding: 5px;
  background-color: #00ffd8;
  border-color: white;
  border-radius: 5px;
  position: absolute;
  top: 0px;
  right: -500px;
  transition: 1s;
}

.slideIn {
  right: 0px;
}

.corner-input {
  font-size: 20px;
  color: darkgrey;
  /*background-color: red;*/
}

.corner-button {
  font-size: 20px;
  color: white;
  background-color: darkgrey;
  min-width: 50px;
}

@media (max-width: 750px) {

  .row {
    margin: 0px 0px 0px 50px;
  }

  input {

    font-size: 20px;

  }

  button {
    min-width: 50px;
    font-size: 20px;
  }

  .row {
    width: 80%;
  }

}

@media (max-width: 550px) {


  .main {
    display: flex;
    flex-direction: column;
  }

  .playlist-upper {
float: none;

  }

  input {

    width: 80%;

  }

  button {
    min-width: 80%;

  }

  .search-results{

  }

}