@media only screen and (min-width: 1370px) {
  .navigation {
    background-color: rgb(26, 26, 26);
    width: 18%;
    position: fixed;
    height: 100%;
  }
  .navigation a {
    color: rgb(184, 184, 184);
    text-decoration: none;
  }

  .navigation {
    background-color: rgb(26, 26, 26);
    width: 18%;
    position: fixed;
    height: 80 %;
  }
  .navigation a {
    color: rgb(158, 158, 158);
    text-decoration: none;
  }
  .navigation a:hover,
  .nav_content2 a:hover {
    color: rgb(255, 255, 255);
  }
  .heading {
    font-size: 40px;
    color: white;
    margin-top: -45px;
    margin-left: 70px;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }
  .line {
    border-left: 4px solid black;
    height: 100%;
    position: absolute;
    left: 100%;
    top: 1%;
  }
  .nav_content1 {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    font-size: 15px;
    margin-top: 24px;
    margin-left: 25px;
  }
  .horicontal_line {
    border-top: 2px solid black;
    width: 100%;
  }
  .nav_content2 {
    line-height: 2em;
    margin-top: 30px;
    margin-left: 20px;
    color: rgb(156, 156, 156);
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 14px;
    overflow-y: scroll;
    width: 90%;
    height: 300px;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 10px rgb(129, 129, 129); */
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(177, 177, 177);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #292929;
  }
  .main_body {
    background-image: linear-gradient(
      to bottom,
      #333333,
      #282828,
      #1d1d1d,
      #121212,
      #000000
    );
    margin-left: 18%;
    height: fit-content;
  }
  .upgrade {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    font-size: 18;
    margin-left: 10px;
    color: #1db954;
  }
  .logo {
    margin-left: 6%;
    margin-top: 4%;
  }
  .input {
    color: #292929;
  }
  #home:active {
    background-color: rgba(160, 160, 160, 0.356);
    border-radius: 10px;
    padding: 9px;
  }
  #search_btn:active {
    background-color: rgba(160, 160, 160, 0.356);
    border-radius: 10px;
    padding: 9px;
  }
  #lib_btn {
    background-color: rgba(160, 160, 160, 0.356);
    border-radius: 10px;
    padding: 9px;
  }

  #search {
    background-color: rgba(160, 160, 160, 0.356);
    border-radius: 10px;
    padding: 9px;
  }
  #lib {
    background-color: rgba(160, 160, 160, 0.356);
    border-radius: 10px;
    padding: 9px;
  }
  .home_hed {
    color: white;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    padding-left: 3%;
    padding-top: 3%;
    font-size: 25px;
  }
  .sub_title {
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    padding-left: 3%;
    line-height: 2em;
  }
  .music_1body {
    height: 230px;
    position: absolute;
    background-color: rgb(75, 75, 75);
    width: 190px;
    color: aliceblue;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 250%;
    border-radius: 2%;
    margin: 3% 2% 1% 3%;
  }
  .music1_img {
    padding-top: 7%;
  }
  .music_2body {
    height: 230px;
    position: absolute;
    background-color: rgb(75, 75, 75);
    width: 190px;
    color: aliceblue;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 250%;
    border-radius: 2%;
    margin: 3% 0% 0% 18%;
  }
  .music2_img {
    padding-top: 7%;
  }
  .music_3body {
    height: 230px;
    position: absolute;
    background-color: rgb(75, 75, 75);
    width: 190px;
    color: aliceblue;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 250%;
    border-radius: 2%;
    margin: 3% 0% 0% 33%;
  }
  .music3_img {
    padding-top: 7%;
  }
  .music_4body {
    height: 230px;
    position: absolute;
    background-color: rgb(75, 75, 75);
    width: 190px;
    color: aliceblue;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 250%;
    border-radius: 2%;
    margin: 3% 0% 0% 48%;
  }
  .music4_img {
    padding-top: 7%;
  }
  .music_5body {
    height: 230px;
    position: absolute;
    background-color: rgb(75, 75, 75);
    width: 190px;
    color: aliceblue;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 250%;
    border-radius: 2%;
    margin: 3% 0% 0% 63%;
  }
  .music5_img {
    padding-top: 7%;
  }
  .music_5body:hover,
  .music_4body:hover,
  .music_3body:hover,
  .music_2body:hover,
  .music_1body:hover {
    background-color: rgb(22, 22, 22);
  }
  .prium {
    color: white;
    font-size: 13px;
  }
  .upbutton {
    text-align: right;
    padding-right: 2%;
  }
  .songs_hed {
    color: white;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    margin-right: 4%;
    font-size: 50px;
    margin-left: 3%;
  }
  .songs_playbody {
    height: 130%;
    width: 95%;
    color: white;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    margin-right: 4%;
    margin-left: 2%;
    font-size: 15px;
  }
  .line3 {
    border-top: 1px solid #1db954;
    position: relative;
  }
  .songs_playbody {
    line-height: 3em;
  }
  #playbtn {
    cursor: pointer;
  }
  .songs_play a {
    text-decoration: none;
    color: white;
    cursor: pointer;
  }
  #stopbtn {
    cursor: pointer;
  }
  #stop1,
  #stop2,
  #stop3,
  #stop4,
  #stop5,
  #stop6,
  #stop7,
  #stop8,
  #stop9,
  #stop10,
  #stop11 {
    cursor: pointer;
  }
  #plai1,
  #plai2,
  #plai3,
  #plai4,
  #plai5,
  #plai6,
  #plai7,
  #plai8,
  #plai9,
  #plai10,
  #plai11,
  #plai12 {
    color: rgb(0, 161, 126);
    font-size: 4px;
  }
  .bottom_body {
    height: 75px;
    width: 100%;
    /* background-color: rgb(41, 41, 41); */
    background: linear-gradient(
      0deg,
      #000000,
      #060606,
      #0c0c0c,
      #111111,
      #151515,
      #181818,
      #1c1c1c,
      #1f1f1f,
      #222222,
      #262626,
      #292929,
      #2d2d2d
    );
    position: fixed;
    bottom: 0;
  }
  #bottom_hed {
    color: white;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 15px;
    margin-top: 6px;
    margin-left: 6px;
  }
  #current_song_image {
    margin-left: 150px;
    margin-top: -8px;
    border-radius: 4px;
  }
  .current_name {
    margin-left: 220px;
    margin-top: -4px;
    position: absolute;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5em;
  }
  .search_babkground {
    background: rgb(18, 18, 13);
    background: linear-gradient(
      0deg,
      rgba(18, 18, 13, 1) 0%,
      rgba(255, 253, 208, 1) 100%
    );
    width: 100%;
    position: sticky;
    height: 25%;
  }
  #search_babkground_image {
    height: 200px;
    width: 200px;
    margin-top: 70px;
    padding-bottom: 2%;
  }
}


































