index_styles.css

#top-blue-bar{
    width: 100%;
    height: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 15px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
    text-align: center;
    background-color:#2d1f9b;
}
#top-blue-bar a{
    color: white;
}
.navbar{
   
    display: flex;
    flex-direction: row;
    flex-basis: 30p;
    
}
.navbar > div{
    
    color:black;
    margin: 0.5%;
    padding: 3px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: 400;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    height: 20px;
}
.navbar > div >a:hover{
    color: red;
}
#navbox-2{
    margin-left: 40%;
}
#navbox-1>img{
    height: 60px;
    widows: 60px;;
    margin-bottom: 2px;
}
#navbox + div{
    font-size: 40px;
}
#logo_text{
    font-size: 40px;
}
.index_box_a{
    background-image: url("index_background_a.png");
   
    width: 98%;
    height: 800px;
}
.index_box_a > div{
   
    width: 30%;
    margin-left: 45%;
    margin-top: 50px;

}
#navbox-8{
    
    margin-top:50px; 
    padding-bottom: 10px;
    width: 5%;
    padding-left: 2%;
    border-radius: 5px;
    background: orangered;
    color: white;
}
#index_box_a_cont > p:nth-child(1){
    padding-top: 50px;
    font-weight:900;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 40px;
    color: #3F4450;
}
#index_box_a_cont > p{
    line-height: 1.6;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 15px;
    color: gray;
    
}
.index_box_a div:nth-child(1){
    padding-top: 50px;
    
}
#index_box_a_cont input[type]{
    height: 30px;
    width: 40%;
}
.index_box_b{
    
    display: grid;
    grid-template-columns: 20% 20% 30%;
    grid-template-rows: 200px 200px;
    padding: 50px;
    grid-gap: 10%;
    padding-left: 15%;
}
.index_box_b > div{
    
    color: black;

    font-weight: 500;
}
.index_box_b > div span{
    font-size: 30px;
    margin-left: 5%;
}
.bottom-option{
    color: #F70D27;
    font-size: 15px;
    margin-right: 5%;
    font-weight: 700;
    float: left;
}
.bottom-option:hover{
    color: #BE3229;
}
#watch{
    margin-left: 5%;
}
 
