@font-face {
    font-family: 'Delicious';
    src: url('/static/font/Delicious.ttf');
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('/static/font/Merriweather-Light.ttf');
    font-display: swap;
}

:root {
    --bs-body-font-size: 15px;
    font-size: var(--bs-body-font-size);
}

.container {
    font-family: 'Merriweather';
    margin: auto;
    padding: 3em 1.5em;
    line-height: 1.9em;
    width: 60%;
}

@media screen and (max-width: 820px) {
    .container {
        width: 80%;
    }
}

@media screen and (max-width: 480px) {
    .container {
        width: 95%;
    }
}

.container-md {
    padding-top: 2em;
}

h1,
h2 {
    font-family: 'Delicious';
}

h1 {
    text-align: center;
    font-size: calc(2.5rem + .9vw);
    padding-bottom: 0.5em;
}

h2 {
    font-size: calc(1.8rem + .9vw);
    padding-bottom: 0.2em;
}

.input-group-text abbr {
    text-decoration-color: lightgray;
}

img {
    max-width: 100%;
    padding: 1em;
    filter: drop-shadow(1px 1px 3px #999);
}