:root {
    --color-brand1: black;
    --color-brand2: #fd0;
    --color-brand3: white;
    --color-brand4: #ed1c24;
    --color-bg-ads: red;
    --color-text-on-light: black;
    --color-text-on-dark: white;
    --logo-height: 80px;
    --logotext-height: 72px;
}


:root {
    --space: 16px;
    --offset-bands: -32px;
    --ad-offset: -74px;
    --width-bars: 220px;
    --ad-width: 160px;
    --ad-height: 600px;
    --banner-width: 728px;
    --banner-height: 90px;
}

.ad-inline {
    display: none;
}

@media (max-width: 1210px) {
    :root {
        --space: 8px;
        --offset-bands: -16px;
        --ad-offset: -74px;
        --width-bars: 50px;
        --ad-width: 300px;
        --ad-height: 50px;
        --banner-width: 300px;
        --banner-height: 50px;
    }

    header nav {
        flex-direction: column;
    }

    #ad-left {
        display: none;
    }

    #ad-right {
        display: none;
    }

    .ad-inline {
        display: block;
    }
}

#ad-top, #ad-inline1, #ad-inline2 {
    display: block;
    margin: 0 auto;
    width: var(--banner-width);
    height: var(--banner-height);
    background-color: var(--color-bg-ads);
}

#ad-left, #ad-right {
    background-color: var(--color-bg-ads);
    width: var(--ad-width);
    height: var(--ad-height);
    position: absolute;
    top: var(--ad-offset);
    z-index: +1;
}

#ad-left {
    left: calc(calc(var(--width-bars) - var(--ad-width)) / 2);
}

#ad-right {
    right: calc(calc(var(--width-bars) - var(--ad-width)) / 2);
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-brand3);
    font-family: sans-serif;
}

header {
    background-color: var(--color-brand1);
    color: var(--color-text-on-dark);
    padding-left: var(--width-bars);
    padding-right: var(--width-bars);
}

#header {
    display: flex;
    justify-content: space-around;
}

#logo {
    margin-left: -69px;
    flex: 0 0 auto;
    padding: var(--space);
    display: flex;
    align-items: center;
    gap: var(--space);
}

#logo object {
    background-color: var(--color-brand3);
    border-radius: 5px;
    height: var(--logo-height);
    aspect-ratio: 1;
    flex: 0 0 auto;
}

#logo span {
    margin-top: calc(3 * calc(var(--logo-height) - var(--logotext-height)));
    flex: 1 1 auto;
    font-family: "absolute-beauty", sans-serif;
    font-weight: 700;
    font-size: var(--logotext-height);
}

header .social {
    flex: 1 1 auto;
}

header a {
    text-decoration: none;
    color: inherit;
}

header nav {
    padding: var(--space) 0;
    color: var(--color-text-on-light);
    display: flex;
    gap: var(--space);
    justify-content: space-between;
}

header nav a {
    flex: 1 1 auto;
    text-align: center;
    padding: calc(var(--space) / 2) var(--space);
    background-color: var(--color-brand2);
}

main, header, #footer-wrapper {
    position: relative;
    margin: 0 calc(var(--space) * calc(4 / 3));
}

main:before, header:before, #footer-wrapper:before,
main:after, header:after, #footer-wrapper:after {
    content: '';
    display: block;
    height: 100%;
    width: calc(var(--space) * calc(4 / 3));
    background-color: var(--color-brand1);
    border-width: 0 calc(var(--space) / 2);
    border-style: solid;
    border-color: var(--color-brand2);
    position: absolute;
    top: 0;
}

main:before, header:before, #footer-wrapper:before {
    left: var(--offset-bands);
}

main:after, header:after, #footer-wrapper:after {
    right: var(--offset-bands);
}

#footer-wrapper:before, #footer-wrapper:after {
    height: calc(100% - var(--space));
}

main {
    background-color: var(--color-brand1);
    padding-left: var(--width-bars);
    padding-right: var(--width-bars);
}

main a {
    text-decoration-style: dotted;
    color: var(--color-brand2);
}

main article {
    background-color: var(--color-brand3);
    padding: 0 calc(var(--space) * 2);
    min-height: max(calc(var(--ad-height) + var(--ad-offset)), 60vh);
    text-align: center;
}

main article:before,
main article:after {
    content: '';
    height: calc(var(--space) / 2);
    background-color: var(--color-brand1);
    width: 100%;
    display: block;
}

main article:after {
    border-width: calc(var(--space) / 2) 0 0;
    border-style: solid;
    border-color: var(--color-brand2);
}

main article p, main article section {
    margin: 0;
    padding: var(--space);
    color: var(--color-text-on-dark);
    background-color: var(--color-brand1);
}

main article section.camera, main article section.map {
    display: flex;
    justify-content: center;
}

section.camera iframe, section.map iframe {
    border: 0;
    aspect-ratio: calc(16 / 9);
    width: 80%;
}

main article h1, main article h2, main article h3, main article h4, main article h5, main article h6 {
    margin: 0;
    padding: var(--space);
    border-width: var(--space) 0;
    border-style: solid;
    border-color: var(--color-brand1);
    color: var(--color-text-on-light);
    background-color: var(--color-brand2);
}

footer {
    background-color: var(--color-brand3);
    display: flex;
    gap: var(--space);
    justify-content: space-between;
    padding-bottom: var(--space);
    color: var(--color-brand4);
}

footer:before, footer:after {
    background-color: var(--color-brand1);
    height: var(--width-bars);
    width: var(--width-bars);
}

footer:before {
    content: '';
    border-bottom-right-radius: 100%;
    flex: 0 0 auto;
}

footer:after {
    content: '';
    border-bottom-left-radius: 100%;
    flex: 0 0 auto;
}

footer a {
    text-decoration: none;
    color: inherit;
}

#footer-content {
    flex: 1 1 auto;
    padding: var(--space);
    display: flex;
    gap: var(--space);
    justify-content: space-between;
}

#footer-content ul {
    display: flex;
    gap: var(--space);
    justify-content: flex-start;
    list-style-type: none;
    margin: 0;
    padding: 0;
}