index.css

body{
   margin: 0;
   padding: 0;
   width: 100%;
}

#signup {
   
    width: 95%;
    margin: auto;
    height: auto;
    text-align: center;
    font-family: sans-serif;
    margin-bottom: 60px;
}
#signup h3{
    font-weight: 600;
    line-height: 22px;
    font-size: 21px;
    word-spacing: 1.5px;
}
#signup a{
   text-decoration: none;
   color: #333333;
}
#signup button{
    width: 20%;
    background-color: white;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
   border: 0.5px solid #333333;
}
#signup button:hover{
   background-color: rgb(172, 167, 167);
   
}

#bonus {
    width: 95%;
    margin: auto;
    position: relative;
}

#bonus img{
    width: 100%;
}
#bonus div{
    position: absolute;
    display: block;
    left: 28.48%;
    top: 27.50%;
    width: 53.48%;
   font-size: 16px;
   font-family: sans-serif;
   line-height: 22px;
}
 #bonus a{
    color: #333333;
    text-decoration:underline;
 }

 #bonus p:nth-child(1){
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 0;
 }
 #bonus p:nth-child(2){
    margin-top: 4px;
    color: #333333;
 }

 #thread,#cur-loving{
    width: 95%;
    margin: auto;
    text-align: center;
    margin-bottom: 30px;
    font-family: sans-serif;
   line-height: 22px;
   color: #333333;
 }
 #thread hr+h2{
   font-size: 20px;
   letter-spacing: 5px;
   margin-top: 50px;
 }

 #thread > div{
   
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    text-align: left;
    margin-top: 60px;
    margin-bottom: 100px;
 }
 #thread > div > div{
   font-size: 16px;
   font-family: sans-serif;
   line-height: 22px;
 }
 #thread > div > div h3{
     margin-top: 3px;
 }
 #thread a{
  
   color: #4c4a4a;
 }
 #thread > div > div img{
   width: 100%;
 }

 #get-inspired,#pick-up,#personal-style,#black{
    width: 95%;
    margin: auto;
   
    margin-bottom: 30px;
    position: relative;
    font-size: 16px;
    line-height: 22px;
    font-family: sans-serif;
    margin-top: 60px;
 }

#get-inspired h2,#shop-category h2,#cur-loving h2{
   text-align: center;
  color: #333333;
   font-size: 20px;
 letter-spacing: 3px;
}
.fashion{
   margin-top: 50px;
}
 .fashion div{
   position: absolute;
   left: 67%;
   top: 43%;
    text-align: initial;
    
    
}
.fashion .mid{
   position: absolute;
   left: 67%;
   top: 25%;
    text-align: initial;
    
    
}
.fashion  a{
   color: #333333;
   margin-right: 25px;
}
.fashion{
   width: 95%;
    margin: auto;
    margin-bottom: 30px;
    position: relative;
    font-size: 16px;
    line-height: 22px;
    font-family: sans-serif;
    margin-top: 60px;
}


.fashion img,#pick-up img,#personal-style img,#black img{
   width: 100%;
}
 


#pick-up h3{
   font-size: 20px;
   position: absolute;
   left: 35%;
   top: 25%;
}
#pick-up div:nth-child(3){
   position: absolute;
    left: 58%;
    top: 25%;
    font-size: 15px;

}
#pick-up div:nth-child(3) > a,#personal-style a{
   margin-top: 5px;
   color: #4b4848;
}
 .line{
   width: 95%;
   margin-top: 80px;
   margin-bottom: 70px;
}

#personal-style > div {
   width: 28%;
   position: absolute;
   top: 25%;
   left: 10%;
   line-height: 22px;
   
}

#shop-category {
   width: 95%;
   margin: auto;
   margin-bottom: 30px;
   font-size: 16px;
   line-height: 22px;
   font-family: sans-serif;
   margin-top: 60px;
}
 .grid{
  
   display: grid;
   grid-template-columns: repeat(6,1fr);
   gap: 20px;
   margin-top: 60px;
   margin-bottom: 60px;
}



#black div{
   
   position: absolute;
   color: whitesmoke;
   left: 40%;
   top: 20%;
}
#black p,#black h3{
   margin-top: 5px;
   margin-bottom: 15px;
  
}

#black a{
   color: whitesmoke;
   margin-right: 25px;
}
#shop-category img{
   width: 100%;
}
#shop-category{
   text-align: center;
}
#cur-loving > div{
   display: grid;
   grid-template-columns: repeat(4,1fr);
   gap: 20px;
   margin-top: 60px;
   margin-bottom: 100px;
}
#cur-loving img{
    width: 100%;
}
.cards{
  
   width: 95%;
   margin: auto;
   height: auto;
   font-size: 16px;
   font-family: sans-serif;
   line-height: 22px;
   margin-top: 60px;
}
.cards p{
   color: #333333;
}
.cards .grid{
   display: grid;
   grid-template-columns: repeat(6,1fr);
   gap: 20px;
   
   height: auto;
   margin-top: 20px;
}
.cards h2{
   
   margin-bottom: 10px;
   font-weight: 700;
}

.grid img{
   width: 100%;
   margin-bottom: 5px;
   background-color: #c2c2cb;
}
.grid p,.grid span,.grid h3{
   margin-top: 0px;
   margin-bottom: 2px;
  
}
.grid h3{
   font-size: 16px;
   font-weight: 600;
}

