html {
    font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
    font-size: 14px;
}
body{
    margin: 0;
    background-color: var(--eggshell);
}
footer{
    padding-top: 4em;
    margin: 0;
    background-color: var(--dark-magenta);
    text-align: center;
}
h1, h2, h3, h4, h5, h6{
    color: var(--darker-magenta);
}
a{
    color: var(--dark-magenta);
    font-weight: bold;
}
a:hover{
    text-decoration: underline;
    color: #d455bf;
    font-weight: bold;
}
p{
    color: var(--jet);
    line-height: 1.5em;
}
b{
    color: var(--jet);
}
ol{
    line-height: 2em;
}
ul{
    line-height: 2em;
}
li{
    color: var(--jet);
}
table{
    background-color: transparent;
    width: 100%;
    padding-top: 0;
    padding-bottom: 1em;
    border-collapse: collapse;
}
table th{
    font-size: small;
    color: var(--jet);
    text-align: left;
    padding-right: 1em;
}
table td{
    text-align: left;
    font-size: small;
    line-height: 2em;
    color: var(--jet);
    padding-left: 0;
    padding-top: .5em;
    padding-right: 1em;
    padding-bottom: .5em;
    min-width: 10%; 
}
tr {
    border: solid 1px var(--eggshell);
    border-left: none;
    border-top: none;
    border-right: none;
}
.td-align-left{
    text-align: left;
}
select{
    font-size: small;
    background-color: white;
    border: 1px solid;
    border-color: lightgray;
    border-radius: var(--border-radius);
    margin-bottom: .5em;
    padding: .5em;
}
label{
    color: var(--night);
    line-height: 1.5em;
}
input{
    font-size: inherit;
    color: var(--jet);
    background-color: white;
    text-align: left;
    border: solid 1px;
    border-color: lightgray;  
    border-radius: var(--border-radius);
    margin-bottom: .5em;
    padding: .5em;
    
}
input:focus-visible{
  outline: 1px solid;
  outline-color: var(--dark-magenta); 
  border-radius: var(--border-radius);
    
}
input:valid + span::after {
    position: absolute;
    content: "✓";
    color: green;
    padding-left: 5px;
}
input:invalid + span::after {
    position: absolute;
    content: "*";
    color: red;
    padding-left: 5px;
}
input[readonly] {
    border: none;
    font-weight: bold;
}
/* 
input:valid {
    background-color: palegreen;
}
input:invalid {
    background-color: lightpink;
} */
textarea{
    font-family: inherit;
    font-size: inherit;
    color: #352208;
    text-align: left;
    line-height: 1.5;
    border: 1px solid;
    border-color: gray;  
    border-radius: var(--border-radius);
    margin-bottom: 1em;
    padding: .4em;
    width: 30%;
    height: 10em;
    resize: none;
}
textarea::placeholder {
    font-family: inherit;
    font-size: 14px;
}
textarea:focus-visible{
  outline: 1px solid;
  outline-color: var(--dark-magenta); 
  border-radius: var(--border-radius);
}
button {
    cursor: pointer;
}