:root {
    --light-blue: #d4e5f2;
    --headings: #52acbd;
    --dark: #306670;
    --darker: #0f2023;
    --button:#fbb14d;
}

.gluten-bold {
    font-family: 'Gluten', cursive;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings: 'slnt' 0;
}

.lexend-exa-normal {
    font-family: 'Lexend Exa', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body {
    font-size: 16px;
}

p,
a,
li,
button {
    font-family: 'Lexend Exa', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--darker);
}

li{
    list-style:none;
}

a {
    text-decoration: none;
}

button{
    background-color:var(--button);
    border:none;
    border-radius:.5rem;
    padding:.5rem;
    color:white;
    display:block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Gluten', cursive;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings: 'slnt' 0;
    color:var(--headings);
}

.container {
    width: 90%;
    margin: 0 auto;
}

header {
    background-color: var(--light-blue);
    padding-bottom:1rem;
}

.logo {
    height: 5rem;
}



nav ul {
    display: flex;
    gap: .5rem;
    margin-left:1rem;
    align-items:center;
    
}

.hero-left{
    display:none;
}

.hero-right{display:none;}

.hero-center {
    text-align:center;
    padding:1rem;
    
}

.hero-center h1 {
    font-size:1.5rem;
}

.hero-center h2 {
    font-size:1.2rem;
    padding-top:.5rem;
}
.hero-center p{
    padding:.5rem 0;
}

.hero-center button{
    margin: 0 auto;
}


main{
    background-color:var(--light-blue);
}

.close-up{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    
    gap:1rem;
    padding:1rem;

}

.featured {
    background-color:white;
    border-radius:2rem;
    
    padding:1rem;
}

.featured img{
    height:5rem;
    display:block;
    margin:0 auto;
}

footer, footer p, footer a{
    padding:1rem;
    color:var(--darker);
}

footer img{
    height:5rem;
}
footer {
    display:flex;
    gap:1rem;
}
footer li{
    padding:.3rem;
}
.footer-links {
    margin-left:auto;
}

.cr {
    font-size:.5rem;
    background-color:var(--light-blue);
    padding:.5rem;
}

@media (min-width:768px){
    .container {
        max-width:1024px;
    }
    .hero {
        display:grid;
        grid-template-columns:1fr 2fr 1fr;
    }
    .hero-left{
        display:block;
    }

    .hero-left img {
        height:6rem;
        padding:2rem;
        margin-top:1rem;
    }
    .hero-right{
        display:block;
    }

    .hero-right img {
        height:6rem;
        padding:2rem;
        margin-top:1rem;
    } 
    
    header {
        display:flex;
        align-items:center;
        padding:1rem;

    }
    header nav {
        margin-left:auto;

    }
    nav ul {
        gap:2rem;
    }
    .close-up {
        max-width:60%;
        margin:0 auto;
        
    }
    main h2, main p{
        max-width:60%;
        text-align:center;
        margin:0 auto;
       
    }
    main p {
        margin-top:.5rem;
        padding-bottom:1rem;
    }
}