@import url('foot.css');
@import url('head.css');


 
.container{
  
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  background: var(--backgroundd);
  height: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  width: fit-content;
  
}

.container::before{
  
  position: absolute;
  width: 520%;
  height: 520%;
  content: '';
  background-image: conic-gradient(transparent, transparent, transparent, #4c00ff);
  animation: rotate_border 6s linear infinite;

}
.container::after{
  
  position: absolute;
  width: 520%;
  height: 520%;
  content: '';
  background-image: conic-gradient(transparent, transparent, transparent, #00ccff);
  animation: rotate_border 6s linear infinite;
  animation-delay: -3s;
}
@keyframes rotate_border{
  0%{
      transform: rotate(0deg);
  }
  100%{
      transform: rotate(360deg);
  }
}
.con{
  position: relative;
  content: '';
  background: var(--backgroundd);
  inset: 5px;
  padding: 50px 40px;
  z-index: 10;
  color: #00ccff;
  margin-right: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  border-bottom-right-radius: 40px;
  border-top-left-radius: 50px;

} 

.container h3{
  display: inline-flex;
  gap: 10rem;
  margin-left: 30px;
}



#container th{
    font-size: large;
    text-align: center;
}
label, legend, strong{
  color: white;
padding: 10px;
}
@media (max-width: 568px) {
  .con {
    width:  23rem;
    
  }
  .container{
    width: 23.5rem;
   height: 88rem;
  }
}
h1{
  color: #00ccff;

}
#form{
  text-align: left;
  background-color:var(--backgroundd);
  height: fit-content;
  width: fit-content;
  color: #000000;
  font-weight: bolder;
}
#form input{
  margin-bottom: 20px;
  border: 2px solid #5876fd;
  border-bottom-right-radius: 9px;
  
}
#form textarea{
  margin-bottom: 20px;
  border: 2px solid #5876fd;
  border-bottom-right-radius: 9px;
  border-top-left-radius: 9px;
  margin-left: 10px;
}
#form h3{
 text-align: left;
 margin: 0px;
 
}
@media (max-width: 668px) {
  .container {
    max-width: 600px;
    height: fit-content;
    margin-left: auto;
    margin-right: auto;
    
  }
  .con{
    max-width:  600px;
    height: fit-content;
    
  }
}
.container{
  position: relative;
  border-bottom-right-radius: 40px;
  background: #040717;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  height: fit-content;
    width: fit-content;

overflow: hidden;
}
.con{
  min-width: 400px;
}