:root {
    /* vst logo colors (and derivated colors)*/
    --vstdev-vst-dev-portal-menu-background-color: #f4f5f7;
    --vstdev-vst-dark-grey: #cfcfcf;
    --vstdev-vst-logo-old-dark-color: #8b9ea8;
    --vstdev-vst-logo-old-middle-light-color: #aabcc5;
    --vstdev-vst-logo-old-middle-lighter-color: #b9cbd3;
    /* vst icon (the cube) colors */
    --vstdev-vst-icon-light-blue-01: #c8d8e1;
    --vstdev-vst-icon-light-blue-02: #9fb4c4;
    --vstdev-vst-icon-light-blue-03: #6d879b;
    --vstdev-vst-icon-dark-blue-01: #648094;
    --vstdev-vst-icon-dark-blue-02: #273a4a;
    /* navbar */
    --vstdev-navbar-background-color: white;
    --vstdev-navbar-border-bottom-color: #ebeaeb;
    --vstdev-navbar-item-link-color: #1b1b1b;
    --vstdev-navbar-item-link-hover-color: var(--vstdev-vst-icon-light-blue-03);
    --vstdev-navbar-button-background-color: var(--vstdev-vst-icon-light-blue-01);
    --vstdev-navbar-button-hover-color: var(--vstdev-vst-logo-old-middle-lighter-color);
    --vstdev-navbar-button-text-color: var(--bulma-title-color);
    /* hero */
    --vstdev-hero-link-color: var(--bulma-title-color);
    --vstdev-hero-strong-color: var(--bulma-title-color);
    --vstdev-hero-link-hover-color: var(--vstdev-vst-icon-light-blue-03);
    --vstdev-hero-button-background-color: var(--vstdev-vst-icon-light-blue-01);
    --vstdev-hero-button-text-color: #3B3B28;
    --vstdev-hero-button-hover-color: var(--vstdev-vst-logo-old-middle-lighter-color);
    /* footer */
    --vstdev-footer-background-color: var(--vstdev-vst-dev-portal-menu-background-color);
    --vstdev-footer-link-color: #525264;
    --vstdev-footer-link-hover-color: #525264;
    --vstdev-footer-strong-color: #525264;
    /* burger */
    --vstdev-navbar-burger-color: var(--vstdev-vst-icon-dark-blue-02);
    --vstdev-navbar-burger-hover-background-color: var(--vstdev-vst-icon-light-blue-01);
    /* Make the navbar a bit more high */
    --bulma-navbar-height: 4rem;
    --vstdev-navbar-brand-burger-padding: 1.5rem;
}

/* Put a small 1px line on the bottom to separate the navbar from the hero */
.vstdev-navbar {
    border-bottom: 1px solid var(--vstdev-navbar-border-bottom-color);
    background-color: var(--vstdev-navbar-background-color);
}

.vstdev-navbar .vstdev-vst-logo {
    height: 3rem;
    vertical-align: middle;
}

.vstdev-navbar .vstdev-navbar-brand-font {
    color: var(--vstdev-vst-icon-dark-blue-02);
    vertical-align: middle;
    font-size: 20px;
}

.vstdev-navbar .navbar-brand {
    align-items: center;
    padding-left: var(--bulma-column-gap);
}

/* max-width must be '1023', at '1024' tablet starts*/
@media (max-width: 1023px) {
    .vstdev-navbar .navbar-brand {
        align-items: center;
        padding-left: var(--vstdev-navbar-brand-burger-padding);
    }
}

.navbar-item img {
    max-height: 3rem;
}

.navbar-menu.is-active {
    position: absolute;
    width: 100%;
}

.vstdev-navbar .vstdev-burger:hover {
    background-color: var(--vstdev-navbar-burger-hover-background-color);
}

.vstdev-navbar .vstdev-burger {
    color: var(--vstdev-navbar-burger-color);
    margin-inline-end: var(--vstdev-navbar-brand-burger-padding);
}

.vstdev-navbar .navbar-item,
.vstdev-navbar .navbar-link {
    color: var(--vstdev-navbar-item-link-color);
    font-size: 16px;
}

.navbar a.navbar-item:hover,
.navbar a.navbar-item:focus {
    color: var(--vstdev-navbar-item-link-hover-color);
    background-color: inherit;
    text-decoration: none;
}

.navbar a.button {
    color: var(--bulma-title-color);
    background-color: var(--vstdev-navbar-button-background-color);
    border-style: hidden;
}

.navbar a.button:hover {
    color: var(--vstdev-navbar-button-text-color);
    background-color: var(--vstdev-navbar-button-hover-color);
    border-style: hidden;
}

/**** hero ****/
.hero.is-main-hero {
    background-image: url('hero-main/background-450c77062ea843fb85f2726f21587768.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

.hero strong {
    color: var(--vstdev-hero-strong-color);
}

.hero a {
    color: var(--vstdev-hero-link-color);
}

.hero a:hover,
.hero a:focus {
    color: var(--vstdev-hero-link-hover-color);
    text-decoration: none;
}

.hero a.button {
    color: var(--vstdev-hero-button-text-color);
    background-color: var(--vstdev-hero-button-background-color);
    border-style: hidden;
}

.hero a.button:hover {
    background-color: var(--vstdev-hero-button-hover-color);
    border-style: hidden;
}

.hero .hero-body .hero-header {
    max-width: 740px;
    margin: auto;
}

/**** footer ****/
.vstdev-vst-trademark-logo {
    height: 120px;
    vertical-align: middle;
}

.vstdev-footer {
    background-color: var(--vstdev-footer-background-color);
}

.vstdev-footer strong {
    color: var(--vstdev-footer-strong-color);
    display: block;
    margin-bottom: 8px;
}

.vstdev-footer a {
    color: var(--vstdev-footer-link-color);
}

.vstdev-footer a:hover {
    color: var(--vstdev-footer-link-hover-color);
    text-decoration: underline;
}

/**** font sizes taken from signal.org ****/
.content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 10px;
}

h1 {
    font-size: 60px;
    font-weight: 800;
    line-height: 64px;
}

h2 {
    font-size: 40px;
    font-weight: 800;
    line-height: 44px;
}

h3 {
    font-size: 28px;
    font-weight: 800;
    line-height: 32px;
}

h4 {
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
}

p.body1 {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

p.body2 {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

p.body3 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 768px) {
    h1 {
        font-size: 40px;
        font-weight: 800;
        line-height: 44px;
    }

    h2 {
        font-size: 28px;
        font-weight: 800;
        line-height: 32px;
    }

    p.body1 {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
    }
}