* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}
.wrapper{
    width: 100%;
    position: relative;
}
.instagram{
    height: 100%;
    width: 100%;
    background-color: blueviolet;
}
.sidebar{
    height: 100%;
    width: 20%;
    background-color: #ffffff;
    position: fixed;
}
.right-container{
    height: 100%;
    width: calc(100% - 20%);
    position: fixed;
    right: 0;
    background-color: #f6f6f6;
}
.topnav{
    height: 10vh;
    width: calc(100% - 20%);
    background-color: coral;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bottomnav{
    height: 15vh;
    width: 100%;
    background-color:#f6f6f6;
    position: fixed;
    top: calc(100% - 90vh);
}
.topnav .box{
    height: 100%;
    width: calc(100%/2);
     background-color: #f6f6f6;
}
.box-nav-left{
    display: flex;
    align-items: center;
    padding-left: 20px;
}
input{
     padding: 10px;
     width: 290px;
     border: none;
    border-radius: 20px;
}
.box-nav-right{
    display: flex;
    align-items: center;
    gap: 20px;
}
button{
    /* border: none; */
    border-radius: 20px;
    height: 30px;
    width: 125px;
    color: white;
    background-color: orangered;
    position: absolute;
    right: 30px;
}
.fa-bell{
   position: absolute;
   left: 780px;
}
.fa-facebook-messenger{
    position: absolute;
    left: 820px;
}
.box-nav-right i{
    font-size: 20px;
}

.circle {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid rgb(230, 76, 109);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stories-container{
    display: flex;
    gap: 13px;
    padding-top: 50px;
    overflow-x: auto;
    scrollbar-width: none;
}
h2{
    font-size: 30px;
    position: absolute;
    left: 10px;
}
h1{
    position: absolute;
    top: 20px;
    left: 11px;
}
.cir{
    height: 100px;
    width: 100px;
    background-color: grey;
    position: absolute;
    top: 90px;
    left: 75px;
    border-radius: 50%;
}
.names{
    position: absolute;
    top: 200px;
    left: 70px;
    gap: 20px;
}
h4{
    color: rgb(128, 126, 126);
}
.pff{
    display: flex;
    position: absolute;
    top: 260px;
    left: 15px;
    gap: 30px;
}
.nn{
    position: absolute;
    top: 320px;
    left: 15px;
}
.para{
    position: absolute;
    top: 380px;
    left: 15px;
    font-size: 20px;
}
.circlee{
    height: 40px;
    width: 40px;
    background-color: rgb(183, 178, 178);
    flex-shrink: 0;
    border-radius: 50px;
}
.high{
    display: flex;
    position: absolute;
    top: 410px;
    left: 15px;
    gap: 20px;
}
.light{
    display: flex;
    gap: 16px;
    position: absolute;
    top: 460px;
    left: 15px;
    text-align: center;
}
.feed{
    position: absolute;
    top: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    left: 15px;
}
.log{
    position: absolute;
    top: 640px;
    left: 150px;
}
.boxs{
    position: fixed;
    bottom: 0;
    height: calc(100% - 31vh);
    width: 100%;
    background-color: #f6f6f6;
}
.reel{
    font-size: 35px;
    position: absolute;
    left:24px;
    top: 14px;
}
.box1{
    height: 320px;
    width: 300px;
    position: absolute;
    top: 80px;
    left: 20px;
    border-radius: 30px;
    background-color: rgb(216, 215, 215);
}
.cc{
    height: 40px;
    width: 40px;
    background-color: black;
    border-radius: 50%;
    position:absolute;
    top: 10px;
    left: 8px;
}
.na{
    position: absolute;
    left: 60px;
    top :10px;
}
.img1{
    height:170px ;
    width: 280px;
    border-radius: 20px;
}
.bin{
    height: 170px;
    width: 280px;
    background-color: white;
    position: absolute;
    top: 65px;
    left: 8px;
    border-radius: 20px;
}
.bp{
    position: absolute;
    top: 243px;
    left: 15px;
    display: flex;
    flex-direction: row;
    gap: 11px;
}
.fa-bookmark{
    position: absolute;
    left: 240px;
}
.logo{
    height: 17px;
    width: 17px;
    background-color: black;
    border-radius: 50%;
}
.bpp{
position: absolute;
top: 270px;
left: 17px;
display: flex;
gap: 8px;
}
.bppp{
    position: absolute;
    top: 290px;
    left: 19px;
}

.box2{
    height: 320px;
    width: 300px;
    position: absolute;
    top: 80px;
    left: 350px;
    border-radius: 30px;
    background-color: rgb(216, 215, 215);
}
.box3{
    height: 320px;
    width: 300px;
    position: absolute;
    top: 80px;
    left: 680px;
    border-radius: 30px;
    background-color: rgb(216, 215, 215);
}
.img2{
    height: 100px;
    width: 100px;
}
.fa-plus{
    font-size: 25px;
    position: absolute;
    top: 9px;
    left: 4px;
}
.img3{
     height: 40px;
    width: 40px;
    border-radius: 30px;
}
.img4{
     height: 40px;
    width: 40px;
    border-radius: 30px;
}
.img5{
     height: 40px;
    width: 40px;
    border-radius: 30px;
}
.img6 {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    object-fit: cover;
    background-color: rgb(12, 12, 12);
    border: 2px solid white;
}