body {
    margin: 0;
    padding: 0;

    font-family:sans-serif;
}

nav {
    display: flex;
    justify-content: space-between;
    background-color: lightcoral;

    padding: 1em;
}

.menu {
    display: flex;
}

li {
    margin: 8px 16px;

    /* get rid of bullets */
    list-style-type: none;

    
}

.menu a {
    text-decoration: none;
    color: black;
}

.menu a:hover {
    color: white;
}

/* Hero */
.hero {
    background-image: url('../images/bg-1.jpg');
    height: 100vh;
    background-size: cover;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;

    
}

.hero a{
    padding: .5rem 2rem;
    background-color: black;
    color: white;
    text-decoration: none;
}

h1 {
    font-size: 8rem;
    margin-bottom: 0;
}

h4 {
    font-size: 2rem;
}

/* Grid */
.grid {
    /* turns on CSS Grid */
    display: grid;
    height: 80vh;

    /* Set up grid track template here */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

}

/* main box styling */
.base {
    padding: 1rem;
    margin: 0.5rem;
    background-color: rgba(227, 227, 227, 0.789);
    border-radius: 8px;
}

.gridOne {
    border: 4px solid #0faebd;

/* you can define where your element starts and ends in relation to your grid setup  */
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 1;
    grid-row-end: 3;

}

.gridTwo {
    border: 4px solid #e5951d;
    
    grid-column-start: 1;
    grid-column-end: 3;

    grid-row-start: 1;
    grid-row-end: 3;

}

.gridThree {
    border: 4px solid #e315bd;

}

.gridFour {
    border: 4px solid #49e080;
}

.gridFive {
    border: 4px solid #b82cd8;
}

.gridSix {
    border: 4px solid #0434d0;
}