@property --base-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #213a8f;
}

:root {
    --base-color: #213a8f;
    --body-background-color: color-mix(in srgb, var(--base-color) 10%, #fff);
    --body-text-color: color-mix(in srgb, var(--base-color) 40%, #000);
    --nav-border-bottom-color: color-mix(in srgb, var(--base-color) 10%, #eee);
    --card-background-color: #ffffff;
    --nav-background-color: #ffffff;
    --nav-current-border-bottom-color: color-mix(in srgb, var(--base-color) 10%, #eee);
    --card-border-color: #d8e8e4;
    --down-border-left-color: #eb3b5a;
    --down-background-color: #ffd0d2;
    --degraded-border-left-color: #f7b731;
    --up-border-left-color: #20bf6b;
    --tag-color: #ffffff;
    --tag-up-background-color: #20bf6b;
    --tag-down-background-color: #eb3b5a;
    --tag-degraded-background-color: #f7b731;
    --change-background-color: #f7b731;
    --error-button-border-color: #1a46ad;
    --error-button-background-color: #3867d6;
    --error-button-color: #ffffff;
    --submit-button-border-color: #1a46ad;
    --submit-button-background-color: #3867d6;
    --submit-button-color: #ffffff;
    --graph-opacity: 1;
    --graph-filter: none;
}

body {
    margin-top: 150px!important;
}

nav {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
}

/* Added attributes to override height, can't add important due to animation */
.logo[href] img[src] {
    height: 100px;
    animation-timeline: scroll(root);
    animation-name: scale;
    animation-timing-function: ease-in-out;
    animation-range-end: 150px;
    animation-fill-mode: forwards;
}

nav .container {
    padding: 0.5rem 2rem;
}

@keyframes scale {
    from {
        height: 100px;
    }
    to {
        height: 50px;
    }
}