/* General Page Styles */
html, body {
box-sizing: border-box;
margin: 0;
padding: 0;
color: #212529;
font-family: "Space Grotesk", sans-serif;
font-size: 1.2em;
}

/* Navigation */
nav {
padding-bottom: 3em;
background: linear-gradient(270deg, #95D9DA 0%, #91E5F6 100%);
}

nav ul {
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
}

nav ul li a {
padding: 20px;
display: block;
color: #212529;
font-weight: 700;
text-transform: uppercase;
}

nav ul li a:hover,
nav ul li a:focus {
color: black;
border: 0;
}

/* Headings */
h1, h2, h3 {
text-align: center;
font-family: "Madimi One", sans-serif;
}

/* Content Wrapper */
.content-wrapper {
max-width: 55em;
padding: 1.5em;
margin: 0 auto;
}

/* Footer Wrapper */
.foot-wrapper {
padding: 0 0.5em;
}

/* Default section headings (black for most pages) */
section h2 {
color:#212529;
text-shadow:none;
}

/* INDEX PAGE blue glowing headings */
.home-card h2 {
color:#91E5F6;
text-shadow:2px 1px 3px #212529;
}

/* Default paragraph formatting */
section p {
max-width: 32em;
margin: 0 auto;
text-align: center;
}

/* INDEX PAGE PARAGRAPHS LEFT ALIGNED */
body.home section p {
text-align:left;
margin:0;
}

/* Links */
a {
color: #133C55;
text-decoration: none;
}

a:hover, a:focus {
color: #00A593;
border-bottom: 1px solid #00A593;
}

/* Footer */
footer {
text-align: center;
}

/* Splash Section */
.splash {
width: 80%;
margin: 0 auto;
}

.splash-heading {
padding: 0.7em 1em;
font-size: 3em;
font-weight: 700;
line-height: 1em;
border: 3px solid #fff;
border-radius: 9px;
}

.splash-subheading {
letter-spacing: 0.05em;
text-align: center;
}

.splash-link {
text-align: center;
}

.splash-link a {
padding: 0.8em;
width: 35%;
margin: auto;
display: block;
border: 3px solid #4D7CD3;
}

.splash-link a:hover,
.splash-link a:focus {
color: #fff;
background: #4D7CD3;
border: 3px solid black;
}

/* GRID AREAS */
#hero {grid-area: hero;}
#section1 {grid-area: section1;}
#section2 {grid-area: section2;}
#section3 {grid-area: section3;}
#section4 {grid-area: section4;}

#foot1 {grid-area: foot1;}
#foot2 {grid-area: foot2;}
#foot3 {grid-area: foot3;}
#foot4 {grid-area: foot4;}

/* Desktop layout */
@media (min-width:1000px){

main{
display:grid;
grid-template-columns:50% 50%;
grid-template-areas:
"hero hero"
"section1 section2"
"section3 section4";
}

.foot-wrapper{
display:grid;
grid-template-columns:25% 25% 25% 25%;
grid-template-areas:
"foot1 foot2 foot3 foot4";
text-align:center;
align-items:start;
justify-items:center;
}

nav ul{
flex-direction:row;
justify-content:center;
gap:2em;
}

}

/* Center video */
iframe{
display:block;
margin:0 auto 2em auto;
max-width:100%;
}

/* Center text under video */
#hero p{
text-align:center;
max-width:40em;
margin:0 auto 1.5em auto;
}
input, textarea {
  font-size: 0.8em;
  line-height: 1.4em;
  margin: 0.4em 0em;
}

#submit {
  padding: 0.5em 0.7em;
  color: white;
  font-size: 1.1em;
  border-radius: 10px;
  background-color: #133C55;
  cursor: pointer;
}

#submit:hover {
  background-color: #4D7CD3;
  color: black;
}