@font-face {
  font-family: 'Libre Baskerville';
  src: url('/fonts/libre-baskerville.regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



body {
     color: hsl(30,20,33);
    background-image: url('golden.png');
    background-color: #C2BFBC;
    font-family: "Libre Baskerville", Courier, monospace; /*Implementation of requirement 4 a typeface gotten from fonts.google.com*/
    text-align: center;
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: 35%, 35%;
    background-position: 10% 1%;
    background-attachment: fixed;
}

fieldset{
    color:silver;
    background-color: none;
    background-image: url("black_metal.png");
    background-size: 100%, 50%;
    letter-spacing: 0.2em;
    width: 280px;
    margin-top: 230px;
    margin: auto;
    height: 310px;
    border-radius: 7px;
    border: 1px solid silver;
        
    
}

label {
    
    margin-top:10px;
    
}


form {

    background-color: lightgray;
    background-image: url("black_metal.webp");
    background-size: 70%, 50%;
    margin: auto;
    margin-top:200px;
    width:340px; 
    height: 340px;
    text-align: center;
    font-weight: bold;
    border-radius: 20px;
    padding-top: 20px;
    box-shadow: 6px 0 6px rgba(0,0,0, .5);

}



input{
    margin:auto;
    margin-top:10px;
    margin-bottom:10px;
}

input, textarea, select {
 
  background-color: grey;   /* base background */

  font-weight: bold;
  border: 1px solid #ccc;     
  border-radius: 6px;
  padding: 6px;
  font-size: 16px;
  color: #000;                 /* ensure text and cursor are visible */
  caret-color: #000;    caret-color: #000;         /* make the blinking cursor black */
  transition: background-color 0.2s ease, border-color 0.2s ease;
}


legend {
    
    padding: 0 0.5rem;       /* keeps space around text */
    background: transparent; /* lets your texture show through */
    position: relative;      /* makes sure it renders above border */
    z-index: -1;              /* ensures border line won't overlap text */
    
}

button {
    font-size: 20px;
    font-family: "Libre Baskerville", Courier, monospace; /*Implementation of requirement 4 a typeface gotten from fonts.google.com*/
    font-weight: bold;
    margin: auto;
    width: 120px;
    height: 30px;

}

.error{
    color: #f95807;
}

.success{
    color: green;
}