html {
    scroll-behavior: smooth;
}

:root {
    --primary: #0b3554;
    --primary-light: #5588aa;
    --secondary: #e26a07;
    --secondary-light: #ebae75;
    --text: #eee;
    --text-dark: #333;
}


@media (prefers-color-scheme: dark) {
    :root {
        --primary: #0b3554;
        --secondary: #e26a07;
        --text: #eee;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --primary: #0b3554;
        --secondary: #e26a07;
        --text: #eee;
    }
}
.fig-max-height {
  max-height: 25vh !important;
}

footer a.footer-link {
    color: #333;
}

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

.is-secondary {
    background: var(--secondary);
    color: var(--text);
}

.is-secondary-light {
    background: var(--secondary-light);
    color: var(--text-dark);
}

.is-primary {
    background: var(--primary);
    color: var(--text);
}

.is-primary-light {
    background: var(--primary-light);
    color: var(--text-dark);
}

.has-background-primary {
    background: var(--primary) !important;
    color: var(--text) !important;
}

.has-background-primary-light {
    background: var(--primary-light) !important;
    color: var(--text-dark) !important;
}



.freelance-notifier {
    position: fixed;
    top: 10vh;
    right: 5vw;
    width: 200px;
    height: 100px;
    cursor: pointer;
    transform-origin: center;
    /*Speed of the Door animation*/
    transition: all 0.5s ease-in-out;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.freelance-notifier .sign:after {
    content: '';
    background-image: url("../media/vintage-press-with-vignette.png");
    background-size: cover;
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: .4rem;
}

.sign, .flipside {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 1rem;
    border-radius: 0.4rem;
    text-align: center;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

.freelance-notifier::before {
    content: 'hanging string';
    color: transparent;
    position: absolute;
    z-index:-1;
    top: -20%;
    right: 30%;
    width: 5rem;
    height: 5rem;
    border: solid 2px #333;
    border-radius: 1rem;
    transform: rotateZ(45deg);
}

.freelance-notifier.open .sign{
    background-color: forestgreen;
    color: #eee;
}

.freelance-notifier.open .flipside {
    background-color: #799e79;
    color: #eee;
}

.freelance-notifier.close .sign, .freelance-notifier.close .flipside{
    background-color: maroon;
    color: #eee;
}

.sign .title {
    font-family: 'Berkshire Swash', cursive;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 0.5rem;
    color: goldenrod;
}

.freelance-notifier .flipside {
    transform: rotateY(180deg);
}

.freelance-notifier.flipped
{
    transform: rotateY(180deg);
    height: 125px;
}

.gallery .frame {
    margin: 2rem;
    padding: 2rem;
    background: #212121 url(/media/frame.jpg);
    background-size: cover;
    box-shadow: -5px 5px 3px 0px #666;
    display: inline-block;
    position: relative;
}

.gallery .frame > button.action {
    position: absolute;
    right: 1rem;
    top: 1rem;
    border: solid 1px #333;
    border-radius: 0.2rem;
    background: #eee;
    cursor: pointer;
    display:none;
}
.gallery .frame:hover > button.action {
    display:block;
}

.gallery .frame .content {
    background: hsl(36deg 80% 98%);
    padding: 1.8rem;
    display: inherit;
    box-shadow: -1px 1px 5px 0px inset;
    line-height: 0;
    margin: 0;
}

.gallery .frame .content .gallery-item {
    display: inherit;
    line-height: 0;
}

.gallery .frame .label {
    position: absolute;
    bottom: 0.25rem;
    right: 30%;
    left: 30%;
    text-align: center;
    background: hsl(40, 100%, 65%);
    border-radius:  5px;
}