@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  background-color: #0d0d0d;
  color: #fff;
}

@mixin centerElements{
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin a{
  text-decoration: none;
  color: #cccccc;
  padding: .5em .5em;
  &:hover{
    color: #fff;
  }
}

@mixin ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

@mixin grid{
  margin-bottom: 1em;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 0 1.5em;
}

@mixin div($height, $width, $radius){
  height: $height;
  width: $width;
  border-radius: $radius;
}

@mixin hover{
  &:hover{
    transition: background-color .3s;
    background-color: #262626;
    cursor: pointer;
  }
}

@mixin title{
  display: flex;
  justify-content: space-between;
}

@mixin p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-bar{
  height: 100vh;
  width: 14em;
  position: fixed;
  z-index: 1;
  top: 0;
  background-color: #000;
  
  img{
    height: 3.75em;
    width: 9.3em;
    margin: .5em 0 0 .9em;
  }
  
  .fa-podcast{
    color: green;
  }
  
  .fa-heart{
    color: #ff3333;
  }
  
  // .fa-plus-square{
  //   color: #0275d8;
  // }
  
  nav ul{
    @include ul;
    
    li{
      margin: 1em 0;
      
        a{
          @include a;
          margin-left: 1.2em;
          
          svg{
            margin: 0 1em .3em 0;
          }
          .fa{
            margin-right: 1em;
          }
        }
     }
  }
  
  .user-collection{
    margin-bottom: 6em;
  }
  
  .install-app a{
    @include a;
    width: 2em;
    
    .fa{
      width: 2em;
      margin-left: 1em;
    }
  }
}

.main-content{
  
  header{
    position: fixed;
    @include centerElements;
    justify-content: flex-end;
    top: 0;
    width: 100%;
    height: 4em;
    padding: 1em;
    background-color: #1DB954;
    z-index: 2;
    // transition: visibility 1s ease alternate;
    
    .hamburger{
      visibility: hidden;
      position: absolute;
      left: 2em;
      top: 1.45em;
      cursor: pointer;
      
      div{
        height: 3px;
        width: 25px;
        margin-bottom: .3em;
        background-color: #fff;
      }
    }
    
    button{
      border: none;
      padding: .5em .5em .5em 0;
      border-radius: 1.2em;
      background-color: #000;
      color: #fff;
            
      .fa{
        margin: 0 .5em;
      }
    }
    
    ul{
      @include ul;
      position: fixed;
      right: 0;
      margin: .3em 1.2em 0 0;
      background-color: #262626;
      border-radius: 3%;
      padding: .5em;
      text-align: left;
      
      li{
        
        a{
          @include a;
          display: block;
          padding: .5em 1em;
          
          &:hover{
            background-color: #404040;
            border-radius: 3%;
          }
        }
        
        .fa{
          position: relative;
          margin-left: 2em;
          top: .1em;
        }
      }
    }
  }
  
  main{
    margin-left: 16em;
    margin-top: 4.5em;
    
    .greeting h2{
      font-weight: bold;
      margin-bottom: .6em;
    }
    
    .recent-activity{
      @include grid;
      
      .activity-info{
        @include div(5em, 21em, .3em);
        background-color: #1a1a1a;
        margin-bottom: 1em;
        display: flex;
        align-items: center;
        
        @include hover;
        
        .img-div{
          @include div(100%, 5em, 0);
          @include centerElements;
          margin-right: 1em;
          background-color: #333333;
          
          img{
            @include div(100%, 100%, 0)
          }
        }
        
        p{
          @include p;
          width: 75%;
          margin: 0;
        }
      }
    }
    
    .category{
      .title{
        @include title;
        margin: 0;
        
        .popular-shows{
          display: flex;
          flex-direction: column;
          
          p{
            font-size: .8em;
            margin-bottom: .2em;
          }
          h3{
            font-size: 1em;
            margin-bottom: 0;
          }
        }

        a{
          @include a;
          font-size: .85em;
          margin-right: 2em;
          
          &:hover{
            text-decoration: underline;
          }
        }
      }
      div{
        @include grid;
        grid-template-columns: auto auto auto auto auto;
        overflow-x: auto;
        overflow-y: hidden;
        
        /* Hide scrollbar for Chrome, Safari */
        &::-webkit-scrollbar {
          display: none;
        }

        /* Hide scrollbar for IE, Edge and Firefox */
        &{
          -ms-overflow-style: none;  /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
        }

        .category-info{
          @include div(16em, 12em, .3em);
          margin-top: .5em;
          background-color: #1a1a1a;
          padding: 1em;
          display: flex;
          flex-direction: column;

          @include hover;

          .img-div{
            @include div(10em, 10em, 6%);
            background-color: #333333;
            @include centerElements;

            img{
              @include div(100%, 100%, 6%);
            }
          }

          p{
            margin: 0;
            @include p;
          }
          .category-name{
            margin-bottom: .5em;
            font-size: .95em;
          }
          .author{
            color: #bfbfbf;
            font-size: .83em;
          }
        }
      }
    }
    
    .final-category{
      margin-bottom: 1em;
      .title{
        .popular-shows{
          p{
            font-size: .7em;
          }
          h3{
            padding-bottom: .1em;
          }
        }
      }
    }
  }
}

// title - a tag
@media (min-width: 1400px) {
  .main-content main .category .title a{
    margin-right: 3em;
  }
}

//MainContent Margin-Left
@media (max-width: 1000px){
  .main-content main{
    margin-left: 15em;
  }
}

// Recent Activity Grid-Template-Columns
@media (min-width: 1100px) and (max-width: 1200px){
  .main-content main .recent-activity{
    grid-template-columns: auto auto;
  }
  .main-content main .recent-activity .activity-info{
    @include div(5em, 25em, .3em);
  }
}

@media (min-width: 1000px) and (max-width: 1100px){
  .main-content main .recent-activity{
    grid-template-columns: auto auto;
    justify-content: center;
  }
  .main-content main .recent-activity .activity-info{
    @include div(4em, 21em, .3em);
  }
}

@media (min-width: 900px) and (max-width: 1000px){
  .main-content main .recent-activity{
    grid-template-columns: auto auto;
    justify-content: center;
  }
  .main-content main .recent-activity .activity-info{
    @include div(4em, 19em, .3em);
  }
}

@media (min-width: 800px) and (max-width: 900px){
  .main-content main .recent-activity{
    grid-template-columns: auto auto;
    grid-gap: .5em;
  }
  .main-content main .recent-activity .activity-info{
    @include div(4em, 17em, .3em);
    &:nth-child(n+5){
      display: none;
    }
    .img-div{
      margin-right: .5em;
    }
  }
}

@media (min-width: 700px) and (max-width: 800px){
  .main-content main .recent-activity{
    grid-template-columns: auto auto;
    grid-gap: .5em;
  }
  .main-content main .recent-activity .activity-info{
    @include div(4em, 14em, .3em);
    &:nth-child(n+5){
      display: none;
    }
    .img-div{
      margin-right: .5em;
    }
  }
}

@media (max-width: 700px){
  .menu-bar{
    visibility: hidden;
  }
  .main-content header .hamburger{
    visibility: visible;
  }
  .main-content main{
    margin-left: 0;
    padding: .5em;
  }
  .main-content main .category .title a{
    margin-right: 0;
  }
  .main-content main .recent-activity{
    justify-content: center;
    grid-template-columns: auto auto;
    grid-gap: .5em;
  }
  .main-content main .recent-activity .activity-info{
    @include div(4em, 16em, .3em);
    margin-bottom: .2em;
    &:nth-child(n+5){
      display: none;
    }
    .img-div{
      margin-right: .5em;
    }
  }
  .main-content main .category div .category-info{
    margin-top: .2em;
  }
  .main-content main .greeting h2{
    margin-bottom: .5em;
  }
}

@media (max-width: 530px){
  .main-content main .recent-activity .activity-info{
    @include div(4em, 12em, .3em);
    margin-bottom: .2em;
  }
}

@media (max-width: 400px){
  .main-content main .recent-activity{
    justify-content: center;
    grid-template-columns: auto;
  }
  .main-content main .recent-activity .activity-info{
    @include div(4em, 12em, .3em);
    margin-bottom: .2em;
  }
  .main-content main .recent-activity .activity-info{
    @include div(4em, 16em, .3em);
    margin-bottom: .2em;
    &:nth-child(n+3){
      display: none;
    }
  }
}