/* Minification failed. Returning unminified contents.
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,28): run-time error CSS1039: Token not allowed after unary operator: '-clatsop-banner-background'
(19,17): run-time error CSS1039: Token not allowed after unary operator: '-clatsop-banner-foreground'
(25,21): run-time error CSS1039: Token not allowed after unary operator: '-clatsop-banner-foreground'
(41,28): run-time error CSS1039: Token not allowed after unary operator: '-clatsop-toolbar-background'
(42,17): run-time error CSS1039: Token not allowed after unary operator: '-clatsop-toolbar-foreground'
(46,28): run-time error CSS1039: Token not allowed after unary operator: '-clatsop-pullbox-background'
(47,17): run-time error CSS1039: Token not allowed after unary operator: '-clatsop-pullbox-foreground'
(51,28): run-time error CSS1039: Token not allowed after unary operator: '-clatsop-pullbox-background'
(52,17): run-time error CSS1039: Token not allowed after unary operator: '-clatsop-pullbox-foreground'
 */
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;0,800;1,400&family=Oswald:wght@700&family=Prompt:wght@400;500&display=swap");

:root {
    --clatsop-banner-background: #FFFFFF;
    --clatsop-banner-foreground: #111111;
    --clatsop-toolbar-background: #3F6298;
    --clatsop-toolbar-foreground: #FFFFFF;
    --clatsop-pullbox-background: #A8D5E7;
    --clatsop-pullbox-foreground: #111111;
    --clatsop-border-color: #F8EA62;
}

#clatsop-banner {
    display: grid;
    grid-template-columns: 600px 1fr;
    gap: 15px;
    align-items: center;
    background-color: var(--clatsop-banner-background);
    color: var(--clatsop-banner-foreground);
    padding: 2px;
}

    #clatsop-banner a {
        margin: 5px;
        color: var(--clatsop-banner-foreground);
    }

    #clatsop-banner a:hover {
        text-decoration: none;
    }

    #clatsop-brand {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 15px;
    }

.online-marriage-toolbar,
.online-marriage-toolbar a {
    background-color: var(--clatsop-toolbar-background);
    color: var(--clatsop-toolbar-foreground);
}

.site-content .pull-box:not(.container):not(.grid-header-with-side-item):not(.field-validation-error) {
    background-color: var(--clatsop-pullbox-background);
    color: var(--clatsop-pullbox-foreground);
}

.site-content .help-sidebar {
    background-color: var(--clatsop-pullbox-background);
    color: var(--clatsop-pullbox-foreground);
}

#app-title {
    font-family: 'tangerineregular';
    font-size: 60px;
}

#clatsop-name {
    font-family: 'Oswald', sans-serif;
    font-size: 70px;
    line-height: 1;
}

#clatsop-state {
    font-family: 'Barlow', sans-serif;
    text-align: right;
    line-height: 1;
    font-weight: 700;
    font-size: 40px;
    padding-right: 47px;
}

@media(max-width: 1094px) {
    #clatsop-banner {
        grid-template-columns: 490px 1fr;
    }

    #app-title {
        font-size: 45px;
    }

    #clatsop-name {
        font-size: 53px
    }

    #clatsop-state {
        font-size: 30px;
        padding-right: 34px;
    }
}

@media(max-width: 877px) {
    #clatsop-banner {
        grid-template-columns: 350px 1fr;
    }

    #clatsop-seal {
        width: 85px;
    }

    #app-title {
        font-size: 40px;
    }

    #clatsop-name {
        font-size: 35px;
    }

    #clatsop-state {
        font-size: 20px;
        padding-right: 40px;
    }
}

@media(max-width: 694px) {
    #clatsop-banner {
        grid-template-columns: 330px 1fr;
    }

    #app-title {
        font-size: 30px;
    }

    #clatsop-state {
        font-size: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 615px) {
    #clatsop-banner {
        grid-template-columns: 400px;
    }

    #app-title {
        display: none;
    }

    #clatsop-name {
        font-size: 40px;
    }

    #clatsop-state {
        font-size: 25px;
        padding-right: 62px;
    }
}

@media (max-width: 379px) {
    #clatsop-banner {
        grid-template-columns: 350px;
    }

    #clatsop-name {
        font-size: 35px;
    }

    #clatsop-state {
        font-size: 20px;
        padding-right: 41px;
    }
}

@media (max-width: 349px) {
    #clatsop-name {
        font-size: 30px;
    }

    #clatsop-state {
        font-size: 15px;
        padding-right: 70px;
    }
}

@media (max-width: 329px){
    #clatsop-name,
    #clatsop-state {
        display: none;
    }
}