.ms-madi-regular {
      font-family: "Ms Madi", cursive;
      font-weight: 400;
      font-style: normal;
}
      .triodion-regular {
          font-family: "Triodion", system-ui;
          font-weight: 400;
          font-style: normal;
}

h1{
  color:#A1009C;
  border: 3px solid black;
  padding: 10px;
  display: inline-block;
  font-size: 58px;
}

.background-image{
  width: 100%;
  height: auto;
  opacity: 0.5;
  z-index: -1;
  }

.container{
  position: relative;
  width: 100%;
  max-width: 600px;
}

.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 24px;
  text-align: center;
  z-index: 2;
}

.form-container {
  padding: 10px;
  border-radius: 5px 5px;
  box-shadow: 0px 20px 60px rgba (65, 50, 100, 0.08);
  margin-bottom: 30px;
}

.instructions {
  padding: 16px;
  border: 1px solid black;
  box-shadow:5px 5px rgba(0, 0, 0, 0.2);
  background:transparent;
  width: 45%;
  font-size: 16px;
  border-radius: 50px;
  line-height: 20px;
}

.submit-button {
  margin-left: 10px;
  background:transparent;
  border: 1px solid black;
  border-radius: 50px;
  padding:5px;
  font-size: 16px;
  width: 85px;
  outline: none;
}

.hint{
  font-size: 13px;
  line-height: 1.5;
  margin-top:5px;
  opacity: 0.6;   
  color: black;
  padding-right: 90px;

}
.hidden{
  display:none;
}
footer{
  text-align: center;
  font-size: 20px;
  margin-top: 30px;
  color: black;
}

a{
color:#A1009C;
}

.rotate{
  animation: spin 5s linear 1s;
}
 @keyframes spin {
   from {
     transform: rotate(0deg);
   }

   to {
     transform: rotate(360deg);
   }
 }

 em{
  color:#A1009C;
  font-size: 30px;
 }