/*root variables and font imports*/

@import url(https://fonts.googleapis.com/css2?family=Antonio:wght@500&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap);

:root{
    --primary-color:#003f56;
    --secondary-color: #2178a0;
    --light-offset:#eeffff;
    --para-font: 'Open Sans', sans-serif;
    --header-font: 'Antonio', sans-serif;
    --mono-font: 'Courier New', Courier, monospace;
}

/*headings and basic paragraph styles*/

h1,h2,h3,h4,h5,h6{
    font-family: var(--header-font);
    color: var(--primary-color);
}

h1{
    font-size:clamp(3rem,5vw,4rem);
    margin:2rem 0 1rem;
    padding-bottom:1rem;
    border-bottom: solid 1px var(--secondary-color);
}

h2{
    
    font-size:clamp(2.5rem,5vw,3rem);
    margin:1.5rem 0 .5rem;
}

h3{
    font-size:clamp(2rem,4vw,2.5rem);
    margin: 1rem 0 .5rem;
}

h4{
    font-size:clamp(1.5rem,3vw,2rem);
    margin:1rem 0 .5rem;
}

h5{
    font-size:clamp(1.25rem,2vw,1.5rem);
    margin:1rem 0 .5rem;
}

h6{
    font-size:clamp(1.1rem,1.5vw,1.25rem);
    margin:.75rem 0 .25rem;
    font-style: italic;
}

p{
    font-family: var(--para-font);
    font-size: clamp(.9rem,2vw,1rem);
    line-height: 1.5rem;
    margin-bottom: .5rem;
    margin-top:.25rem;
}



/*Block elements*/

blockquote{
    font-family: var(--para-font);
    padding:1rem 5rem;
    color: var(--primary-color);
    line-height: 1.25rem;
    font-size: clamp(.9rem,2vw,1rem);
}

figcaption{
    color: var(--primary-color);
    font-family: var(--para-font);
    background-color: var(--light-offset);
    margin:.1rem;
    padding:.5rem;
    font-size: .9rem;
}

details{
    background-color: var(--light-offset);
}

details > summary{
    font-family: var(--header-font);
    color: var(--light-offset);
    font-size:clamp(1.25rem,2vw,1.5rem);
    background-color: var(--secondary-color);
    padding:1rem;
    margin-top:1rem;
}

details > p{
    padding: 1rem;
}

hr{
    color:var(--primary-color);
}

pre{
    font-family: var(--mono-font);
    overflow:auto;
    margin:.5rem 0;
    background-color:var(--light-offset);
}



/*inline elements*/

p a{
    color:var(--secondary-color);
    font-weight: 700;
    text-decoration: none;
}

p a:hover{
    color:var(--primary-color);
}

abbr{
    font-style: italic;
    color: var(--primary-color);
}

acronym{
    color: var(--primary-color);
    text-transform: uppercase;
}

b{
    font-weight: 700;
}

cite{
    font-size: .9rem;
}

code {
    background-color: var(--light-offset);
    border-radius: 3px;
    font-family: var(--mono-font);
    color: var(--primary-color);
    white-space:pre;
    word-wrap: break-word;
    
}

pre > code{
    display:block;
    padding:1rem;
    font-size:clamp(.7rem,2vw,1rem);
}

del{
    color: var(--primary-color);
    font-style: italic;
    text-decoration: 2px line-through;
}

dfn{
    color:var(--primary-color);
    font-style: italic;
}

em{
    font-style: italic;
}

i{
    font-style:italic;
}

ins{
    color: var(--secondary-color);
    text-decoration: 2px underline;
}

ins::before{
    content:"+  ";
}

kbd{
    font-family: 'Courier New', Courier, monospace;
    padding: .15rem .25rem;
    background-color: var(--light-offset);
    border:1px var(--primary-color) solid;
    border-radius: 5px;
    color:var(--primary-color);
}

mark{
    background-color:var(--secondary-color);
    color:var(--light-offset);
    padding:.25rem .5rem;
    font-size: .9rem;
}

pre > p{
    font-family: var(--mono-font);
    white-space: pre-wrap;
}

q {
	quotes:initial;
}

s{
    text-decoration: line-through;
}

samp{
    font-family: 'Courier New', Courier, monospace;
    padding: .5rem;
}

small{
    font-size: .8rem;
}

strong{
    font-weight: 700;
}

sub{
    vertical-align: sub;
    font-size: .8rem;
}

sup{
    vertical-align: super;
    font-size: .8rem;
}

time{
    font-weight: 700;
}

u{
    text-decoration: underline wavy var(--secondary-color);
}

var{
    font-style: italic;
    font-weight: 700;
}




/*lists*/

dl, ol, ul{
    margin-left:1.5rem;
    font-family: var(--para-font);
    line-height: 1.25rem;;
    font-size: clamp(.9rem,2vw,1rem);
}

ol:last-child, ul:last-child{
    margin-bottom: .5rem;
}

dt{
    font-style: italic;
}

ol > li{
    list-style:decimal inside;
}

ol > li > ol > li{
    list-style: upper-alpha inside;
}

ol > li > ol > li > ol > li{
    list-style: lower-roman inside;
}

ul > li{
    list-style: url(bullet-star.png);
}

dd{
    margin-left:1rem;
    margin-bottom:.5rem;
}



/*tables*/

table{
    width:100%;
    font-family: var(--para-font);
    border:1px solid var(--primary-color);
}

table caption{
    margin: 1rem 0;
    font-size: .9rem;
}

thead{
    background-color: var(--primary-color);
    border:1px solid var(--primary-color);
    color:var(--light-offset);
}

th, td{
    padding:1rem;
}

td{
    border:1px solid var(--primary-color);
}

tfoot{
    background-color:var(--light-offset);
    border:1px solid var(--primary-color);
}



/*media elements*/
audio{
    width:100%;
    padding:1rem 0;
}

video{
    width:100%;
}

iframe{
    width:100%;
    height:calc(70vw * .65);
    max-height:550px;
}



/*forms*/

.button{
    padding:.5rem .75rem;
    font-size: .9rem;
    cursor: pointer;
    margin:1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

input.button{
    border:2px solid var(--secondary-color);
}

input.button[type="reset"]{
    background-color:#ff8a2a;
    border: #ff8a2a 2px solid;
    color:var(--primary-color);
}

input.button[type="reset"]:hover{
    background-color:#fd9a18;
}

input.button[type="submit"]{
    background-color:rgb(170, 212, 131);
    border: 2px solid rgb(170, 212, 131);
    color:var(--primary-color);
}

input.button[type="submit"]:hover{
    background-color:rgb(200, 235, 168);
}

input.button[disabled]{
    cursor: not-allowed;
    color:rgb(119, 119, 119);
    background-color: lightgray;
    border: 2px solid lightgray;
}

button{
    background-color:var(--primary-color);
    color:var(--light-offset);
    border:2px solid var(--primary-color);
    border-radius: 5px;
}

button:hover{
    background-color: var(--light-offset);
    color:var(--primary-color);
}

fieldset{
    border:2px solid var(--primary-color);
    border-radius: 5px;
    font-family: var(--para-font);
    padding:1rem;
}

legend{
    margin-left:1rem;
    padding:.5rem;
    text-transform: uppercase;
    font-weight: 700;
    color:var(--primary-color);
}

label{
    margin-right:2rem;
    margin-top:.5rem;
}

input, textarea, select{
    margin:.5rem 0;
    border:1px solid var(--secondary-color);
    border-radius:5px;
    padding:.5rem;
    font-family: var(--para-font);
}

input[type="text"], input[type="password"], input[type="file"], input[type="email"], input[type="url"], input[type="tel"]{
    width:20rem;
}

input[type="number"]{
    width:4rem;
}

input[type="search"]{
    width:100%;
}

label[for="search"]{
    min-width: 20rem;
    width:100%;
}

[disabled]{
    background-color: var(--light-offset);
    border-color:var(--primary-color);
}

[readonly]{
    background-color: var(--light-offset);
}

textarea{
    width:30vw;
    min-width:20rem;
    max-width:25rem;
    min-height:calc(20rem * .3);
    height:calc(30vw * .3);
    max-height: calc(25rem * .3);
    font-size: .9rem;
}

select{
    min-width:20rem;
    width:30vw;
    max-width:25rem;
}

select option{
    font-family: var(--para-font);
}

input[type="range"]{
    color:var(--secondary-color);
}

datalist[id="tickmarks"]{
    display: contents;
}

output{
    border:1px solid var(--secondary-color);
    padding:.25rem .5rem;
    font-weight: bold;
    border-radius: 5px;
    /*there is a line-height declaration in layout-styles.css to space the output from the label above*/
}

progress{
    margin-top:.5rem;
    background-color:var(--light-offset);
    border:1px solid var(--secondary-color);
    border-radius: 5px;
    width:30vw;
    min-width:20rem;
    max-width:25rem;
    -webkit-appearance:none;
}

::-webkit-progress-bar {
    background-color: var(--light-offset);
    border-radius: 5px;
}

::-webkit-progress-value{
    background-color:var(--primary-color);
    border-radius: 4px;
}

::-moz-progress-bar{
    background-color: var(--primary-color);
}

meter{
    margin-top:.5rem;
    width:30vw;
    min-width:20rem;
    max-width:25rem;
    --background:var(--light-offset);
    --optimum:rgb(170, 212, 131);
    --sub-optimum:#fd9a18;
    --sub-sub-optimum:rgb(223, 68, 48);
    background:var(--background);
    border:1px solid var(--secondary-color);
    border-radius: 5px;
    height:1rem;
}

meter::-webkit-meter-bar{
    background:var(--background);
    border:1px solid var(--secondary-color);
    border-radius: 5px;
    height:1rem;
}

meter:-moz-meter-optimum::-moz-meter-bar{
    background:var(--optimum);
    border-radius: 4px;
}

meter::-webkit-meter-optimum-value {
    background: var(--optimum);
    border-radius: 4px;
}
/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--sub-optimum);
    border-radius: 4px;
}
  
/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
    background: var(--sub-optimum);
    border-radius: 4px;
}
  
/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--sub-sub-optimum);
    border-radius: 4px;
}
  
/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
    background: var(--sub-sub-optimum);
    border-radius: 4px;
}