* {
    box-sizing: border-box;
    color: goldenrod; 
}

:root {
    --rotation-speed: 90s;
}

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-self: center;
    justify-items: center;
    margin: 0;
    padding: 0;
    width: min(95%, 900px);
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #18213e;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow-x: hidden;
}

header {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
    border-bottom: 1px solid rgba(255, 215, 0, .6);
}

h1 {
    font-family: "Lavishly Yours", cursive;
    font-size: 64px;
    margin: 2rem 0;
}

header img {
    width: max(100vw, 100vh);
    height: auto;
    position: fixed;
    top: calc(max(100vw, 100vh) * -.5);
    left: calc(max(100vw, 100vh) * -.5);
    opacity: 15%;
    z-index: -8;
    animation: spin var(--rotation-speed) linear infinite;
}

main {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
}
select {
    height: 2rem;
    padding: 0 .5rem;
    margin: 0 .5rem;
    background-color: #18213e;;
    min-width: max-content;
}

select:focus-visible {
    outline: none;
}

#searchbar {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    padding: 1rem;
    font-size: 1rem;
}

#searchbar select:last-child {
    width: 4rem;
}

.menu-wrapper {
    align-self: center;
    position: relative;
    width: min(90vw, 500px);
    aspect-ratio: 1;
    font-family: "Lavishly Yours", cursive;
}

.menu-wrapper::before {
    content: "";
    position: absolute;
    inset: 0px 2px 8px 0; /* a kép aszinmteriáját korrekciózza */
    border-radius: 50%;
    background-image: url("./img/logo.webp");
    background-size: 118%;
    background-position: center;
    box-shadow:
        0 8px 20px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.2),
        inset 0 1px 3px rgba(255,255,255,0.3);
    filter: saturate(1.1);
    z-index: -1;
}

.menu-wrapper::after {
    content: "";
    position: absolute;
    inset: 0px 2px 14px 0;
    border-radius: 50%;
    border: 0.25rem solid transparent;
    background-image: conic-gradient(
        #4a2f00,#a87400,#ffcc00,#d8ba40,#ffdf4d,#b8860b,#4a2f00
    );
    transition: all 0.5s ease-in-out;
    z-index: -2;
}

.menu-wrapper:hover::after {
    animation: spin 10s linear infinite;
    animation-fill-mode: forwards;
    filter: blur(2rem);
}

#menu {
    overflow: visible;
}

g {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity;
}

#content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%);

    transition: all .8s ease;
    z-index: -4;
}

#content.right {
    transform: translateX(20%);
}

#content.left {
    transform: translateX(-100%);
}

#content.top {
    transform: translateY(-66%);
}

#content.bottom {
    transform: translateY(-30%);
}

#sign-data {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    /* border: 1px solid gold; */
    border-radius: 2rem;
    margin-top: 2rem;
    padding: 2rem;
    width: min(460px, 95%);
    backdrop-filter: blur(3px);
    background-color: rgba(255, 215, 0, .1);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, .4),
        0 2px 8px rgba(0, 0, 0, .2),
        inset 0 1px 2px rgba(255, 215, 0, .5);
}

#sign-data .sign-header {
    display: flex;
    flex-wrap: wrap;
    flex: 1 0 50%;
    height: 10rem;
}

.sign-header p {
    flex: 1 0 50%;
}

.sign-header p:last-child {
    margin: 2.5rem 0 0 0;
}

#sign-data .sign-title {
    display: flex;
    flex: 1 0 50%;
    gap: 1rem;
    align-items: center;
    font-size: 2rem;
    margin: 0;
}

#sign-data .element {
    height: 2.5rem;
    border-radius: 50%;
    mix-blend-mode: screen;
}

#sign-data .sign-date {
    display: flex;
    flex: 1 0 67%;
    font-size: smaller;
}


#sign-data .sign-pic {
    display: block;
    justify-self: right;
    width: 8rem;
    height: 9rem;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 5px 20px 1px rgba(0, 0, 0, .6);
}

#sign-data > p {
    font-size: smaller;
}


footer {
    display: flex;
    justify-content: center;
    align-self: center;
    width: 100%;
    margin-top: 4rem;
    padding: 3rem 0;
    border-top: 1px solid rgba(255, 215, 0, .6);
}

footer div {
    opacity: .5;
    font-size: .8rem;
    font-style: italic;
    text-align: center;
}

footer img {
    width: max(100vw, 100vh);
    height: auto;
    position: fixed;
    bottom: calc(max(100vw, 100vh) * -.5);
    right: calc(max(100vw, 100vh) * -.5);
    opacity: 15%;
    z-index: -8;
    animation: spin var(--rotation-speed) linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


@media screen and (max-width: 768px) {
    :root {
        --header-height: 4rem;
    }

    h1 {
        font-size: 2rem;
    }

    #search-bar {
        font-size: .6rem;
        padding: .5rem;
    }

    #sign-data .sign-title {
        gap: .5rem;
        font-size: 1.5rem;
    }


    #sign-data {
        border-radius: 1rem;
        margin-top: 1rem;
        padding: 1rem;
    }

    #sign-data::before {
        border-radius: 1rem;
    }


}