*{
    margin: 0px;
    padding: 0px;
}
.header{
    margin-top: 10px;
    height: 5vh;
    /* background-color: pink; */
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 1rem;

}
.d11{
    height:3vh;
    width: 30vh;
    background-color:rgba(215, 228, 149, 0.668);
    
   
    align-content: center;
    text-align: center;
    font-size: 23px;
    font-family: 'Times New Roman', Times, serif;
    color: rgb(95, 95, 95);

}


.d12{
    height:3vh;
    width: 30vh;
    /* background-color: yellow; */
    border-bottom-width: 3px;
    border-color: rgb(95, 95, 95);
    border-style: solid;
    align-content: center;
    text-align: center;
    font-size: 23px;
    font-family: 'Times New Roman', Times, serif;
    color: rgb(95, 95, 95);

}


.body{
    height: 70vh;
    /* background-color: rgba(236, 33, 67, 0.105); */
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.body11{
    height: 85vh;
    width: 50vw;
    display: flex;
    align-items: center;
    justify-content: right;
    gap: .7rem;
    /* background-color: rgb(161, 84, 84); */
}
.body12{
    height: 85vh;
    width: 50vw;
    
    /* background-color: rgb(161, 84, 84); */
}
.body1{
    height: 50vh;
    width: 27vh;
    background-color: brown;
    background-image: url("firstone.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 60%;
}
.body1:hover{
    opacity: 100%;
    opacity: 100%;
   
  animation: "anno1" .75s linear  infinite;
  animation-direction: alternate;
}

.body2{
    height: 25vh;
    width: 18vh;
    background-color: brown;
    background-image: url("thirdone.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 60%;
}
.body2:hover{
    opacity: 100%;
   
    animation: "anno" .75s linear  infinite;
    animation-direction: alternate;
}
.body4{
    height: 25vh;
    width: 18vh;
    background-color: brown;
    background-image: url("fourthone.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 60%;
    

}
.body4:hover{
    opacity: 100%;
    opacity: 100%;
   
    animation: "anno" .75s linear  infinite;
    animation-direction: alternate;
}
.body3{
    height: 25vh;
    width: 9vh;
    background-color: brown;
    background-image: url("secondone.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    opacity: 60%;
}
.body3:hover{
    opacity: 100%;
  opacity: 100%;
   
    animation: "anno" .75s linear  infinite;
    animation-direction: alternate;

}
.text{
    margin-top: 20vh;
    margin-left: 20px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    font-size: 20vh;
    height: 10vh;
    position: absolute;
    /* background-color:rgba(165, 42, 42, 0.649); */
    
}
.text2{
    background-color: rgba(152, 40, 40, 0);
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    font-size: 20vh;
    position:absolute;
    height: 10vh;
    margin-left: 20vw;
    margin-top: 31vh;
    
    
}
.text3{
    margin-top: 40vh;
    margin-left: 25px;
   
    width: 17vw;
    font-family: 'Times New Roman', Times, serif;
    position: absolute;
    
    
}


#input{
    margin-top: 20px;
    width: 19vw;
    height: 5vh;
    background-color: rgb(230, 229, 229);
    border: none;
    text-align: center;
}
#pass{
    margin-top: 30px;
    width: 19vw;
    height: 5vh;
    background-color: rgb(230, 229, 229);
    border: none;
    text-align: center;
}
#input1{
    margin-top: 20px;
    width: 19vw;
    height: 5vh;
    background-color: rgb(230, 229, 229);
    border: none;
    text-align: center;
}
#pass1{
    margin-top: 30px;
    width: 19vw;
    height: 5vh;
    background-color: rgb(230, 229, 229);
    border: none;
    text-align: center;
}
p{
    font-size: 3rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   
}
#button1{
    border: none;
    height: 6vh;
    border-radius: 2rem;
    width: 12vh;
    margin-top: 20px;
    
    color: white;
    background-color: brown;
}
#button2{
    border: none;
    height: 6vh;
    border-radius: 2rem;
    width: 12vh;
    margin-top: 20px;
    
    color: white;
    background-color: brown;
}
#rel1{
  
    color: green;
    /* background-color: brown; */
}
#rel2{
  
    color: green;
    /* background-color: brown; */
}

.form{
    height: 35vh;
    /* background-color: rgb(217, 217, 215); */
    display: flex;
    gap: 37rem;
    justify-content: right;
    text-align: center;
    
}
.form1{
    height: 38vh;
    background-color: rgba(218, 219, 220, 0.365);
    width: 35vh;
    border: none;
    border-radius: 2rem;
    justify-items: center;
    text-align: center;
    margin-left: 20px;
    padding: 2rem;
    position: absolute;
    margin-top: 500px;
}

.form2{
    
    
     height: 36vh;
    background-color: rgba(218, 219, 220, 0.365);
    width: 35vh;
    border: none;
    border-radius: 2rem;
    justify-items: center;
     padding: 2rem;
     margin-right: 20px;
   
}


@keyframes anno1{
    to {
     height: 25vh;
    width: 18vh;
}}
@keyframes anno{
    to {
        height: 40vh;
    width: 25vh;}
}
.note{
    font-size: smaller;
    margin-right: 68px;
}