body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #cfc0c1;
    text-align: center;
  }
  .head2{
   display: inline-flex;
   width: 85%;
    justify-content: space-between;
    justify-items: center;
    background-color: #784c51;
    margin: 6vw;
    height: 12vw;
    border: 0.2vw solid darkred;
    border-radius: 2vw;
  }
.title{
   margin-top: -2vw;
   margin-left: 20vw;
   font-size: 4vw;
   color: white;
   text-shadow: 1vw 0.5vw 0.5vw darkred;
}
.site{
   font-size: 2.5vw;
}
.logo{
   height: 10vw;
   width: 10vw;
   background-color: white;
   margin: 1vw;
   border: 0.2vw solid  #db606e ;
   border-radius: 5vw;
   box-shadow: 0.2vw 0.1vw 01vw 0.2vw blue;
}

.logo2{
   height: 10vw;
   width: 10vw;
   border-radius: 5vw;
}


.nav1{
   position: sticky;
   top: 1vw;
}


.navigation{ 
    display: inline-flex;
   width: 83%;
    justify-content: space-evenly;
    justify-items: center;
    background-color: #db606e;
    padding: 1.5vw;
    border-radius: 2vw;
    

}





.link1{
   text-decoration: none;
   font-size: 1.5vw;
   color: white;
}

.link1:hover{
   background-color: #de7c52;
   color: #a82d11;
   padding: 1.3vw;
   border-radius: 0.5vw;
   box-shadow: 0.1vw 0.1vw 1vw 0.2vw blue;
   font-weight: 700;
}

.cont1{
   display: inline-flex;
   width: 83%;
    justify-content: space-between;
    justify-items: center;
    padding: 1vw;
    margin-top: 1vw;

}
.link2{
   text-decoration: none;
   color: white;
   font-size: 2vw;
 
}
.cont2{
   padding: 2vw;
   height: 5vw;
   width: 22vw;
   border-radius: 1vw;
}
.cont2:hover{
   border: 0.25vw solid #2c9ee6;
   border-radius: 1.5vw;
   box-shadow: 0.2vw 0.1vw 1.5vw 0.5vw blue;
   text-shadow: 0.2vw 0.1vw 1vw red;
   color: #4ceaf5;

}


.content1{
   margin-top: 2.5vw;
}

.bg1{
   background: linear-gradient(to right,#566d91   , #6242ad  );
}
.bg2{
   background: linear-gradient(to right, #58c46a  ,  #89c458 );
}
.bg3{
   background: linear-gradient(to right, #c46158  ,  #c48458 );
}
.bg4{
   background: linear-gradient(to right, #b2c458  ,  #92c458 );
}
.bg5{
   background: linear-gradient(to right,  #5cc458 , #278c4b  );
}
.bg6{
   background: linear-gradient(to right, #72b5a7  ,  #50bdc7 );
}
.bg7{
   background: linear-gradient(to right, #27647a  , #6d99cf  );
}
.bg8{
   background: linear-gradient(to right, #394885  ,  #716bb0 );
}.bg9{
   background: linear-gradient(to right, #44157a  , #a35fad  );
}





.table1{
   width: 90%;
   text-align: center;
   margin-top: 5vw;
   border: 0.4vw double blue;
}
.table1 tr{
padding: 1vw;

}
.table1 tr td{
   margin: 3vw;
   padding:1.5vw;
     background-color: #4f0205;

}


.table1 tr td a{
   color: #ffffff;
    -webkit-text-stroke: 1px #fff;
   font-size: 2vw;
   text-decoration: none;
   
   width: 10vw;
}
.table1 tr td a:hover{
   color: white;
    -webkit-text-stroke: 0px #000;
   font-size: 2.2vw;
   font-weight: 550;
   text-shadow: 0.5vw 0.25vw 0.8vw cyan;
   padding: 2vw;
   background-color: #0a0a0a;
   box-shadow: 0.25vw 0.25vw 1vw 0.25vw #f52a34;
}

.conte1{
   width: 80%;
   text-align: center;
   justify-content:space-around;
   margin-top: 5vw;
   border: 0.25vw solid #1a0663 ;
   border-radius: 2.5vw;
   background-color: #6b45f5;
   box-shadow: 0.25vw 0.25vw 2vw 0.5vw #8a5625;
}
.title2{
   background-color: #1a0663;
   padding: 2vw;
   color: white;
   font-size: 2vw;
   border-radius: 2vw;
   text-transform: uppercase;
}
.conte2{
   color: white;
   font-size: 1.3vw;
   padding: 1.5vw;
   text-align: left;
}
.title3{
   font-size: 1.5vw;
   font-weight: 600;
   text-decoration: underline;
   text-shadow: 0.25vw 0.25vw 0.5vw #ad0707;
}

.foot2{
   background-color: #690703;
   margin-top: 5vw;
   padding: 3vw;

}
.table2 tr th {
   color: white;
   text-transform: uppercase;
   font-size: 2vw;
   font-weight: 550;

padding: 1.5vw 6vw;
text-align: left;
text-shadow: 0.25vw 0.25vw 0.5vw #034c99;
text-decoration: underline;
}
.table2 tr td {

padding: 0.8vw 6vw;
text-align: left;
}
.table2 tr td a{
   color: white;
   font-size: 1.2vw;
   text-decoration: none;
   text-transform: uppercase;

}
.table2 tr td a:hover{
   color:#5df5d1;
   text-shadow: 0.25vw 0.25vw 1vw white;
   text-decoration: underline;
   font-size: 1.3vw;
}
.foot3{
   background-color: #3b0204;
   padding: 1vw;
   color: white;
   font-size: 2vw;
   text-shadow: 0.25vw 0.25vw 0.5vw #00298a;
}











/*from here i am going to use media querry*/
/*@media only screen and (max-width: 1080px) {
  body {
    background-color: lightblue;
  }

  .logo{
   display: none;
}

.head2{
width: 100%;
height: 20vw;
margin: 0;
margin-top: 3vw;

}

.title p{
   text-align: center;
   margin: 0;
   padding: 3vw;
   padding-left: 10vw;
   padding-top: 7vw;
   font-size: 5vw;
}
.navigation{
   width: 95%;
   height: 3.5vw;
}

.menu-icon {
  display: flex;
  flex-direction: column;
  width: 3vw;
  height: 0.8vw;
  cursor: pointer;
}


.link1{
   display: none;
}
.menu1{
   display: ;
}

.user-icon{
   display:flex;
}
.menu-icon:hover .navbar {
   display: block;
}
.user-icon:hover .logbar{
   display: block;
}

.cont2{
   border-collapse: collapse;
   margin: 0;
   font-size: 3vw;

}
.cont1{
   border-collapse: collapse;
}
.link2{
   border-collapse: collapse;
}*/