.title {
  margin-top: 150px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title h1 {
  color: #ffffff;
}

/* content */

    content {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }



    .img-area{
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        	
    }

    .img-area h1 {
      color: white;
      padding-bottom: 2rem;
    }
    
    .container {
      position: relative;
      width: 50%;
      max-width: 500px;
      min-width: 350px;
    }

    .player {
      width: 500px;
    }

    .container p {
        font-family: 'Poppins', sans-serif;
        font-weight: 900;
        text-transform: uppercase;
    }

    .container img {
      width: 500px;
    }
    
    .image {
      display: block;
      width: 100%;
      height: auto;
      padding: 5px;
    }
    
    #links li {
      display: inline-block;
      align-items: center;
      margin-top: 2rem;
    }

    #links li a {
      font-size: 2rem;
      color: white;
      padding: 1rem;
      text-align: center;
    }


        /* streamingnav */

        .streaminglinks {

          /* border: 2px solid #ffffff; */
          border-radius: 2rem;
          max-width: 400px;
          font-size: 3rem;
          line-height: 5rem;
          text-align: center;
          width: 500px;
    
      }

      .grid-container {
        display: grid;
        grid-template-columns: auto auto;
      }
      .grid-item {
       height: 70px;
       display: block;
       background-color: #ffffff;
      }

      .grid-item a{
        color: black;
      }

      .grid-item a:hover {
        color: #ffffff;
      }
      h2{
        background-color: rgb(39, 67, 39);
        font-weight: 500;
        color: #ffffff;
        border-radius: 2rem 2rem 0 0;
        font-size: 2rem;
    }

    h2.tidal {
      background-color: black;
      color: #ffffff;
      border-radius: 0;
    }

    h2.tidal:hover, h2.tidal:focus {
      background-color: rgb(159, 159, 159);
    }

    h2.Soundcloud {
      background-color: rgb(153, 118, 47) ;
      color: #ffffff;
      border-radius: 0;
    }
    h2.Soundcloud:hover, h2.Soundcloud:focus {
      background-color: rgb(218, 157, 60) ;
    }

    

    h2:hover, h2:focus{
      background-color: rgb(47, 153, 47);
    }

    #one {
      color: rgb(255, 255, 255);
      background-color: rgb(106, 106, 106);
    }

    #one a:hover {
      color: gray;
    }

    #one:hover, #one:focus{
      background-color: whitesmoke;
      color: black;
    }


    #two {
      background-color: rgb(67, 39, 39);;
    }

    #two:hover, #two:focus{
      background-color: rgb(252, 68, 68);
      color: #ffffff;
    }

    #three {
        color: rgb(255, 255, 255);
        background-color: rgb(67, 39, 61);
    }

    #three:hover, #three:focus {
      background-color: rgb(188, 78, 236);
    }

    #four {
      background-color: rgb(39, 54, 67);
    }

    #four:hover, #four:focus {
      background-color: rgb(47, 81, 153);
    }

    #five {
      background-color: rgb(67, 54, 39);
    }

    #five:hover, #five:focus {
      background-color: rgb(236, 152, 78);
    }

    #six {
      background-color: rgb(47, 39, 67);
    }
    #six:hover, #six:focus {
      background-color: rgb(160, 78, 236);
    }
    
    #seven {
      background-color: rgb(188, 188, 188);
      border-radius: 0 0 0 2rem;
    }
    
    #seven:hover, #seven:focus {
      background-color: #ffffff;
    }
    
    #seven a:hover {
      color: blueviolet;
    }

    #eight {
      background-color: rgb(39, 61, 67);
      border-radius: 0 0 2rem 0;
    }
    #eight:hover, #eight:focus {
      background-color: rgb(78, 141, 236);
    }

    @media (max-width:900px) {
      content{
        flex-direction: column;
      }

      .title{
        width: 90%;
      }

      img.image {
        width: 350px;
      }
      .player {
        width: 100%;
      }

      .streaminglinks {
        width: 350px;
      }
    }

    @media (max-width: 550px){
        
      .title{
        width: 90%;
      }  
      
      img.image{
            width: 350px;
        }
        
        .image {
            padding-top: 10px;
        }

        
    
    }