@font-face {
  font-family: Handjet;
  src: url("Handjet/Handjet-VariableFont_ELGR\,ELSH\,wght.ttf");
}
@font-face { font-family: JosefinSans; 
  src: url("Josefin_Sans/JosefinSans-VariableFont_wght.ttf"); }

body{
  background-color: black;
  /* background: radial-gradient(at top right, purple 25%, black 100%); */

}

.Heading{
  display: flex;
  justify-content: center;
  font-size: 7vw;
  font-family: Handjet;
  color: #ffffff;
}


.Heading img{
  height: 2em;
  align-self: center;
}


/* form{
  display: flex;
  justify-content: center;
} */

.forms{
  display: flex;
  justify-content: center;
}



form label, form input, form button {
  display: block; 
}

form label{
  color: #ffffff;
}

.btn {
  background-color: #ffffff;
  color: #000000;
  border: none;
  padding: 0.8vw 1.3vw; /* Using viewport width (vw) for padding */
  border-radius: 0.8vw; /* Using viewport width (vw) for border-radius */
  cursor: pointer;
  font-family: JosefinSans;
  font-size: 1.5vw; /* Using viewport width (vw) for font-size */
  margin-top: 0.3vw; /* Using viewport width (vw) for margin-top */
  margin-bottom: 2vw;
  box-shadow: rgba(182, 66, 245, 0.5) -0.3vw -0.3vw 0.1vw 0.1vw  inset; /* Using viewport width (vw) for box shadow */
  max-width: 90vw; /* Optional: Limit the maximum width */
  transition: transform 0.3s ease; /* Apply transition to transform property */
}

.btn:hover {
  background-color: #f3dfff;
  transform: translateY(-5px); /* Move the button upwards slightly on hover */
}

.forms label {
  font-family: JosefinSans;
  font-size: 2vw;
}

input {
  /* Add padding */
  padding: 1vw;
  /* Add margin */
  margin-bottom: 0.1vw;
  /* Change font size */
  font-size: 1vw;
  /* Change border */
  border: none;
  /* Change border radius */
  border-radius: 0.5vw;
  /* Change width */
  width: 23vw;
}