body > div {
    width: 100%;
}

.page1,
.page2,
.page1 div,
.page2 div {
    background-size: cover;
    background-clip: content-box;
    background-repeat: no-repeat;
    background-position: center center;
}

.page1 {
    height: 100vh;
}

.page1,
.page2,
.page3 {
    max-width: 1252px;
    width: 100%;
    margin: auto;
    background-color: #8e1d23;
    z-index: 100;
}

.boxtitle {
    font-size: 2em;
}

.page1_box div {
    width: 100%;
}

.page1_box {
    width: 100%;
    height: 100%;
    margin: auto;
    z-index: 101;
}

div.bowl1 {
    width: 100%;
    height: 100%;
    margin: auto;
    top: 0;
    left: 0;
    z-index: 988;
}

    div.bowl1 img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

div.bowl2 {
    width: 100%;
    height: 100%;
    margin: auto;
    top: 0;
    left: 0;
    z-index: 986;
}

    div.bowl2 img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

div.hand {
    width: 100%;
    height: 100%;
    margin: auto;
    top: 0;
    left: 0;
    z-index: 987;
}

    div.hand img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

div.theme {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    animation-name: themeAminid;
    animation-duration: 2s;
    animation-iteration-count: 1;
}

div.imgs {
    height: 100%;
}

div.theme img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes themeAminid {
    0% {
        transform: translateX(30%);
        opacity:0;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translate(0%);
    }
}

div.mountain {
    height: 100%;
    top: 0;
    background-image: url("../img/mountain.png");
    background-position: center bottom;
    z-index: 985;
}

div.cloud {
    width: 100%;
    height: 100%;
    margin: auto;
    top: 0;
    left: 0;
}

    div.cloud img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.lantern1, .lantern2, .lantern3 {
    top: calc(-1% + -10px);
    animation-duration: 7s;
    animation-iteration-count: infinite;
}

    .lantern1 img, .lantern2 img, .lantern3 img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

div.lantern1 {
    width: 30%;
    left: 10%;
    transform-origin: 15% 0px;
    animation-name: lantern1Aminid;
    z-index: 880;
}

@keyframes lantern1Aminid {
    0% {
        transform: rotate(5deg);
    }

    10% {
        transform: rotate(15deg);
    }

    18% {
        transform: rotate(13deg);
    }

    22% {
        transform: rotate(15deg);
    }

    28% {
        transform: rotate(13deg);
    }

    35% {
        transform: rotate(16deg);
    }

    60% {
        transform: rotate(-15deg);
    }

    75% {
        transform: rotate(8deg);
    }

    100% {
        transform: rotate(5deg);
    }
}

div.lantern2 {
    width: 20%;
    left: 25%;
    transform-origin: 20% 0px;
    animation-name: lantern2Aminid;
    z-index: 879;
}

@keyframes lantern2Aminid {
    0% {
        transform: rotate(-5deg);
    }

    18% {
        transform: rotate(15deg);
    }

    22% {
        transform: rotate(13deg);
    }

    28% {
        transform: rotate(15deg);
    }

    60% {
        transform: rotate(-15deg);
    }

    75% {
        transform: rotate(12deg);
    }

    100% {
        transform: rotate(-5deg);
    }
}

div.lantern3 {
    width: 10%;
    left: 35%;
    transform-origin: 30% 0px;
    animation-name: lantern3Aminid;
    z-index: 878;
}

@keyframes lantern3Aminid {
    0% {
        transform: rotate(6deg);
    }

    10% {
        transform: rotate(16deg);
    }

    28% {
        transform: rotate(13deg);
    }

    40% {
        transform: rotate(16deg);
    }

    60% {
        transform: rotate(-16deg);
    }

    80% {
        transform: rotate(10deg);
    }

    90% {
        transform: rotate(-6deg);
    }

    100% {
        transform: rotate(6deg);
    }
}

div.page2 {
    padding: 5% 0;
    color: #F3E4BB;
    background: #76181D;
    z-index: 101;
}

.box {
    width: 80%;
    max-width: 720px;
    margin: auto;
    font-size: 1.5em;
    text-align: center;
}

div.box2 {
    margin: 12px auto;
    color: #76181D;
    background-color: #F3E4BB;
    border-radius: 8px;
}

    div.box2 > div {
        padding: 12px 0;
    }

.box3 {
    border-radius: 8px;
}

    .box3 > div {
        padding: 0 5px;
        display: inline-block;
        vertical-align: middle;
    }

@media (max-width: 550px) {
    .box3 {
        border-radius: 8px;
        outline: 3px solid #F3E4BB;
    }

        .box3 > div {
            width: 100%;
            padding: 8px 0;
        }

            .box3 > div:nth-child(2) {
                color: #76181D;
                background-color: #F3E4BB;
            }
}

.box4 {
    margin: 24px auto 0;
}

    .box4 p {
        display: inline-block;
        vertical-align: middle;
    }


@media (min-width: 551px) {
    .box4:before,
    .box4::after {
        content: ' - ';
    }
}

div.page3 {
    padding: 5% 0 0;
    color: #F3E4BB;
    background: #76181D;
}

    div.page3 > div:nth-child(2) {
        padding: 18px;
    }

    div.page3 iframe {
        width: 100%;
        height: 100vw;
        border-radius: 8px;
    }

@media (min-width: 550px) {
    div.page3 {
        padding: 2% 0 0;
    }
}


.address {
    width: 300px;
    padding: 8px;
    margin: 0 auto 12px;
    color: #76181D;
    font-size: 1.2em;
    background-color: #F3E4BB;
    border-radius: 100px;
}

    .address a {
        color: #76181D;
    }
@media (max-width: 280px) {
    .address {
        width: 90%;
        font-size: 1em;
    }
}

div.NavigationBar {
    max-width: 35px;
    padding: 10px 0;
    text-align: center;
    background-color: #F3E4BB;
    border-radius: 8px;
    top: 3%;
    right: 2%;
    z-index: 991;
}

    div.NavigationBar li {
        padding: 10px 0;
        margin: -1px auto;
        border-top: 1px solid #76181D;
        border-bottom: 1px solid #76181D;
    }

    div.NavigationBar a {
        color: #76181D;
        writing-mode: vertical-rl;
    }