/* Contain Style for html /semantic element */

section {margin: 64px auto; width: 100%;}
h1 {
    font-family: var(--font1);
    font-size: clamp(22px, 15vw,32px);
    color: var(--blue);
    margin: 20px auto;
    padding: 0 clamp(10px, 16px,32px);
    text-shadow: 0px 0px 3px #000;
    text-align: center;

}

h2 {
    font-family: var(--font2);
    font-size: clamp(18px, 8vw, 28px);
    color: var(--card-bg);
    margin: 8px auto;
    /* text-shadow: 0px 0px 3px #000; */
    text-align: center;
	letter-spacing: 1px
}

/* h3 {
    font-family: var(--sectionHeadFont);
    font-size: 1.6em;
    letter-spacing: .5px;
    color: var(--card-background);
    margin: 10px auto;
} */

/* button {
    width: 100px;
    height: 30px;
    font-family: var(--textFont);
    cursor: pointer;
} */

a {color: var(--blue); text-decoration: underline; cursor: pointer;}

input, textarea, select {
    color: var(--grey);
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--grey);
    text-align: center;
}
input:hover, textarea:hover, select:hover{
    color: var(--blue);
}
input[type="file"], input[type="radio"] {
    display: none;
}
button {
    padding: 5px 25px;
}

/* @media only screen and (min-width: 500px) {
    h1 {width: 90%;}
    a, p, span, td, th, .error, li, i {font-size: 1.2em;}
    #slogan {font-size: 3em;}
    .sectionHead {font-size: 2em;}
    input, textarea, select {
        font-size: 1.4em;
    }
} */
/* @media only screen and (min-width: 900px) {
    button {width: 120px; height: 35px; font-size: 1em; font-weight: 900;}
    h1 {width: 80%;}
} */