.index_box_b > div > img{
    height:50px;
    border-radius: 5px;
    margin-top: 10px;
}
.index_box_b > div:nth-child(6){
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 35px;
    font-weight: 700;
}
.index_box_b > div > p{
    color: gray;
}
.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; 
    height: 0;
  }
  .iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    /* width: 100%;
    height: 100%; */
  }
  .index_c_video{
      width: 100%;
      height: 550px;
      
      background-image: url("index_c_image.png");
      background-size: contain;
  }
  .index_c_video > iframe{
      margin-left: 30%;
      margin-top: 60px;
      opacity: 0.0;
  }
  .index_d{
      text-align: center;
      background-color: rgba(247, 242, 242, 0.979);
      background-image: url("index_d.png");
      background-size:cover;
      height: 500px;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      
  }
  .index_d h1{
      color: rgb(85, 85, 146);
      font-size: 50px;
  }
  .index_d p{
      color: rgb(158, 158, 158);
      line-height: 1.6;
  }
  .index_d> a >input{
      color: white;
      background: rgb(85, 85, 146);
      width: 10%;
      font-size: 15px;
      margin-top: 20px;
      height: 45px;
      border-radius: 5px;
      
  }
  .index_d input:hover{
      background-color: indigo;
  }
  .index_f{
    background-image: url("index_f.png");
    height: 800px;
    background-size: cover;
    width: 100%;
  }
  .index_f_upper{
      display: grid;
      grid-template-columns: 45% 22% 22%;
      grid-template-rows: 500px;
      padding-left:8%;
      grid-gap:30px;
      padding-top: 80px;
  }
 .index_f_upper > div{
     /* background-color: black; */
     height: 500px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

 }
 .index_f_upper div:nth-child(1){
    /* color: #FEB0C5;
    font-size: 20px; */
     /* padding-top: 80px; */
    } 
 #boldtext{
    color: #FEB0C5;
    font-size: 60px;
    font-weight:bold;
 }   
    .index_f_upper div:nth-child(2) > div{
        width: 95%;
        height: 220px;
        margin-top:150px;
        background-color: lavenderblush;
        border-radius: 5px;
        padding-left:6% ;
       padding-top:6% ;
    }
    .index_f_upper div:nth-child(3) > div{
        width: 95%;
        height: 220px;
        margin: 30px 0px;
       
        background-color: lavenderblush;
        border-radius: 5px;
        padding-left:6% ;
       padding-top:6% ;

    }
    .index_f_upper a input{
        padding: 4px 3px;
        margin-top: 20px;
        color: white;
        background-color: rgb(51, 51, 156);
        width: 40%;
        height: 50px;
        font-size: 20px;
        border-radius: 5px;

    }
    .index_f_upper input:hover{
        background-color: #3D2B94;

    }
    .index_f_lower{
       
        padding-left: 8%;
        
    }
    .index_e{
        padding: 5% 10%;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    }
    
    .index_e > div:nth-child(1){
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 15px;
        color: #868FAD;
       font-weight: 900;
    }
    .index_e > div:nth-child(2){
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        color: #3F4450;
        font-size: 40px;
        font-weight: bold;
    }
    .index_e > div:nth-child(3){
        display: grid;
        grid-template-columns: 32% 32% 32%;
        grid-template-rows: 500px;
        grid-gap:3%;
        color: #3F4450;
    
    }
    .index_e > div:nth-child(3) > div > a> img{
        width: 100%;
        border-radius: 6px;
        /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
        }
        .index_e > div:nth-child(3) > div > a>img:hover{
                   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
        }   

 .index_g{
     background-image: url("index_g.png");
     background-size: cover;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
 }   
 .index_g > div:nth-child(1){
     width: 40%;
     padding-left: 30%;
     text-align: center;
     /* border: 1px solid black; */


 } 
 .index_g > div:nth-child(1)>h1{
    font-size: 50px;
    color:#3F4450 ;
 }
 .index_g > div:nth-child(1)>p{
     font-size: 15px;
     color:#3F4450 ;
     padding-bottom: 30px;
 }
 .index_g > div:nth-child(1)>a>input{
     color: white;
     background:#FA4338;
     width: 35%;
     height: 40px;
     font-size: 17px;
     border-radius: 5px;
 }
 .index_g > div:nth-child(1) > a>input:hover{
    background: #E23C32;
 }
 .index_g > div:nth-child(2){
     display: grid;
    height: 550px;
     padding-top: 5%;
     grid-gap: 25px;
     padding-left: 10%;
     grid-template-columns: 21% 21% 21% 21%;
     grid-template-rows: 220px 220px;
     /* border: 1px solid black; */
 }
 
 .index_g > div:nth-child(2)>div{
     background:white;
     font-size: 15px;
     padding-left: 10%;
     padding-top: 10%;
 }
 .index_g > div:nth-child(2)>div:hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 a{
     text-decoration: none;
     color: black;
 }
 .index_h{
     width: 85%;
     margin: 10% ;
     margin-bottom: 1%;
     height: 600px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     
 }
 .index_h > div:nth-child(1){
     height: 100px;
     width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 60% 40%;
 }
 .index_h > div:nth-child(1) >div h1{
    color: #FA4338;
    font-size: 40px;
 }
 .index_h > div:nth-child(2){
     margin-top: 60px;
 }
 .index_h > div:nth-child(2) > a>span{
    color: #FA4338;
    margin-top: 5px;
    margin-bottom: 5px;   
 }
 .index_h > div:nth-child(2) > hr{
     background-color: #F4F4F4;
 }
 .index_h > div:nth-child(3){
     display: grid;
     grid-template-columns: 8% 8% 8% 8%;
     grid:40px;
     grid-gap: 10%;
 }
 .index_h > div:nth-child(3)>div{
     color: #868D9D;
     font-size:14px;
     line-height: 1.6;
     
 }
 .index_h > div:nth-child(3)>div>div:hover{
     color: red;
 }
 .footer{
     display: grid;
    
     background: #F6F6F9;
     grid-template-columns: 50% 50%;
     padding: 1%;
     color: #868D9D;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

 }
 .footer>div:nth-child(2){
     text-align: right;
 }
 .footer>div:nth-child(1){
     display: grid;
     grid-template-columns: 22% 22% 22% 22%;
     grid-gap: 1%;
     margin-left: 16%;
 }
 .footer>div:nth-child(1)>a>div{
    text-align: center;
 }
 .footer>div:nth-child(1)>a>div:hover{
    color: red;
 }
 .footer>div:nth-child(2){
     display: grid;
     grid-template-columns: 11% 11% 11%;
     grid-gap:1%;
     padding-left: 60%;
 }
 .footer>div:nth-child(2)>div>a>img{
     height: 20px;
 }
 i:hover{
    font-size:100px ;
 }
 #funny-line{
     width: 1%;
     height: 14px;
     float: left;
     background-color: #CDBBB9;
 }
 #beta-tag{
    border-radius: 14px;
    background: #d4d042;
    text-transform: uppercase;
    padding: 5px 8px 3px;
    color: #3f4450;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
}
   
    }