/* medium screens */
@media all and (min-width:761px) and (max-width:1024px){
   
#signup h3{
   line-height: 15px;
   font-size: 16px;
}

#signup button{
   width: 25%;
   padding: 5px;
   font-size: 12px;
   line-height: 15px;
}

#bonus div{
   left: 30%;
   top: 5%;
   width: 52%;
  font-size: 12px;
  line-height: 15px;
}

#bonus p:nth-child(1){
   margin-bottom: 0px;
   font-size: 12px;
  
}
#bonus p:nth-child(2){
   margin-top: 0px; 
}

#thread,#cur-loving{
   margin-bottom: 10px;
  line-height: 15px;
  
}
#thread hr+h2{
  font-size: 16px;
  letter-spacing: 2px;
  margin-top: 20px;
}

#thread > div{
   gap: 20px;
   margin-top: 30px;
   margin-bottom: 50px;
}
#thread > div > div{
  font-size: 12px;
  line-height: 15px;
}

#get-inspired,#pick-up,#personal-style,#black{
   margin-bottom: 20px;
   font-size: 12px;
   line-height: 15px;
   margin-top: 30px;
}

#get-inspired h2,#shop-category h2,#cur-loving h2{
  font-size: 16px;
 letter-spacing: 3px;
}

.fashion{
  margin-top: 20px;
}
.fashion div{
  font-size: 12px;
  left: 67%;
  top: 43%;
}
.fashion{
   margin-bottom: 20px;
   font-size: 12px;
   line-height: 15px;
   margin-top: 30px;
}

#pick-up h3{
  font-size: 14px;
  left: 30%;
}
#pick-up div:nth-child(3){
   left: 58%;
   top: 18%;
   font-size: 12px;
}
#pick-up div:nth-child(3) > a,#personal-style a{
  margin-top: 2px;
}
.line{
  margin-top: 50px;
  margin-bottom: 40px;
}

#personal-style > div {
  width: 40%;
  top: 18%;
  left: 7%;
  line-height: 15px;
}

#shop-category {
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 15px;
  margin-top: 30px;
}
.grid{
  margin-top: 30px;
  margin-bottom: 30px;
}

#black p,#black h3{
  margin-top: 2px;
  margin-bottom: 8px;
}

#black a{
  margin-right: 20px;
}

#cur-loving > div{
  margin-top: 30px;
  margin-bottom: 50px;
}
.cards{
  font-size: 12px;
  line-height: 15px;
  margin-top: 30px;
}

.cards h2{
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 700;
}


.grid p,.grid span,.grid h3{
 font-size: 14px;
}

}

/* small screens */
@media all and (min-width:320px) and (max-width:760px){
     
#signup h3{
   line-height: 12px;
   font-size: 12px;
}

#signup button{
   width: 25%;
   padding: 3px;
   font-size: 8px;
   line-height: 15px;
}

#bonus div{
   left: 30%;
   top: 5%;
   width: 52%;
  font-size: 8px;
  line-height: 8px;
}

#bonus p:nth-child(1){
   margin-bottom: 0px;
   font-size: 8px;
  
}
#bonus p:nth-child(2){
   margin-top: 0px; 
}

#thread,#cur-loving{
   margin-bottom: 10px;
  line-height: 15px;
  
}
#thread hr+h2{
  font-size: 10px;
  letter-spacing: 2px;
  margin-top: 10px;
}

#thread > div{
   gap: 20px;
   margin-top: 15px;
   margin-bottom: 25px;
}
#thread > div > div{
  font-size: 8px;
  line-height: 10px;
}

#get-inspired,#pick-up,#personal-style,#black{
   margin-bottom: 10px;
   font-size: 8px;
   line-height: 10px;
   margin-top: 15px;
}

#get-inspired h2,#shop-category h2,#cur-loving h2{
  font-size: 10px;
 letter-spacing: 2px;
}
#get-inspired p,#shop-category p,#cur-loving p{
   font-size: 10px;
  letter-spacing: 1px;
 }


.fashion{
  margin-top: 10px;
}
.fashion div{
  font-size: 8px;
  left: 67%;
  top: 43%;
}
.fashion{
   margin-bottom: 10px;
   font-size: 8px;
   line-height: 10px;
   margin-top: 15px;
}

#pick-up h3{
  font-size: 10px;
  left: 30%;
}
#pick-up div:nth-child(3){
   left: 58%;
   top: 18%;
   font-size: 8px;
}
#pick-up div:nth-child(3) > a,#personal-style a{
  margin-top: 2px;
}
.line{
  margin-top: 25px;
  margin-bottom: 20px;
  height: 0.5px;
}

#personal-style > div {
  width: 40%;
  top: 18%;
  left: 7%;
  line-height: 10px;
}

#shop-category {
  margin-bottom: 10px;
  font-size: 8px;
  line-height: 10px;
  margin-top: 15px;
}
.grid{
  margin-top: 15px;
  margin-bottom: 15px;
}

#black p,#black h3{
  margin-top: 2px;
  margin-bottom: 4px;
}

#black a{
  margin-right: 10px;
}

#cur-loving > div{
  margin-top: 15px;
  margin-bottom: 25px;
}
.cards{
  font-size: 8px;
  line-height: 10px;
  margin-top: 15px;
}

.cards h2{
  font-size: 7px;
  margin-bottom: 8px;
  font-weight: 700;
}


.grid p,.grid span,.grid h3{
 font-size: 7px;
}

}