* {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    cursor: default;
    cursor: image-set(url("./images/cursor/default.png") 2x) 0 0, default;
}

.hidden {
    visibility: hidden;
}

p {
    margin: 0;
}

a,
.hover {
    cursor: pointer;
    cursor: image-set(url("./images/cursor/pointer.png") 2x) 0 0, pointer;
}

input {
    height: 137rem;
    font-family: "Courier New", Courier, monospace;
    border: none;
    background-color: transparent;
    caret-color: #739574;
    color: #739574;
    font-style: italic;
    font-size: 80rem;
    line-height: 137rem;

    cursor: text;
    cursor: image-set(url("./images/cursor/text.png") 2x) 0 0, text;
}

input:focus {
    outline: none;
}

html {
    background-color: #a7dba9;
    font-size: calc(1vh / 46.08);
    position: relative;
}

body {
    color: white;
    font-family: "Courier New", Courier, monospace;

    width: 7371rem;
    height: 4608rem;

    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

body.loading > * {
    visibility: hidden;
}

body > .animation {
    display: none;
}

body.loading > .animation {
    width: 448rem;
    height: 313rem;

    display: block;
    left: calc(7371rem / 2 - 448rem / 2);
    top: calc(4608rem / 2 - 313rem / 2);
    visibility: visible;

    animation: loading 1.5s infinite 0.5s step-end;
}
@keyframes loading {
    0% {
        background-image: url("./images/loading_1.png");
    }
    50% {
        background-image: url("./images/loading_2.png");
    }
    100% {
        background-image: url("./images/loading_1.png");
    }
}

@media (max-aspect-ratio: 1.599609375) and (min-device-width: 480px) {
    html {
        font-size: calc(1vw / 73.71);
    }
}

@media (max-device-width: 480px) {
    body {
        overflow: scroll;
    }
}

.interaction-container {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.interaction-container .hover {
    z-index: 1;

    cursor: pointer;
    cursor: image-set(url("./images/cursor/pointer.png") 2x) 0 0, pointer;
}

.interaction-container > header > .hover {
    height: 126rem;
    top: 105em;
}
.interaction-container > header > .hover:hover {
    border-bottom: 1px solid #719574;
}

.interaction-container > header > .about {
    width: 268rem;
    left: 1867rem;
}

.interaction-container > header > .schedule {
    width: 440rem;
    left: 2405rem;
}

.interaction-container > header > .guide {
    width: 607rem;
    left: 3121rem;
}

.interaction-container > header > .faqs {
    width: 244rem;
    left: 3986rem;
}

.interaction-container > header > .store {
    width: 576rem;
    left: 4485rem;
}

.interaction-container > header > .rsvp {
    height: 186rem;
    width: 1919rem;
    top: 80rem;
    left: 5332rem;
}
.interaction-container > header > .rsvp:hover {
    border-bottom: none;
}

.content-container {
    width: 100%;
    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    z-index: 0;
}

.overlay-container {
    width: 100%;
    height: 100%;
}

.overlay-container > .overlay {
    width: 100%;
    height: 100%;
    display: none;

    top: 0;
    left: 0;
    z-index: 100;
}

.overlay-container > .overlay .close,
.overlay-container > .overlay .button {
    cursor: pointer;
    cursor: image-set(url("./images/cursor/pointer.png") 2x) 0 0, pointer;
}

.overlay-container > .overlay > * {
    cursor: default;
    cursor: image-set(url("./images/cursor/default.png") 2x) 0 0, default;
}

.overlay-container > .overlay.visible {
    display: block;
}

.overlay-container > .overlay.visible::after {
    width: 100vw;
    height: 100vh;

    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -100;

    background-color: rgba(0, 0, 0, 0.2);
    content: "";
}

.overlay-container > .overlay > .content {
    width: 3249rem;
    height: 1965rem;

    top: calc(4608rem / 2 - 1965rem / 2);
    left: calc(max(7371rem, 100vw) / 2 - 3249rem / 2);
}

.overlay-container > .overlay > .content > .close {
    width: 122rem;
    height: 122rem;

    left: 3037rem;
    top: 22rem;

    opacity: 0;
}
