@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 */
body {
    font-family: "Space Grotesk", sans-serif;
    line-height: 1.6;
    background-color: #ffffff;
    color: var(--secondary-colour);
}

/* ============================= */
/* Navigation */
/* ============================= */
nav {
    background-color: var(--secondary-colour);
    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: var(--primary-colour);
}

/* ============================= */
/* Splash Header */
/* ============================= */
.splash {
    text-align: center;
    padding: 4rem 1rem;
    background-color: var(--primary-colour);
}

.splash h1 {
    font-family: "Madimi One", sans-serif;
    font-size: 3em;
    margin-bottom: 1rem;
}
splash-link {
    background-color: #91E5F6;
}


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

/* ============================= */
/* Main Content Wrapper */
/* ============================= */
.content-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

/* ============================= */
/* Sections */
/* ============================= */
section {
    margin-bottom: 3rem;
}

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

/* ============================= */
/* Footer */
/* ============================= */
footer {
    background-color: white;
    color: black;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 3rem;
    font-size: large;
    font-style: normal;
}
#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;}
	@media screen and (min-width:1000px){
.foot-wrapper{
	display:grid;
	
	grid-template-areas:
	"foot1 foot2 foot3 foot4";
main{
display:grid;

grid-template-areas:
"hero hero hero hero"
"section1 section1 section2 section2"
"section3 section3 section4 section4";
"foot1 foot2 foot3 foot4"
justify-content:space-around;
}
main {
    background: bottom;

}