body {
    background-image: url(./2023images/img_christmas_bg_under.webp);
}

@media only screen and (min-width: 768px) {
    body {
        background-image: url(./2023images/img_christmas_bg_under.webp);
    }
}

header {
    overflow: hidden;
    margin-bottom: -42vw;
}

@media only screen and (min-width: 768px) {
    header {
        margin-bottom: -19vw;
    }
}

aside {
    animation: blinking 10s infinite;
}
@keyframes blinking {
    0%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
#topBg {
    aspect-ratio: auto;
}



#snow-wrapper {
    position: relative;
}

#floatsnow {
    position: absolute;
    width: 100%;
    z-index: 8;
    margin-top: 61vw;
}

.snowItem {
    position: absolute;
    z-index: 22;
}

#snow01 {
    top: 89.75vw;
    left: -3vw;
    width: 6.75vw;
}

#snow02 {
    top: 73vw;
    left: 27.5vw;
    width: 7vw;
}

/* TODO: */
#snow03 {
    top: 70vw;
    left: 41.25vw;
    width: 5.5vw;
}

#snow04 {
    top: 69.75vw;
    left: 52vw;
    width: 11.5vw;
}

#snow05 {
    top: 107.25vw;
    right: 7.5vw;
    width: 6.725vw;
    z-index: 0;
}

#snow06 {
    top: 107.25vw;
    right: -7vw;
    z-index: 0;
    width: 11vw;
}

@media only screen and (min-width: 768px) {
    #floatsnow {
        margin-top: 33vw;
    }

    #snow01 {
        top: 62.75vw;
        left: 4vw;
        width: 6.75vw;
    }

    #snow02 {
        top: 45vw;
    }

    #snow03 {
        top: 42.75vw;
    }

    #snow04 {
        top: 41.75vw;
    }

    #snow05 {
        top: 59.25vw;
        right: 15.5vw;
        width: 6.725vw;
        z-index: 22;
    }

    #snow06 {
        top: 60.25vw;
        right: 4vw;
        width: 11vw;
        z-index: 22;
    }
}

#reward-wrapper {
    position: relative;
}

.rewardItem {
    position: absolute;
    z-index: 10;
}

#iphone {
    margin-top: 58vw;
    width: 26.5vw;
    left: -7vw;
}

#airpods {
    margin-top: 59.5vw;
    width: 19.5vw;
    right: -4vw;
}

#spark01 {
    margin-top: 76.5vw;
    width: 12.75vw;
    left: -1.25vw;
}

#spark02 {
    margin-top: 59vw;
    width: 4.75vw;
    left: 3.75vw;
    opacity: 0.8;
}

#light01 {
    margin-top: 60.25vw;
    width: 3vw;
    left: 4.75vw;
}

#spark03 {
    margin-top: 69vw;
    width: 5vw;
    left: 11.25vw;
}

/* FIXME: */

#light02 {
    margin-top: 59.75vw;
    width: 2.75vw;
    right: 5.65vw;
}

#spark04 {
    margin-top: 75.5vw;
    width: 4.75vw;
    right: 1.75vw;
}

#light03 {
    margin-top: 76.75vw;
    width: 2.75vw;
    right: 2.65vw;
}

@media only screen and (min-width: 768px) {

    #iphone {
        margin-top: 36vw;
        left: -5vw;
    }

    #airpods {
        margin-top: 34.5vw;
        width: 20.5vw;
        right: -4vw;

    }

    #spark01 {
        margin-top: 46.5vw;
        width: 12.75vw;
        left: -2.25vw;

    }

    #spark02 {
        margin-top: 35.25vw;
        width: 4.75vw;
        left: 6.75vw;
        opacity: 0.8;

    }

    #light01 {
        margin-top: 36.25vw;
        width: 3vw;
        left: 7.75vw;

    }

    #spark03 {
        margin-top: 52vw;
        width: 2vw;
        left: 17.75vw;

    }


    #light02 {
        margin-top: 42vw;
        width: 3.75vw;
        right: 8.25vw;
        opacity: 0.95;

    }

    #spark04 {
        margin-top: 53.5vw;
        width: 4.75vw;
        right: 2.75vw;
    }

    #light03 {
        margin-top: 54.75vw;
        width: 2.75vw;
        right: 3.65vw;
    }
}

#spokesperson-wrapper {
    position: relative;
    display: block;
}

#spokesperson-wrapper>:nth-child(n) {
    position: absolute;
}

#spokesperson-wrapper>:nth-child(1) {
    right: -7.5vw;
    width: 50.5vw;
    margin-top: 1.75vw;
    display: none;
}

#spokesperson-wrapper>:nth-child(2) {
    left: -22.575vw;
    width: 70vw;
    margin-top: 1.5vw;
    z-index: 5;
    display: none;
}

#spokesperson-wrapper>:nth-child(3) {
    right: 0.5vw;
    width: 41vw;
    margin-top: 1.75vw;
}

