common.css

/* *{
    margin: 0;
    padding: 0;
    font-size: medium;
} */
body{
    background-color: black;
    margin:0px;
    padding:0px;
    margin:auto;
    font-family: 'Poppins', sans-serif;
  }
    /* navbar */
#navbar{

    width:100%;
    height:80px;
    color:white;

    display: flex;
    justify-content: space-between;
    background-color: #181818;
  position: relative;
}
   #n1{
       display:flex;
       width:60%;
       justify-content: space-around;
       position:static;
   }
   #n2{
       display:flex;
 width:30%;
  justify-content: space-around;
  position:static;

   }
   button{
    background-color: #181818;
       color:white;
       border:1px solid white;
       height:50%;
       margin-top: 20px;
   }
  a{
        
    color:white;
    text-decoration: none;


   }
   svg{
       margin-top:30px ;

   }
      /* main image */

#img{
    /* background-color: rgb(239, 23, 23); */
    margin-top: 10px;
    width:100%;
   background: linear-gradient(100.37deg, rgb(236, 0, 139) 0%, rgb(241, 90, 34) 100%); ;
    }
#img>img{
    width:60%;
    margin-left: 200px;
    margin-top: 150px;
}
        /* box1 */
#box1{
    width:500px;
    margin-left:200px;
    margin-top: 50px;
}
 div>p{
    color:#e91393;
   font-size: 20px;
   text-decoration: solid;
   margin-left: 10px;
} 
h1{
    color:white;
    font-size: 30px;
    font-weight: 50px;
    margin-left: 10px;

}
  /* box2 */
#box2{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
    gap:20px;

    height:auto ;
    width:80%;
    margin:auto;
}
#box2>div>div>h2{
 color:white;
}
#box2>div>div>img{
    width:70%;
    margin-left: 40px;
    }
#box2>div>div>h3{
    color:rgb(233, 213, 213)
}
#box2>div{

    width:90%;
    display:flex;
    margin:auto;
    background-color: rgb(49, 46, 46);
    border-radius: 20px;

}
#box2>div>div{
    width:50%;
    margin-left: 20px;

}
    /* box3 */
#box3{
    background-color: rgb(40, 37, 37);
    margin-top: 80px;
    width:100%;
    height:1300px;

    }
    #box3>div{
        margin-left: 10px;
    }

      /* box3-1 */
#box3-1{

    width:90%;
    height:auto;
    margin-left: 10px;
    display:flex;
    }
    #box3-1>div>h1 {
        margin-left: 10px;
    }
    #box3-1>div>p {
        margin-left: 10px;
    }
#box3-1>div{
    width:90%;
   margin-left: 10px;
    background-color: rgb(48, 46, 46);
    border-radius: 15px;
}
#box3-1>div>img{
    width:100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
} 
   /* box3-2 */
#box3-2{

    width:90%;
    height:auto;
    margin-left: 10px;
    margin-top: 50px;
    display:flex;
    gap:15px;
}
 #box3-2>div{
    width:90%;

    border-radius: 15px;
    background-color: rgb(48, 47, 47);

 }
 #box3-2>div>h2{
    color:white;
    margin-left: 5px;
 }
 #box3-2>div>h1{
    margin-left: 5px;
 }
 #box3-2>div>h2 ~ h1 ~p{
     color:white;
     margin-left: 5px;
 } 
    /* box4 */
    #box4{

        width:90%;
        height:auto;
        margin-left: 10px;
        margin-top: 50px;
        display:flex;
        gap:15px;
    }
    #box4>div{
        width:95%;

        border-radius: 15px;

    }
    #box4>div>img{
        width:100%;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    #box4>div>p{
        color:orange
    }
    #box4>div>p~p{
        color:white
    }   
          /* box5 */
    .box5{
        width:100%;
        height:auto;
        margin-left: 10px;
        margin-top: 50px;
        display:flex;

    }
    .box5>div{
        width:90%;
        border-radius: 15px;
    }
    .box5>div>img{
        width:100%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px
    }
    #box5-1{
        width:100%;
        height:80%;
        background: linear-gradient(100.37deg, rgb(236, 0, 139) 0%, rgb(241, 90, 34) 100%); ;
    }
    #box5-1>h1{
        margin-left: 40px;
    }
    #box5-1>p{
        color:white;
        margin-left: 40px;
    }
    #box5-1>img{

        width:90%;
        margin-top:100px;
        margin-left: 50px;
    }
         /* box6 */


    #box7{
        margin-top: 50px;
        text-align: center;
    }
       /* medai-queries */
    @media all and (min-width:400px) and (max-width:1000px){
        body{
            width:100%;
            margin:auto;
        }

     #img{
         width:100%;
         margin:auto;
         background: linear-gradient(100.37deg, rgb(236, 0, 139) 0%, rgb(241, 90, 34) 100%); 
     }
        #img>img{
            width:60%;
            margin-left: 100px;
            margin-top: 10px;
             }
             #box2{
                display:grid;
                grid-template-columns: repeat(1,1fr);
                grid-template-rows: repeat(3,1fr);  

             }
             #box3{
                 width:100%;
                 height:auto;
                 margin-left: 20p;
                 gap:5px;
             }
             #box3-2{
                gap:5px;
                width:90%;
             }
      #box3>div{
          display:grid;
          grid-template-columns: repeat(1,1fr);
         gap:5px;
      }
      #box4{
          width:80%;
          display:grid;
          grid-template-columns: repeat(2,1fr);
          gap:5px;
      }
      .box5{
          width:80%;
          height:auto;
          display:grid;
          grid-template-columns: repeat(1,1fr);

      }
      #box5-1{
          width:100%;
          height:auto;
      } 
      #box5-1>img{

        width:40%;
        margin-top:20px;
        margin-left: 20px;
    }
    #box1{
        width:500px;
        margin-left:100px;
        margin-top: 50px;
    }
    }