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;
    

}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 700,
  'GRAD' 1,
  'opsz' 48,
  'font-size' 50vw
}


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

.bar {
  width: 100%;
  height: 0.5vw;
  background-color:black;
  margin: 2px 0;
  padding: 0.35vw;
}

.menu-icon:hover.navbar{
   display: flex;

}
.navbar{
   display: none;
   background-color: #34eb83;
   padding: 5vw;
   position: absolute;
}
.navbar li{
   margin: 2vw;
   width: 100%;
   text-align: left;
   list-style-type: none;
}


.link21{

color: black;
text-decoration: none;
font-size:4vw;
font-weight: 500;
padding: 1vw;
width: 70%;
height: 3vw;
margin: 1vw;
}
.link21:hover{
   color: blue;
}

.user-icon{
   display: none;
   z-index: 11;
}
.logbar li a{
font-size: 3vw;
color: black;
text-decoration: none;
padding: 1vw;
margin: 0.5vw;
list-style-type: none;
}
.logbar{
   background-color: #6cbeeb;
   padding: 2vw;
   list-style-type: none;
   display: none;
   z-index: 12;

}

.menu1{
   font-size: 5vw;
   padding-bottom: 1vw;
   cursor: pointer;
}





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








.cont4{
   border: 0.5vw solid  #541c1a;
   border-radius: 1vw;
   width: 60vw;
   margin: 4vw;
}
.title2{
   width: 58vw;
   background-color: #541c1a;
   padding: 1vw;
}
.link2{
   text-decoration: none;
   color: white;
   font-size: 1.5vw;
 
}
.link3 {
   text-decoration: none;
   color: black;
   font-size: 1.5vw;
   margin-top: 1vw;
   margin-bottom: 1vw;
    line-height: 1.5vw;
    font-weight: 550;
    white-space: normal;
  
}

.link3{
   text-align: left;
   padding: 1.2vw;
}
.link3 > a::before{
     content: "  ";
     content: <br>;
            color: blue;
}

.cont41{
   border: 0.5vw solid  #541c1a;
   border-radius: 1vw;
   width: 40vw;
   margin: 1vw;
}
.title21{
   width: 38vw;
   background-color: #541c1a;
   padding: 1vw;
}
.inline1{
   display: flex;
   justify-content: space-evenly;
}
.link31{
   width: 20vw;


}
.link41{
   width: 31vw;
   border: 0.2vw solid #4a0102;
   border-collapse:collapse ;
   text-align: center;
   background-color: #690c0d;
   color: white;
   padding: 0.5vw;
}

.link4{
   text-align: center;
   color: #1c9e18;
   text-decoration: none;
   margin-left: 6vw;
}
.link4:hover{
   color: #0707f7;
   text-decoration: underline;
   text-shadow: 0.25vw 0.25vw 0.5vw #f5424b;
}

.table3{
   border-collapse: collapse;
   width: 100%;
   border: 0.2vw solid #700206;

}
.table31 {
   border: 0.2vw solid #700206;
   padding: 1vw;

}





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