@property --neon {
    syntax: '<color>';
    inherits: true;
    initial-value: #ff0036
}

@property --neon2 {
    syntax: '<color>';
    inherits: true;
    initial-value: #ff2f9e
}

@keyframes shift {

    0%,
    100% {
        --neon: #ff0036;
        --neon2: #ff2f9e
    }

    33% {
        --neon: #ff2f9e;
        --neon2: #a63cff
    }

    66% {
        --neon: #a63cff;
        --neon2: #ff0036
    }
}

:root {
    animation: shift 14s steps(18) infinite;
    color-scheme: dark
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    min-height: 100%;
    background: linear-gradient(160deg, #2b1733 25%, #ff0036 170%) fixed
}

body {
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 0rem;
    font: 300 16px/1.7 Outfit, system-ui, sans-serif;
    color: #fff;
    text-align: center;
    background: transparent
}

.card {
    width: min(560px, 100%);
    padding: 4rem;
    border: 1px solid var(--neon);
    border-radius: 28px;
    background: rgba(0, 0, 0, .42);
    box-shadow: 0 0 34px -10px var(--neon)
}

.logo {
    margin: 0;
    font: 400 clamp(3.4rem, 14vw, 5rem)/1 Allison;
    letter-spacing: 0.2rem;
}

.eyebrow {
    margin: 1rem;
    font-size: 0.8rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: #d6d6d6
}

.line {
    display: block;
    width: 300px;
    height: 1px;
    margin: 1rem auto;
    background: linear-gradient(90deg, var(--neon), var(--neon2))
}

h2 {
    margin: 0 0 .8rem;
    font-weight: 200;
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    letter-spacing: .16em;
    text-transform: uppercase
}

.lead {
    margin: 0 auto 1.8rem;
    max-width: 42ch;
    color: #e6e6e6
}

address {
    display: grid;
    gap: .2rem;
    font-style: normal;
    font-size: .88rem;
    color: #d6d6d6
}

address a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--neon);
    justify-self: center
}

address a:hover {
    color: var(--neon)
}

:focus-visible {
    outline: 2px solid var(--neon);
    outline-offset: 3px
}

@media(hover:none) {
    :root {
        animation-duration: 42s
    }
}

@media(prefers-reduced-motion:reduce) {
    :root {
        animation: none
    }
}

@media(max-width:480px) {
    .eyebrow {
        letter-spacing: .2em
    }

    .card {
        padding: 2.4rem 1.4rem
    }
}

/* stopka */
footer {
    background: rgba(0, 0, 0, .42);
    padding: 0rem 0;
    border-top: 1px solid var(--neon);
    box-shadow: 0 -10px 40px -20px var(--neon)
}

.foot {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2.5rem
}

footer h3 {
    font: 400 .76rem var(--body);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--neon)
}

footer h3.logo {
    font: 400 3rem/1 Allison, cursive;
    text-transform: none;
    letter-spacing: 0;
    color: #fff
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0
}

footer li {
    margin-bottom: .4rem
}

footer a {
    text-decoration: none
}

footer a:hover {
    color: var(--neon)
}

.copy {
    margin: 0.5rem;
    padding-top: 0rem;
    /* border-top: 1px solid rgba(255, 255, 255, .15); */
    font-size: .8rem;
    color: #bbb;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100vw;
}

@media(max-width:860px) {
    .menu-btn {
        display: block
    }

    nav ul {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: #000;
        flex-direction: column;
        padding: 1.2rem 1.5rem 1.6rem;
        border-bottom: 1px solid var(--neon)
    }

    nav ul.open {
        display: flex
    }

    .hg,
    .about,
    .book,
    .map,
    .faq-cols,
    .foot {
        grid-template-columns: 1fr
    }

    .hg {
        min-height: 0;
        padding: 4rem 1.7rem
    }

    .arch {
        max-width: 300px
    }

    .ring {
        max-width: 320px;
        justify-self: center
    }

    section {
        padding: 4.5rem 0
    }

    .hero::before,
    body.sub::before {
        left: 6px
    }

    .hero::after,
    body.sub::after {
        right: 6px
    }
}

@media(prefers-reduced-motion:reduce) {

    :root,
    .arch,
    .ring {
        animation: none
    }

    html {
        scroll-behavior: auto
    }

    * {
        transition: none !important
    }
}