/* 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;
}



sup{
    font-size: larger;
    
}



div.container{
  color: black;
}

.logo{
  width: 45%
}
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid bisque;
  border-radius: 5px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  background-color:bisque;
  color: grey;
}

input[type=submit] {
  background-color: #04AA6D;
  color: aliceblue;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #0F256E;
  padding: 20px;
  color:aliceblue;
}
#container {
    display: grid;
    grid-template-areas:
    "header header header header"
    "content2 content2 content2 content3"
    "content2 content2 content2 content3"
    "content2 content2 content2 content3"
    "content2 content2 content2 content3"
    "content2 content2 content2 content3"
    "content4 content4 content4 content4"
    "footer footer footer footer";
    grid-auto-rows: 120px;    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    float: center;
    background-color: #0F256E;
}

.content1{
    display: flex;
    justify-content: center;
    grid-area: content1;
    color: aliceblue;
    background-color: #0F256E;
}
.content2{
    display: flex;
    justify-content: center;
    background-color: #0F256E;
    grid-area: content2;
    color: aliceblue;
}
.content3{
    display: flex;
    justify-content: center;
    background-color: #0F256E;
    grid-area: content3;
    color: aliceblue;
}
.content4{
    display: flex;
    justify-content: center;
    background-color: #0F256E;
    grid-area: content4;
    color: aliceblue;
}

.content2, .content3, .content4, .content5, p{
    font-family: myFirstFont;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    /* font-weight: <weight>;  Removed invalid value */
    font-style: normal;
    /* font-variation-settings: "wdth" 100;  Removed or commented out invalid property */
}

body{
  background-color: #0F256E;
  color: aliceblue;
}


h1{
  text-align: center;
  font-size: xx-large;
}

#subhead{
  font-size: medium;
  text-align: center;
  padding-left: 25%;
  padding-right: 25%;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  grid-area: header;
}

*{
  color: aliceblue;
}

a{
  color: cornflowerblue;
}


header{
  display: flex;
  align-items: center;
  justify-content: center;
}

iframe{
  display: inline-block;
}


@font-face {
    font-family: myFirstFont;
    src: url("../Roboto-VariableFont_wdth\,wght.ttf") format("truetype");


@media screen and (max-width:600px){
    #container{
        grid-template-areas: 
        "header"
        "content2"
        "content3"
        "content4"
        "content4"
        "content4"
        "footer";
    }
}


.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
  padding: 5px;

}
}