/* 
    http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ---------- CUSTOM STYLES ---------- */
:root{
    /* Basic Theme Colors */
    --red: #bf3636;
    --orange: #d04936;
    --yellow: #ffcc14;
    --green: #5a5a23;
    --blue: #303464;
    --pink: #fe4b7a;
    --purple: #741a60;
    --brown: #40130e;

    /* Data Visualization Colors - 12-bit rainbow */
    --dv-fuchsia: #817;
    --dv-red: #a35;
    --dv-pink: #c66;
    --dv-orange: #e94;
    --dv-yellow: #ed0;
    --dv-lime: #9d5;
    --dv-mint: #4d8;
    --dv-teal: #2cb;
    --dv-lt-blue: #0bc;
    --dv-med-blue: #09c;
    --dv-dk-blue: #36b;
    --dv-purple: #639;

    /* Text & Other Neutral Colors */
    --white: #fff;
    --lt-gray: #eaeaea;
    --med-gray: #555;
    --dk-gray: #222;
    --black: #000;

    /* Font Stack */
    --fonts: Raleway, Arial, sans-serif;

    /* Shadows */
    --box-shadow-sm: -3px 3px 7px var(--med-gray);
    --box-shadow-lg: -6px 6px 10px var(--med-gray);

    --filter-shadow-sm: drop-shadow(-3px 3px 7px var(--med-gray));
    --filter-shadow-lg: drop-shadow(-6px 6px 10px var(--med-gray));
}

body{
    box-sizing: border-box;
    background-color: var(--lt-gray);
    font-family: var(--fonts);
    line-height: 1.35;
    color: var(--dk-gray);
    font-size: 1rem;
}

/* ----- LINK STYLES ----- */
a{
    display: block;
    padding: 16px;
    color: var(--dk-gray);
}

a:hover{
    text-decoration-color: var(--dv-teal);
}

/* ----- SKIP LINK STYLES FROM WEB-AIM ----- */
#skip{
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#skip:focus{
	position: static;
	width: auto;
	height: auto;
	display: block;
	font-size: 1.1rem;
	font-weight: bold;
    color: var(--dk-gray);
	outline: 2px solid var(--dv-fuchsia);
    margin-bottom: 4px;
}

header, footer{
    padding: 2rem 1rem;
    background-color: var(--white);
    width: calc(100% - 2rem);
    max-width: calc(1200px - 2rem);
    box-shadow: var(--box-shadow-sm);
}

header{
    margin: 0 auto 2rem auto;
}

h1{
    font-size: 2em;
    margin: 0;
}

h1, h2{
    grid-column: 1/-1;
    text-align: center;
    font-weight: bold;
}

h2{
    font-size: 1.75rem;
    margin: 0.25rem;
}

main{
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 2rem 1rem;
}

main > p{
    grid-column: 1/-1;
    background-color: var(--white);
    box-shadow: var(--box-shadow-sm);
}

section{
    display: block;
    width: calc(100% - 2rem);
    max-width: calc(600px - 2rem);
    min-height: 300px;
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--white);
    box-shadow: var(--box-shadow-sm);
}

p{
    padding: 1rem; 
    font-size: 1.2rem;
    max-width: 65ch;
    margin: 0 auto;
}

.hidden{
    visibility: hidden;
}

/* For hiding content from screen readers in an accessible way */
.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

pre{
    font-family: monospace;
    font-size: 1rem;
    background-color: var(--lt-gray);
    padding: 0 8px;
    margin: 16px 0;
    overflow: scroll;
}

#form p, section p:first-of-type{
    border: none;
    line-height: 1.35;
    font-size: 1.2rem;
}

section p:last-of-type{
    border-top: 2px solid var(--dv-lt-blue);
    font-size: 1rem;
    line-height: 1;
}

form{
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    /*  The CSS property below is not supported in all browsers  */
    accent-color: var(--dv-teal);
}

button, input[type="submit"]{
    display: block;
    margin: 32px auto 16px auto;
    background-color: var(--dv-teal);
    border: none;
    outline: none;
    color: var(--dk-gray);
    padding: 0.75rem;
    font-family: var(--fonts);
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: var(--box-shadow-lg);
    height: auto;
    width: fit-content;
}

button:hover, input[type="submit"]:hover{
    box-shadow: var(--box-shadow-sm);
}

button:focus, input[type="submit"]:focus, button:focus-visible, input[type="submit"]:focus-visible{
    outline-color: var(--dv-purple);
    outline-width: 4px;
    outline-offset: 4px;
    outline-style: solid;
    box-shadow: var(--box-shadow-sm);
}

input, label, select, textarea{
    display: block;
    margin: 0.25rem auto;
    font-family: var(--fonts);
    font-size: 1.1rem;
    width: 90%;
    line-height: 1.35;
}

