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;
   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: #700105;
   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;
   text-align: center;
   justify-items: center;
}
.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  );
}

.cont3{
   display: flex;
    width: 83%;
     justify-items: center;
     text-align: center;
     margin-top: 4vw;
}

.cont4{
   border: 0.5vw solid  #541c1a;
   border-radius: 1vw;
   width: 30vw;
   margin: 1vw;
}
.title2{
   width: 28vw;
   background-color: #541c1a;
   padding: 1vw;
}
.link3 a{
   text-decoration: none;
   color: black;
   font-size: 1.5vw;
   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;
}
.foot1{
 text-align: right;
 bottom: 0;
 right: 0;
}
.link4{
   text-decoration: none;
   color: darkblue;
   font-size: 1.5vw;
   font-weight:bold;
   padding: 0.75vw;
   
}
.link4:hover{
   color: #f5225a;
   text-decoration: underline;
   font-weight: bolder;
}




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







#asidebar{
   float: right;
   width: 17%;
   margin-right: 5vw;
   margin-left: -25vw;
   border: 1vw double #800804;
   border-radius: 0.5vw;
}
#asidebar{
   position: sticky;
   top: 9vw;
}
fieldset{
   border: 2px solid #20d4b6;
   margin: 1vw;
   border-radius: 0.5vw;
}
.form1{
   font-size: 1.5vw;
   text-decoration: none;
   color:#288a79 ;
}
.form2:hover{
   color: blue;
   text-shadow: 0.2vw 0.2vw 1vw red;
}

.input1{
   width:12vw;
   height: 1.5vw;
   border: 0.25vw solid #22f542;
   border-radius: 1vw;
}
.input1:hover{
   border-radius: 0.5vw;
   border: 0.25vw solid #122da3 ;
}

.button1{
   width: 10vw;
   border: 0.2vw solid #512475;
   background-color: #512475;
   padding: 0.5vw;
   font-size: 1.2vw;
   color: white;
   border-radius: 1.5vw;
}



}
.label1{
   font-size: 1.2vw;
   font-weight: 600;
}

.label11{
   font-size: 1.4vw;
  color:blue ;
  text-overflow: clip;
  cursor: pointer;
}

.footer1{background-color: #6e2e2c;
   padding: 2vw;
align-content: center;
text-align: center;

}

.footer2{
   background-color: #401a18;
   color: white;
   font-size: 1.8vw;
   font-weight: 500;
   padding: 1vw;
}
.footer3{
   width: 85%;
   color: white;
   font-size: 1.5vw;
   opacity: 85%;
   
}

/*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;
}
#asidebar{
   display: none;
}
.cont3{
   justify-content: space-between;
}
.cont4{
   width: 40vw;
}
.title2{
   width: 38vw;

}
.link3 a{
   font-size: 2vw;
}
}
*/