@charset "utf-8";
/* CSS Document */

/* ============================= */
/* Global Colour Palette */
/* ============================= */
:root {
    primary-colour: #91E5F6;   /* Non Photo Blue */
    secondary-colour: #212529; /* Charcoal */
    tertiary-colour: #95D9DA;  /* Tiffany Blue */
    btn-a-colour: #133C55;     /* Indigo Dye */
}

/* ============================= */
/* Reset */
/* ============================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Space Grotesk", sans-serif;
    line-height: 1.6;
    background-color: #ffffff;
    color: #212529;
}

nav {
    background-color: #212529;
    padding: 1rem 0;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

nav a {
    text-decoration: none;
    color: white;
    font-weight: 500;
}

nav a:hover {
    color: #91E5F6;
}

.splash {
    text-align: center;
    padding: 4rem 1rem;
    background-color: #91E5F6;
}

.splash h1 {
    font-family: "Madimi One", sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.splash p {
    font-size: 1.2rem;
}

.content-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

section {
    margin-bottom: 3rem;
}

section h2 {
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

footer {
    background-color: #212529;
    color: white;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 3rem;
}
#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;}
.splash-heading, .splash-link {
    word-wrap: break-word;
}
img, iframe {
    max-width: 100%;
}
input, textarea {
    font-size: 0.8em;
    line-height: 1.4em;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
    margin-left: 0em;
    margin-right: 0em;
}
#submit {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.7em;
    padding-right: 0.7em;
    color: white;
    border-radius: 10px;
    font-size: 1.1em;
    background-color: #133C55;
    cursor: pointer;
}
#submit:hover {
    background-color: #4D7CD3;
    color: black;
}
@media screen and (min-width:1000px){
}
main {
	display: grid;
	grid-template-areas: "hero hero hero hero"
		"section1 section1 section2 section2"
		"section3 section3 section4 section4"
		"foot1 foot2 foot3 foot4";
	column-gap: 1em;
	justify-content: space-around;
}