input, select, textarea{
    border: 2px solid var(--med-gray);
}

input:focus, select:focus, textarea:focus, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline-color: var(--dv-purple);
    outline-width: 4px;
    outline-offset: 2px;
    outline-style: solid;
}

/* The styles below can be used to style inputs that are not valid, but it may be confusing to users as it will display on all inputs that are required in a form until they have valid input */
/* 
input:invalid, select:invalid, textarea:invalid{
    border-color: var(--dv-pink);
    border-width: 2px;
    border-style: inset;
} */

label{
    font-weight: bold;
    font-size: 1.25rem;
}

input{
    height: 2rem;
}

/* Fieldset Styles */
fieldset{
    margin-bottom: 24px;
    border-radius: 4px;
    border: 2px groove var(--dk-gray);
    display: grid;
    padding: 0.35em 0.75em 0.625em 0.75em;
}

fieldset:first-of-type{
    padding-left: 32px;
    grid-template-columns: 1fr;
    row-gap: 8px;
}

fieldset:last-of-type{
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

legend:last-of-type{
    grid-column: 1/-1;
}

/* Legend Styles */
legend{
    font-weight: bold;
    font-size: 1.25rem;
    padding: 0 2px;
}

/* Fieldset Label Styles */
fieldset label{
    margin-left: 0;
    font-size: 1.1rem;
    font-weight: normal;
}

/* Optional Code for Custom Radios - Compare to Your zyBook, I added additional code to make these match my form styles */
input[type="radio"] + label {
    cursor: pointer;
    display: flex;
    align-items: center;
}

input[type="radio"] {
    appearance: none;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0;
    border-radius: 0;
    height: 0;
}

input[type="radio"] + label::before {
    content: "\00a0";   /* Non-breaking space */
    font-size: 3.5em;
    line-height: 0.36;
    border-radius: 50%;
    display: inline-block;  
    height: 20px;
    width: 22px;
    text-align: center;
    margin-right: 16px;
    border: 2px solid var(--white);   /* Push focus shadow away */
    background-color: var(--lt-gray);
    padding-bottom: 2px;
    padding-right: 1px;
}

input[type="radio"]:checked + label::before {
    content: "\2022";
    color: var(--dk-gray);
    background: var(--dv-teal);
}

input[type="radio"]:focus{
    outline: none;
}

input[type="radio"]:focus + label::before {
    box-shadow: 0 0 0 2px var(--dv-purple);
}

/* Optional code for custom checkboxes - found in your zyBook */
input[type="checkbox"] + label {
    cursor: pointer;
    font-size: 1.1em;
    width: 100%;
}

input[type="checkbox"] {
    appearance: none;
    margin: 0;
    height: 0;
    width: 0;
    border: none;
}

input[type="checkbox"] + label::before {
    content: "\00a0";   /* Non-breaking space */
    display: inline-block; 
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 1em;
    font-size: 1.2em; 
    margin-right: 8px;
    border: 0.125em solid var(--white);   /* Push focus shadow away */
    background-color: var(--lt-gray);
    padding-top: 1px;
}

input[type="checkbox"]:checked + label::before {
    content: "\2713";  /* Checkmark */
    color: var(--dk-gray);
    background: var(--dv-teal);      
}

input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 0 2px var(--dv-purple);
}

input[type="checkbox"]:focus{
    outline: none;
    border: none; 
}

select{
    height: 2.5rem;
    padding: 1px 2px;
    width: 92%;
}

textarea{
    height: 5rem;
    padding: 1px 2px;
}

.required{
    color: var(--dv-fuchsia);
    font-size: 2rem;
    font-weight: bold;
    display: inline;
}

input[type="range"]{
    margin-bottom: 0;
}

#other .output{
    border: none;
    padding-top: 0;
    font-size: 1.2rem;
    text-align: center;
}

span{
    display: block;
}

footer span{
    display: inline;
}


.red{
    background-color: var(--red);
    color: var(--white);
}

.orange{
    background-color: var(--orange);
    color: var(--white);
}

.yellow{
    background-color: var(--yellow);
    color: var(--dark-gray);
}

.green{
    background-color: var(--green);
    color: var(--white);
}

.blue{
    background-color: var(--blue);
    color: var(--white);
}

.pink{
    background-color: var(--pink);
    color: var(--dark-gray);
}

.purple{
    background-color: var(--purple);
    color: var(--white);
}

.gray{
    background-color: var(--med-gray);
    color: var(--white);
}

.brown{
    background-color: var(--brown);
    color: var(--white);
}

.black{
    background-color: var(--black);
    color: var(--white);
}

.white{
    background-color: var(--white);
    color: var(--dark-gray);
}

#other input{
    margin-bottom: 16px
}

#my-submit8{
/* margin-top: 32px; */
}

footer{
    margin: 2rem auto 0 auto;
    text-align: center;
}