/* FIRST SETTINGS*/

body {
    background-color: #00040D;
    font-family: 'Times New Roman', Times, serif;
    font-size: 25px;
    text-align: center;
}



/* APPLICATION FORM: STYLING*/

.container {
    align-items: center;
    background-color: #FFFAFA;
    border-radius: 12px;
    box-shadow:  12px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    height: 1000px;
    margin: 3.5em auto;
    padding: 2em 1.5em;
    width: 800px;
}


form {
    align-items: flex-start;
    display: flex;
    flex-flow: column wrap;
    max-height: 950px;
    justify-content: center;
    margin: 0.5em auto;
    padding-left: 0.7em;
    max-width: 790px;
}

input, label, legend {
    padding: 0.5em 0;
}

input, textarea {
    background-color: #353839;
    color: whitesmoke;
    font-size: 18px;
}

button {
    background-color: #050301;
    color: #FFFAFA;
    border-radius: 3px;
    padding: 0.5em;
    margin: 1em auto;
    text-transform: uppercase;
    width: 40%;
}

input.name, input.email, .selector-position {
    border-radius: 7px;
    margin-bottom: 1.5em;
    width: 100%;
}

fieldset, textarea {
    border-radius: 5px;
    margin-bottom: 1.5em;
}

.legends-styling {
    font-size: 20x;
    font-weight: 800; 
}

.selector-position {
    background-color: #353839;
    color: whitesmoke;
    font-size: 18px;
   
}

label.name, label.email, label.position {
    color: #2E183B;
    font-weight: 800;
    text-transform: capitalize;
}

.radio-label {
    margin-left: 0.15rem;
    margin-right: 0.5rem;
}


/* PSEUDO-CLASSES*/

input:first-of-type {
    background-color: #050301;
    color: white;
    opacity: 1;
    font-size: 20px;
}

input:focus, textarea:focus {
    border: #1414e2 solid 2px;
    outline: none;
}

input:valid, select:valid, textarea:valid {
    border: green solid 2px;
}

input:invalid, select:invalid, textarea:invalid {
    border: red solid 2px;
}

input::placeholder,
textarea::placeholder {
    color: rgb(197, 196, 196);
    font-size: 20px;
    opacity: 1;
}

input[type="radio"] {
    accent-color: #36454F;
    width: 1em;
    height: 1em; 
    vertical-align: middle;
}

.radio-group input[type="radio"]:checked {
    border: #FFFAFA solid 2px; 
    background-color: midnightblue;
    box-shadow: inset 0px 2px 3px #050301;
}

.radio-group input[type="radio"]:checked + label{
    color: darkslategray;
}

button:hover {
    background-color: #FFFAFA;
    color: #050301;
}