* {
    background-color: rgba(240, 248, 255, 0);
}

body {
    width: 100%;
    height: 100%;
    background-color: rgb(53, 53, 53);
    overflow: hidden;
}

.overlayer {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    p {
        font-size: 22px;
        color: white;
        text-align: center;
        text-shadow: 1px 1px 2px gray;
    }
}

.bg {
    display: none;
    opacity: 0;
    /* display: flex; */
    position: fixed;

    img {
        position: fixed;
        max-width: 100%;
        height: auto;
    }

    /* calc */
    #topgreen {
        max-width: calc(100vw *1.4);
        height: auto;
        top: -5%;
        left: -10%;
    }

    #bottomgreen {
        max-width: 120%;
        height: auto;
        bottom: 0%;
        right: 0;
    }

    #whiteCover {
        display: none;
        /* background-image: url("/assets/ui/framebg.png");
        background-repeat: no-repeat;
        background-size: auto;
        background-position: center; */
        width: 100vw;
        height: 100vh;
        background-color: rgb(130, 220, 140);
    }

    #cloud {
        max-width: 40%;
        height: auto;
        top: 3%;
        right: 0%;
    }

    #town {
        max-width: 70%;
        height: auto;
        /* bottom: calc(1920*0.1px); */
        bottom: 0%;
        right: 1%;
    }

    /* #bicycle {
        max-width: 30%;
        height: auto;
        bottom: 3%;
        left: 5%;
    } */

    #logo {
        max-width: 20%;
        top: 10%;
        left: 10%;
    }

    #photo {
        max-width: 70px;
        left: 50%;
        /* margin-left: -100px; */
        bottom: 5%;
        transform: translate(-50%, -50%);
    }

    #return {
        display: none;
        /* opacity: 0; */
        max-width: 70px;
        right: 10%;
        margin-left: -100px;
        bottom: 5%;
        filter: drop-shadow(1px 1px 0.2rem #000000);
    }

    #firework {
        /* display: none; */
        position: fixed;
        top: 22%;
    }

    #leo {
        min-width: 55%;
        max-width: 55%;
        /* 30 % to 55 % */
        position: fixed;
        right: 0%;
        bottom: 40%;
        opacity: 0;
    }

    #leo-s {
        max-width: 50%;
        /* 30 % to 55 % */
        position: fixed;
        right: 1%;
        bottom: 45%;
        opacity: 0;
    }

    #leo2 {
        min-width: 55%;
        max-width: 55%;
        /* 30 % to 55 % */
        position: fixed;
        right: 0%;
        bottom: 25%;
        opacity: 0;
    }

    #leo2-s {
        max-width: 50%;
        /* 30 % to 55 % */
        position: fixed;
        right: 1%;
        bottom: 50%;
        opacity: 0;
    }

    #leo3 {
        min-width: 70%;
        max-width: 70%;
        /* 30 % to 55 % */
        /* top: 55%; */
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    #leo3-s {
        max-width: 50%;
        /* 30 % to 55 % */
        position: fixed;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* opacity: 0; */
    }

    #leo3-f1 {
        max-width: 90%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    #hat {
        transform-origin: top;
        position: fixed;
        max-width: 60%;
        z-index: 4;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* opacity: 0; */
    }

    #finger {
        position: fixed;
        max-width: 30%;
        z-index: 5;
        /* transform: translate(-50%, -50%); */
        top: 53%;
        left: 60%;
        opacity: 0;
    }
}

.preview {
    position: fixed;
    display: none;
    top: 0;
    opacity: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: aquamarine;
}

#previewimg,
#previewimg2 {
    transform-origin: center;
    left: 0;

    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
}

.frameItem {
    position: fixed;
    z-index: 0;
    left: 0;
    /* display: none; */
}

.CoverLayer {
    display: none;
    opacity: 0;
    position: fixed;
    width: 1080px;
    height: 1920px;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
}

.titleTextSet {
    z-index: 3;

    #titleT {
        position: fixed;
        width: 90%;
        transform: translate(-50%, 0);
        left: 50%;
    }
}

.NextMenu {
    display: none;
    opacity: 0;
    position: fixed;
    z-index: 4;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 8%;

    h1 {
        font-size: 1.5em;
        text-align: center;
    }

    /* photo frame */
    .imghere {
        display: flex;
        margin-left: auto;
        margin-right: auto;
        width: 60%;
        height: 60%;
        background-color: rgb(130, 220, 140);
        align-items: center;
        justify-content: center;
    }

    .btnSet {
        display: flex;
        flex-direction: row;
        justify-content: center;

        div {
            margin: 10px;
            background-color: white;
            width: 24%;
            height: 15%;
            border-radius: 10px;
            border: solid;

            p {
                font-size: 1.2em;
                font-weight: bold;
                color: black;
            }
        }
    }

    #Previewtitle {
        margin-bottom: 10%;
    }

    #overimg {
        position: absolute;
        width: 35%;
        top: 10%;
        left: 7%;
        transform: rotate(-25deg);
    }

    #overimg2 {
        position: absolute;
        width: 30%;
        bottom: 30%;
        right: 7%;
        transform: rotate(25deg);
    }
}

.set1,
.set2,
.set3 {
    display: none;
    opacity: 0;
}

@media only screen and (min-width: 1000px) {
    .titleTextSet {

        #titleT {
            width: 500px;
        }
    }

    .bg {

        #topgreen {
            max-width: calc(100vw *1.4);
            height: auto;
            top: -5%;
            left: -10%;
        }

        #bottomgreen {
            max-width: 120%;
            height: auto;
            bottom: 0%;
            right: 0;
        }
    }
}