#spokesperson-wrapper>:nth-child(4) {
    left: -22.575vw;
    width: 68vw;
    margin-top: 5.5vw;
    z-index: 5;
}

@media only screen and (min-width: 768px) {
    #spokesperson-wrapper>:nth-child(1) {
        right: -6vw;
        width: 40.5vw;
        display: block;
    }

    #spokesperson-wrapper>:nth-child(2) {
        left: -14.575vw;
        width: 58vw;
        display: block;
    }

    #spokesperson-wrapper>:nth-child(3) {
        display: none;
    }

    #spokesperson-wrapper>:nth-child(4) {
        display: none;
    }
}

#logo-wrapper {
    position: relative;
}

.logoItem {
    position: absolute;
    z-index: 6;
}

#title01 {
    margin-top: 5vw;
    width: 37.75vw;
    left: 32.75vw
}

#title02 {
    margin-top: 17.5vw;
    width: 37.5vw;
    left: 32.25vw;
}

#date {
    margin-top: 30vw;
    width: 38.5vw;
    left: 31.5vw;
}

#subtitle {
    margin-top: 43.5vw;
    width: 100%;
    left: 0;
    z-index: 25;
}

@media only screen and (min-width: 768px) {
    #title01 {
        margin-top: 1vw;
        width: 27.75vw;
        left: 37.75vw
    }

    #title02 {
        margin-top: 10vw;
        width: 27.5vw;
        left: 37.25vw
    }

    #date {
        margin-top: 19.5vw;
        width: 22.5vw;
        left: 39.75vw
    }

    #subtitle {
        margin-top: 25.5vw;
        width: 66.5vw;
        left: 17.25vw;
        z-index: 6;
    }
}


/* nav buttons */
nav {
    margin-top: -55vw;
}

#navbuttonWrapper {
    list-style: none;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    z-index: 20;
    justify-content: center;
}

@media only screen and (min-width: 768px) {
    nav {
        margin-top: -36VW;
    }

    #navbuttonWrapper {
        padding: 0 10%;
    }


}

.navButton {
    width: 50%;
    margin-top: 0.5vw;
    display: flex;
    justify-content: center;
    position: relative;
    align-content: center;
    z-index: 20;
}


.navButton:not([data-startat]) {
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .navButton {
        width: 33.33%;
        margin: 0 3.75%;
    }
}

.navButtonImg {
    width: 100%;
    transition: 0.7s;
    aspect-ratio: 1.4961;
}

.navButton>.navButtonImg:nth-child(2) {
    position: absolute;
    opacity: 0;
    height: 100%;
}

.navButton:not([data-startat]):hover>.navButtonImg:first-child,
.navButton.active>.navButtonImg:first-child {
    opacity: 0;
}

.navButton:not([data-startat]):hover>.navButtonImg:nth-child(2),
.navButton.active>.navButtonImg:nth-child(2) {
    opacity: 1;
}

.navButton[data-startat]>.navButtonImg {
    filter: brightness(0.3);
}


.navButton[data-startat]>.comingSoon {
    display: block;
}

/* content */


#firstContentImg {
    aspect-ratio: 1;
}

.contentWrapper {
    display: none;
    position: relative;
}

.contentWrapper[active] {
    display: block;
}

/* hiddenLink  */
.hiddenLink {
    width: 29%;
    left: 9%;

    /* for debug */
    /* background: rgba(182, 135, 75, 0.4); */
}


.hiddenLink[link="2"] {
    bottom: 27.9%;
}



@media only screen and (min-width: 768px) {
    #contents {
        margin-top: 0;
    }

    .hiddenLink {
        /* border: solid 1px red; */

        bottom: 26.8%;
        width: 16.5%;
        left: 14.4%;
    }

    .hiddenLink[link="2"] {
        bottom: 26.8%;
    }

}


/* footer */
footer {
    margin-top: 30px;
    border-top: 1px solid #ffea00;
    background: #4a0017;
    color: #fff;
    line-height: 1.5;
    padding: 20px 0px;
    /* reserver space for links float in screen bottom */
    padding-bottom: 20vw;
}

@media only screen and (min-width: 768px) {
    footer {
        padding-bottom: 20px;
    }
}

#footerContentWrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}

@media only screen and (min-width: 768px) {
    #footerContentWrapper {
        flex-direction: row;
    }
}

#ageLimitIcon {
    margin-top: 0.5rem;
}

@media only screen and (min-width: 768px) {
    #ageLimitIcon {
        margin-top: 0;
    }
}

/* float contents */
#desktopBackToTop {
    position: fixed;
    cursor: pointer;
    transform: scale(0.8);
    right: 2.8rem;
    bottom: 0px;
    display: none;
    z-index: 100;
}

@media only screen and (min-width: 768px) {
    #desktopBackToTop {
        display: block;
    }
}