@import url('https://fonts.googleapis.com/css2?family=Lato&family=Mochiy+Pop+One&display=swap');

/* vars */
:root {
    --purple : 124, 117, 218;
    --navbar-bg: 45, 54, 82;
    --giraffe-footer-width: 200px;
    --heading-font-family: 'Mochiy Pop One', 'Arial', sans-serif;
    --body-font-family: 'Lato', 'Arial', sans-serif;
}

body {
    background : linear-gradient(to left top, rgba(var(--purple ), 1), rgba(var(--purple), .6)) no-repeat;
    font-family: 'Lato', 'Arial', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family);
}

.container {
    box-shadow: 0 5px 5px 3px rgba(0,0,0,0.4);
    max-width: 65%;
}

/* navbar */
.navbar{
    background: rgba(var(--navbar-bg), 1);
}
.navbar a, .navbar a:visited {
    color: #fff;
}
.navbar a:hover, .navbar a.active {
    text-decoration: underline;
    color: #bdc5db;
}
#navbar-logo {
    max-width: 43px;
}
.navbar-brand {
    font-family: var(--heading-font-family);
}
.navbar-toggler:focus {
    box-shadow: none;
}

.anchor::before {
    content: "";
    display: block;
    height: 90px; /* fixed header height*/
    margin: -100px 0 0; /* negative fixed header height */
}

/* buttons */
.btn-primary {
    background: purple;
}
.btn-primary:hover, .btn-primary:active {
    color: #bdc5db;
    background-color: purple;
    border-color: #aqua;
}
.btn.rounded-pill.nav-link.active {
    background: purple;
}

/* subscribe form */
#mc_embed_signup{background:#fff;}

#giraffe-footer {
    width: var(--giraffe-footer-width);
}

.drop-shadow {
    filter: drop-shadow(0px 10px 10px #555555);
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .container {
        max-width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    #giraffe-footer {
        max-width: calc(var(--giraffe-footer-width) - 20px );
    }
}