@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body{
    overflow-x:hidden;
    margin:0;
    width:100vw;
}

body * {
    font-family: "Lato", sans-serif;
}

:root{
    --accent-color:#2cae71;
    --accent-gradient:#75d377;
    --accent-light: #d3ece0;
    --bg-color-1:#ffffff;
    --bg-color-2:#f1f0f5;
    --bg-color-3:#e7e6eb;
    --border-color:#e2e2e7;
}

#navbar-container{
    display:flex;
    flex-direction:column;
    box-shadow:0 0 12px 0 var(--border-color);
    position:sticky;
    background:white;
    top:0;
    z-index:2;
}

#announcements{
    background:linear-gradient(135deg, var(--accent-color), var(--accent-gradient));
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    text-align:center;
    height:28px;
    text-transform:uppercase;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    color:white;
}

#announcements::before{
    content:'✨';
    margin-right:12px;
}

#announcements::after{
    content:'✨';
    margin-left:12px;
}

#navbar{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:calc(100vw - 64px);
    padding:0 32px;
    height:72px;
}

#navbar > img{
    height:36px;
}

#navbar > div{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap:24px;
}

#navbar > div > a{
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    color:black;
}

#banner-image{
    width:100vw;
    height:384px;
    background-image:url('https://images.unsplash.com/photo-1510828561531-05a3388f6d3d');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

#footer-image{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    margin-top:64px;
    margin-bottom:32px;
    position:absolute;
    width:100vw;
}

#footer-image > img{
    width:32px;
}

#footer-image::before{
    content:'';
    position:relative;
    width:calc(50vw - 64px);
    right:24px;
    height:1px;
    background:lightgray;
}

#footer-image::after{
    content:'';
    position:relative;
    width:calc(50vw - 64px);
    left:24px;
    height:1px;
    background:lightgray;
}

.break{
    margin:144px 0;
}