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;
}






.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;
}


.cont4{
   border: 0.5vw solid  #541c1a;
   border-radius: 1vw;
   width: 70vw;
   margin: 4vw;
}
.title2{
   width: 68vw;
   background-color: #541c1a;
   padding: 1vw;
}
.link2{
   text-decoration: none;
   color: white;
   font-size: 2.5vw;
 
}
.link3 a{
   text-decoration: none;
   color: black;
   font-size: 1.85vw;
   margin-top: 1vw;
   margin-bottom: 1vw;
    line-height: 1.5vw;
    font-weight: 550;
  
}
.link3 a:hover{
   color: #910c12;
   font-weight: 800;
   text-shadow: 0.2vw 0.2vw 1vw #f249a6 ;
}
.link3{
   text-align: left;
   padding: 1.2vw;
}
.link3 > a::before{
     content: "  ";
     content: <br>;
            color: blue;
}









.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;
}
*/