:root {
    --form-background-color-1:var(--gunmetal-light);
    
    --fieldset-border-color-1: black;
    --legend-font-size-1:1.5rem;
    --label-color-1: white;

    --input-field-text-color-1: black;
    --field-width: 20rem;
    --field-text-size-1: 1rem;
    --select-text-color-1: black;

    --required-color: var(--crayola-red);

}
main {
    -height: max-content;
    min-height: 75vh;
}

form {
    max-width:80%;
    -background-color: var(--form-background-color-1);
}
fieldset {
    display: flex;
    flex-direction: column;
    -border: 0.25rem solid var(--fieldset-border-color-1);
    border:none;
    padding:1rem;
}
legend {
    font-size: var(--legend-font-size-1);
    font-weight: bold;
    color: var(--dark-turqoise);
    text-align: left;
    margin:0 0 1rem 0;
}
fieldset label {
    color: var(--label-color-1);
}

select {
    cursor: pointer;
}
form-field {
    display:flex;
    flex-direction: column;
    justify-items: flex-start;
}
input, select, textarea {
    width:var(--field-width);
    padding: 0.3rem 0.4rem;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    font-size: var(--field-text-size-1);
    background-color: hsl(0 0% 110% / .5);
    font-family: inherit;
    border:none;
}
.info {
    font-size:calc(var(--field-text-size-1)*0.9);
    color: var(--light-orange);
}

select{
    color: var(--select-text-color-1);
    text-align: center;
    width:max-content
}
input, textarea {
    color: var(--input-field-text-color-1);
}
textarea {
    resize: vertical;
    min-height: 8rem;
}
.req {
    color: var(--required-color);
}  
button[type="submit"] {
    margin: 1rem 0 0 0;
    width: 20rem;
    padding: 0.5rem 0.5rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--wine);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
  

  
input:user-invalid, select:user-invalid, textarea:user-invalid {
    border:3px solid red;
}
.hidden {
    display: none;
}
  
.flash {
    animation: flash-border 0.15s ease-in-out 4;
}

#msg-info.warning {
    color: var(--required-color, red);
    font-weight: bold;
}

@keyframes flash-border {
    0%   { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.8); }
    50%  { box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}