@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700&family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600&display=swap');

:root{
  --primary-color-hue: 252;
  --dark-color-lightness: 17%;
  --light-color-lightness: 95%;
  --white-color-lightness: 100%;


  --color_white : hsl(252, 30% , var(--white-color-lightness));
  --color_light : hsl(252, 30% , var(--light-color-lightness));
  --color_gray : hsl(var(--primary-color-hue), 15% , 65%);
  --color_primary : hsl(var(--primary-color-hue) , 75% , 60%);
  --color_secondary : hsl(252, 100% , 90%);
  --color_success : hsl(120, 95% , 65%);
  --color_danger : hsl(0, 95% , 65%);
  --color_dark : hsl(252, 30% , var(--dark-color-lightness));
  --color_black : hsl(252, 30% , 10%);
  
  --border-radius: 2rem;
  --card-border-radius: 1rem;
  --btn-padding : 0.6rem 2rem;
  --search-padding:0.6rem 1rem;
  --card-padding: 1rem;
  
  --sticky-top-left : 5.4rem;
  --sticky-top-right : -18rem;
}


* ,*::before ,*::after{ 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
body{
  font-family: 'Poppins', sans-serif;
  color: var(--color_dark);
  background: var(--color_light);
  overflow-x: hidden;
}

// General Styles 
.container{
  width: 80%;
  margin: 0 auto;
}
.profile-photo{
  width: 2.7rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}
img{
  display: block;
  width: 100%;
}
.btn{
  display: inline-block;
  padding: var(--btn-padding);
  cursor: pointer;
  font-weight: 500;
  border-radius: var(--border-radius);
  transition: all 300ms ease;
  font-size: 0.9rem;
  &:hover{
    opacity: 0.8;
  }
}
.btn-primary{
  background-color: var(--color_primary);
  color: white;
}
.text-bold{
  font-weight: 500;
}
.text-muted{
  color: var(--color_gray);
}
%bg-image{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
// Start of Nav 
nav{
  width: 100%;
  background-color: var(--color_white);
  padding: 0.7rem 0;
  position: fixed;
  z-index: 10;
  top: 0;
  .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .search-bar{
    background-color: var(--color_light);
    border-radius: var(--border-radius);
    padding: var(--search-padding);
    input{
      background-color: transparent;
      width: 30vw;
      margin-left: 1rem;
      font-size: .9rem;
      color: var(--color_danger);
      &::placeholder{
        color: var(--color_gray);
      }
    }
  }
  .create{
    display: flex;
    gap: 2rem;
    align-items: center;
  }
}
// End of Nav 
// Start of Main 
main{
  position: relative;
  top: 5.4rem;
  .container{
    display: grid;
    grid-template-columns: 18vw auto 20vw;
    column-gap: 2rem;
    position: relative;
    // left 
    .left{
      height: max-content;
      position: sticky;
      top: var(--sticky-top-left);
      .profile{
        padding: var(--card-padding);
        background: var(--color_white);
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        column-gap: 1rem;
        width: 100%;
      }
      // Sidebar 
      .sidebar{
        margin-top: 1rem;
        background-color: var(--color_white);
        border-radius: var(--card-border-radius);
        .menu-item{
          display: flex;
          align-items: center;
          height: 4rem;
          cursor: pointer;
          transition: all 300ms ease;
          position: relative;
          &:hover{
            background-color: var(--color_light);
          }
          i{
            font-size: 1.4rem;
            color: var(--color_gray);
            margin-left: 2rem;
            position: relative;
            .notifications-count{
              position: absolute;
              top: -0.45rem;
              right: -0.3rem;
              background-color: var(--color_danger);
              color: white;
              font-size: 0.7rem;
              width: fit-content;
              border-radius: 0.8rem;
              padding: 0.1rem 0.4rem;
            }
          }
          h3{
            margin-left: 1.5rem;
            font-size: 1rem;
          }
          &.active{
            background-color: var(--color_light);
            i , h3{
              color: var(--color_primary);
            }
            &::before{
              content: "";
              display: block;
              width: 0.5rem;
              height: 100%;
              position: absolute;
              background-color: var(--color_primary);
            }
          }
          &:first-child{
            &.active{
              border-top-left-radius: var(--card-border-radius);
              overflow: hidden;
            }
          }
          &:last-child{
            &.active{
              border-bottom-left-radius: var(--card-border-radius);
              overflow: hidden;
            }
          }
          // Start Notifications Popup
          .notifications-popup{
            position: absolute;
            left: 110%;
            top: 0;
            width: 30rem;
            background-color: var(--color_white);
            border-radius: var(--card-border-radius);
            padding: var(--card-padding);
            box-shadow: 0 0 1rem var(--color_gray);
            display: none;
            z-index: 8;
            &::before{
              content: "";
              position: absolute;
              top: 20px;
              left: -40px;
              border-width: 20px;
              border-style: solid;
              border-color: transparent white transparent transparent;
            }
            > div{
              display: flex;
              align-items: start;
              gap: 1rem;
              margin-bottom: 1rem;
            }
            small{
              display: block;
            }
          }
        }
      }
      .btn{
        margin-top: 1rem;
        width: 100%;
        text-align: center;
        padding: 1rem 0;
      }
    }
  }
  // Middle 
  .middle{
    .stories{
      display: flex;
      justify-content: space-between;
      height: 12rem;
      gap: 0.5rem;
      .story{
        padding: var(--card-padding);
        border-radius:var(--card-border-radius);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        color: white;
        font-size: 0.7rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        &::before{
          content: "";
          position: absolute;
          bottom: 0;
          background: linear-gradient(transparent, rgba(0 ,0, 0, 0.75));
          width: 100%;
          height: 5rem;
        }
        .name{
          z-index: 2;
        }
        &:nth-child(1){
          background-image: url(./images/Me2.jpeg);
          @extend %bg-image;
        }
        &:nth-child(2){
          background-image: url(./images/story-2.jpg);
          @extend %bg-image;
        }
        &:nth-child(3){
          background-image: url(./images/story-3.jpg);
          @extend %bg-image;
        }
        &:nth-child(4){
          background-image: url(./images/story-4.jpg);
          @extend %bg-image;
        }
        &:nth-child(5){
          background-image: url(./images/story-6.jpg);
          @extend %bg-image;
        }
        &:nth-child(6){
          background-image: url(./images/story-1.jpg);
          @extend %bg-image;
        }
        .profile-photo{
          width: 2rem;
          height: 2rem;
          align-self: start;
          border: 3px solid var(--color_primary);
        }
      }
    }
    .create-post{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1rem;
      background: var(--color_white);
      padding: 0.4rem var(--card-padding);
      border-radius: var(--border-radius);
      input[type="text"]{
        background-color: transparent;
        justify-self: start;
        width: 100%;
        margin-right: 1rem;
        color: var(--color_dark);
        padding-left: 1rem;
      }
    }
    .feeds{
      .feed{
        background: var(--color_white);
        border-radius: var(--border-radius);
        padding: var(--card-padding);
        margin: 1rem 0;
        font-size: 0.85rem;
        line-height: 1.5;
        .head{
        display: flex;
        justify-content: space-between;
          .user{
            display: flex;
            gap: 1rem;
          }
        }
        .photo{
          margin: 0.7rem 0;
          border-radius: var(--card-border-radius);
          overflow: hidden;
        }
        .action-buttons{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0.6rem;
          .interaction-buttons{
            &.active{
              color: red;
            }
          }
          svg , i{
            font-size: 1.5rem;
            cursor: pointer;
          }
        }
        .liked-by{
          display: flex;
          align-items: center;
          span{
            width: 1.4rem;
            aspect-ratio: 1/1;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid var(--color_white);
            margin-left: -.6rem;
            &:first-child{
              margin: 0;
            }
          }
          p{
            margin-left: 0.5rem;
          }
        }
        .caption{
          margin-top: 0.3rem;
          p{
            font-size: 0.7rem;
          }
        }
      }
    }
  }
  // Right 
  .right{
    height: max-content;
    position: sticky;
    top: var(--sticky-top-right);
    bottom: 0;
    .messages{
      background-color: var(--color_white);
      padding: var(--card-padding);
      border-radius: var(--card-border-radius);
      .heading{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        i{
          font-size: 1.4rem;
        }
      }
      .search-bar{
        background-color: var(--color_light);
        border-radius: var(--border-radius);
        padding: var(--search-padding);
        display: flex;
        margin-bottom: 1rem;
        input{
          background-color: transparent;
          margin-left: 1rem;
          font-size: .9rem;
          color: var(--color_dark);
          &::placeholder{
            color: var(--color_gray);
          }
        }
      }
      .category{
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
        h6{
          width: 100%;
          text-align: center;
          border-bottom: 4px solid var(--color_light);
          padding-bottom: 0.5rem;
          font-size: 0.85rem;
        }
        .active{
          border-color: var(--color_dark);
        }
        .message-requests{
          color: var(--color_primary);
        }
      }
      .message{
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
        align-items: start;
        &:last-child{
          margin: 0;
        }
        p{
          font-size: 0.8rem;
        }
        .profile-photo{
          position: relative;
          overflow: visible;
          img{
            border-radius: 50%;
          }
          .active{
            position: absolute;
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            border: 2px solid var(--color_white);
            background-color: var(--color_success);
            bottom: 0;
            right: 0px;
          }
        }
      }
    }
    .friend-request{
      margin-top: 1rem;
      h4{
        color: var(--color_gray);
        margin: 1rem 0;
      }
      .request{
        background: var(--color_white);
        padding: var(--card-padding);
        border-radius: var(--card-border-radius);
        margin-bottom: 0.7rem;
        .info{
          display: flex;
          gap: 1rem;
          margin-bottom: 1rem;
        }
        .actions{
          display: flex;
          gap: 0.5rem;
          justify-content: center;
        }
      }
    }
}
}
// =============================================== THEME CUSTOMIZATION =============================================
.customize-theme{
  background-color: rgba(255, 255, 255, 0.5);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: center;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  display: none;
  .card{
    background-color: var(--color_white);
    padding: 3rem;
    border-radius: var(--card-border-radius);
    width: 50%;
    box-shadow: 0 0 1rem var(--color_primary);
    position: relative;
    >span{
      display: inline-block;
      position: absolute;
      top: 0;
      right: 3%;
      cursor: pointer;
      i{
        font-size: 3rem;
      }
    }
  }
  // Font Size 
  .font-size{
    margin-top: 5rem;
    > div{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--color_light);
      border-radius: var(--card-border-radius);
      padding: var(--search-padding);
    }
    .choose-size{
      background-color: var(--color_secondary);
      height: 0.3rem;
      width: 100%;
      margin: 0 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span{
        width: 1rem;
        height: 1rem;
        background-color: var(--color_secondary);
        border-radius: 50%;
        cursor: pointer;
        &.active{
          background-color: var(--color_primary);
        }
      }
    }
  }
  .color{
    margin-top: 2rem;
    .choose-color{
      background-color: var(--color_light);
      padding: var(--search-padding);
      border-radius: var(--card-border-radius);
      display: flex;
      align-items: center;
      justify-content: space-between;
      span{
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        cursor: pointer;
        &.active{
          border: 3px solid #fff;
        }
        &:nth-child(1){
          background-color: hsl(252, 75% , 60%);;
        }
        &:nth-child(2){
          background-color: hsl(52,75%,60%);
        }
        &:nth-child(3){
          background-color: hsl(352,75%,60%);
        }
        &:nth-child(4){
          background-color: hsl(152,75%,60%);
        }
        &:nth-child(5){
          background-color: hsl(202,75%,60%);
        }
      }
    }
  }
  .background{
    margin-top: 2rem;
    .choose-bg{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0rem;
      flex-wrap: wrap;
      > div{
        padding: var(--card-padding);
        // width: 100%;
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 1rem;
        border-radius: 0.4rem;
        cursor: pointer;
        &.active{
          border: 2px solid var(--color_primary);
        }
        span{
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
          border: 2px solid var(--color_gray);
          margin-right: 1rem;
        }
      }
      .bg-1{
        background-color: white;
        color: black;
      }
      .bg-2{
        background-color: hsl(252, 30% , 17%);
        color: white;
      }
      .bg-3{
        background-color: hsl(252, 30% , 10%);
        color: white;
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .container{
    width: 96%;
  }
  main{
    .container{
      grid-template-columns: 5rem auto 30vw;
      gap: 1rem;
    }
    .left{
      width: 5rem;
      z-index: 5;
      .profile{
        display: none !important;
      }
      .sidebar{
        h3{
          display: none;
        }
      }
      .btn{
        display: none;
      }
    }
    .castomize-theme{
      .card{
        width: 80vw;
        margin-top: 3rem;
      }
    }
  }
}

@media screen and (max-width: 992px){
  nav{
    .search-bar{
      display: none;
    }
  }
  main{
    .container{
      grid-template-columns: 0 auto 5rem;
      gap: 0rem;
    }
    .left{
      grid-column: 3/4;
      position: fixed !important;
      bottom: 0;
      right: 0;
      .notifications-popup{
        position: absolute !important;
        left: -21.5rem !important;
        width: 20rem !important;
        &::before{
          position: absolute;
          top: 1.3rem !important;
          left: 20rem !important;
          border-color: transparent transparent transparent #fff !important;
        }
      }
    }
    .middle{
      grid-column: 1/3;
    }
    .right{
      display: none;
    }
    .castomize-theme{
      .card{
        width: 92vw;
        margin-top: 3rem;
      }
    }
    
  }
  .castomize-theme{
    .card{
      padding: 2rem !important;
    }
  }
  .castomize-theme{
    .card{
      padding: 2rem !important;
    }
    
  }
  .background{
    .choose-bg{
      display: flex;
      align-items: center !important;
      justify-content: center !important;
      gap: 1rem !important;
      margin-top: 2rem !important;
    }
    .choose-bg{
      > div{
        padding: 0.5rem !important;
      }
    }
  }
}

@media (max-width:767px) {
  nav{
    .search-bar{
      display: none;
    }
  }
  main{
    .container{
      grid-template-columns: 0 auto 5rem;
      gap: 0rem;
    }
    .left{
      grid-column: 3/4;
      position: fixed !important;
      bottom: 0;
      right: 0;
      .notifications-popup{
        position: absolute !important;
        left: -21.5rem !important;
        width: 20rem !important;
        &::before{
          position: absolute;
          top: 1.3rem !important;
          left: 20rem !important;
          border-color: transparent transparent transparent #fff !important;
        }
      }
    }
    .middle{
      grid-column: 1/3;
    }
    .right{
      display: none;
    }
    .castomize-theme{
      .card{
        width: 92vw;
        margin-top: 3rem;
      }
    }
    
  }
  .castomize-theme{
    .card{
      padding: 2rem !important;
    }
  }
  .castomize-theme{
    .card{
      padding: 2rem !important;
    }
    
  }
  .background{
    .choose-bg{
      display: flex;
      align-items: center !important;
      justify-content: center !important;
      gap: 1rem !important;
      margin-top: 2rem !important;
    }
    .choose-bg{
      > div{
        padding: 0.5rem !important;
      }
    }
  }
}
@media (min-width:350px) and (max-width:767px) {
  .castomize-theme{
    width: 100% !important;
    background-color: black !important;
  }
  .card{
    // background: red !important;
    width: 80vw !important;
    padding: 2rem 3rem !important;
    h2{
      font-size: 1rem;
    }
    p{
      margin-top: 0.5rem;
      font-size: 0.7rem;
    }
    .font-size{
      >div{
        margin: -30px 0 0 0;
      }
    }
    .color{
      margin-top: 1rem;
      h4{
        margin-bottom: 0.5rem;
      }
    }
    .background{
      margin-top: 1rem;
      .choose-bg{
        // flex-wrap: nowrap;
        gap: 2rem !important;
        div{
          margin: -1.5rem 0 0 0;
        }
      }
    }
  }
}