@media only screen and (min-width: 0px) and (max-width: 1370px) {
  .navigation a:hover {
    color: rgb(255, 255, 255);
  }
  .navigation {
    background-color: rgb(19, 19, 19);
    width: 16%;
    position: fixed;
    height: 100%;
  }
  .navigation a {
    color: rgb(184, 184, 184);
    text-decoration: none;
  }
  .navigation a:hover,
  .nav_content2 a:hover {
    color: rgb(255, 255, 255);
  }
  .heading {
    font-size: 20px;
    color: white;
    margin-top: -20px;
    margin-left: 35px;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }
  #spot_logo {
    height: 20px;
    width: 20px;
  }
  .nav_content2 a {
    cursor: pointer;
  }
  .line {
    border-left: 4px solid black;
    height: 100%;
    position: absolute;
    left: 100%;
    top: 1%;
  }
  .nav_content1 {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    font-size: 10px;
    margin-top: 19px;
    margin-left: 20px;
  }

  .horicontal_line {
    border-top: 2px solid black;
    width: 100%;
  }
  .nav_content2 {
    line-height: 2em;
    margin-top: 30px;
    margin-left: 20px;
    color: rgb(156, 156, 156);
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 14px;
    overflow-y: scroll;
    width: 90%;
    height: 300px;
  }
  overflow-y: scroll;
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(177, 177, 177);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #292929;
  }
  .navigation a:hover,
  .nav_content2 a:hover {
    color: rgb(255, 255, 255);
  }
  .logo {
    margin-left: 6%;
    margin-top: 4%;
  }

  .main_body {
    background-image: linear-gradient(
      to bottom,
      #333333,
      #282828,
      #1d1d1d,
      #121212,
      #000000
    );
    margin-left: 16.204%;
    width: auto;
    height: fit-content;
  }
  .upgrade {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    font-size: 18;
    margin-left: 10px;
    color: #1db954;
  }
  .logo {
    margin-left: 6%;
    margin-top: 4%;
  }
  .input {
    color: #292929;
  }
  #home:active {
    background-color: rgba(160, 160, 160, 0.356);
    border-radius: 10px;
    padding: 9px;
  }
  #search_btn:active {
    background-color: rgba(160, 160, 160, 0.356);
    border-radius: 10px;
    padding: 9px;
  }
  #lib_btn {
    background-color: rgba(160, 160, 160, 0.356);
    border-radius: 10px;
    padding: 9px;
  }

  #search {
    background-color: rgba(160, 160, 160, 0.356);
    border-radius: 10px;
    padding: 9px;
  }
  #lib {
    background-color: rgba(160, 160, 160, 0.356);
    border-radius: 10px;
    padding: 9px;
  }
  .home_hed {
    color: white;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    padding-left: 3%;
    padding-top: 3%;
    font-size: 25px;
  }
  .sub_title {
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    padding-left: 3%;
    line-height: 2em;
  }
  .music_1body {
    height: 230px;
    position: absolute;
    background-color: rgb(75, 75, 75);
    width: 190px;
    color: aliceblue;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 250%;
    border-radius: 2%;
    margin: 3% 2% 1% 3%;
  }
  .music1_img {
    padding-top: 7%;
  }
  .music_2body {
    height: 230px;
    position: absolute;
    background-color: rgb(75, 75, 75);
    width: 190px;
    color: aliceblue;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 250%;
    border-radius: 2%;
    margin: 3% 0% 0% 18%;
  }
  .music2_img {
    padding-top: 7%;
  }
  .music_3body {
    height: 230px;
    position: absolute;
    background-color: rgb(75, 75, 75);
    width: 190px;
    color: aliceblue;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 250%;
    border-radius: 2%;
    margin: 3% 0% 0% 33%;
  }
  .music3_img {
    padding-top: 7%;
  }
  .music_4body {
    height: 230px;
    position: absolute;
    background-color: rgb(75, 75, 75);
    width: 190px;
    color: aliceblue;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 250%;
    border-radius: 2%;
    margin: 3% 0% 0% 48%;
  }
  .music4_img {
    padding-top: 7%;
  }
  .music_5body {
    height: 230px;
    position: absolute;
    background-color: rgb(75, 75, 75);
    width: 190px;
    color: aliceblue;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 250%;
    border-radius: 2%;
    margin: 3% 0% 0% 63%;
  }
  .music5_img {
    padding-top: 7%;
  }
  .music_5body:hover,
  .music_4body:hover,
  .music_3body:hover,
  .music_2body:hover,
  .music_1body:hover {
    background-color: rgb(22, 22, 22);
  }
  .prium {
    color: white;
    font-size: 13px;
  }
  .upbutton {
    text-align: right;
    padding-right: 2%;
  }
  .songs_hed {
    color: white;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    margin-right: 4%;
    font-size: 50px;
    margin-left: 3%;
  }

  .songs_playbody {
    height: 100%;
    width: 95%;
    color: rgb(255, 255, 255);
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    margin-right: 4%;
    margin-left: 2%;
    font-size: 10px;
  }
  .line3 {
    border-top: 1px solid #1db954;
    position: relative;
  }
  .songs_playbody {
    line-height: 3em;
  }
  #playbtn {
    cursor: pointer;
  }
  .songs_play a {
    text-decoration: none;
    color: white;
    cursor: pointer;
  }
  #stopbtn {
    cursor: pointer;
  }
  #stop1,
  #stop2,
  #stop3,
  #stop4,
  #stop5,
  #stop6,
  #stop7,
  #stop8,
  #stop9,
  #stop10,
  #stop11 {
    cursor: pointer;
  }
  #plai1,
  #plai2,
  #plai3,
  #plai4,
  #plai5,
  #plai6,
  #plai7,
  #plai8,
  #plai9,
  #plai10,
  #plai11,
  #plai12 {
    color: rgb(0, 161, 126);
    font-size: 4px;
  }
  .bottom_body {
    height: 50px;
    width: 100%;
    background: linear-gradient(
      0deg,
      #000000,
      #060606,
      #0c0c0c,
      #111111,
      #151515,
      #181818,
      #1c1c1c,
      #1f1f1f,
      #222222,
      #262626,
      #292929,
      #2d2d2d
    );
    position: fixed;
    bottom: 0;
  }
  #bottom_hed {
    color: white;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 10px;
    margin-top: 6px;
    margin-left: 6px;
  }
  #current_song_image {
    margin-left: 150px;
    margin-top: -8px;
    border-radius: 4px;
    height: 29px;
    width: 29px;
  }
  .current_name {
    margin-left: 220px;
    margin-top: -4px;
    position: absolute;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 1.5em;
  }
  .search_babkground {
    background: rgb(18, 18, 13);
    background: linear-gradient(
      0deg,
      rgba(18, 18, 13, 1) 0%,
      rgba(255, 253, 208, 1) 100%
    );
    width: 100%;
    position: sticky;
    height: 25%;
  }
  #search_babkground_image {
    height: 200px;
    width: 200px;
    margin-top: 70px;
    padding-bottom: 2%;
  }
}