html{
}

body{
    height: 100%;
    background-color: black;

    background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 255, 17, 0.1) 59%, rgba(24, 39, 0, 0.8) 80%, rgb(10, 19, 0) 100%),
    #000d02 url('https://merrymaker.wiki/cdn/bg.png');
    background-attachment: fixed;
    /* background-image: url('bg.png'); */
    background-repeat: repeat;
}

.mmw{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: max(15vh,20vw);
    /* width:35%; */
}
.un_con{
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:  min(-2vh,-3vw);
    width: max(25vh,30vw);
    z-index: 1;
}

.ma{
    /* z-index: 10; */
    /* background-image: url("MA.png"); */
    /* display:block; */
        margin-top:  min(-2vh,-3vw);

    margin-left:auto;
    margin-right:auto;
    position: relative;

    width: max(43vh,50vw);
    background-size: max(43vh,50vw);
    /* min-height: max(43vh,50vw); */
}

.MA_BG{
    /* display:block; */
    position: absolute;
    /* height: 100%; */
    width: 100%;
    z-index: 1;
}
.and_more{
    position: relative;
    /* margin-bottom: ; */
    /* margin-top:  min(-2vh,-3vw); */
    
    width: inherit;
    top: max(21vh,25vw);
    right: min(-7.5vh,-8vw);

}

.and_more2{
    position: relative;
    /* margin-bottom: ; */
    /* margin-top:  min(-2vh,-3vw); */
    width: inherit;
    scale: 50%;
}

.bsky{
    position: absolute;
    z-index: 10;

    /* margin-bottom: ; */
    /* margin-top:  min(-2vh,-3vw); */
    width: inherit;
    left: min(-13vh,-15vw);

    top: max(13vh,15vw);
}

.bsky_img{
    position: absolute;
    /* margin-bottom: ; */
    /* margin-top:  min(-2vh,-3vw); */
    width: inherit;
    scale: 34%;
}


.tumblr{
    position: absolute;
    z-index: 10;

    /* margin-bottom: ; */
    /* margin-top:  min(-2vh,-3vw); */
    width: inherit;
    left: min(-13vh,-15vw);
    top: max(17vh,19.72vw);
}

.insta{
    top: max(20.6vh,23.9vw);
}

.tumblr_img{
    position: absolute;
    /* margin-bottom: ; */
    /* margin-top:  min(-2vh,-3vw); */
    width: inherit;
    scale: 34%;
}


.doze{
    display:block;
    margin-left:auto;
    margin-right:auto;
    bottom:0px;
    width: max(21.5vh,25vw);
}

.bloom{
    position:absolute; 
    top:0px; 
    right:0px;
    width: max(16vh,25vw);
    animation: 0.5s cubic-bezier(0.64, 0.57, 0.67, 1.53) 0s slide;
    /* width:40%; */
}
.bloom_flip{
    position:absolute; 
    top:0px; 
    left:0px;
    width: max(16vh,25vw);
    animation: 0.5s cubic-bezier(0.64, 0.57, 0.67, 1.53) 0s slide_left;

    /* width:40%; */
}

#flipped{
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}


@keyframes slide {
    
    from { right: -10vh; }
    to {
        right:0px
    }
  }

@keyframes slide_left {

from { left: -10vh; opacity: 0;}
to {
    left:0px;
    opacity: 1;
}
}

.picture_frame{
    z-index: 10;
    /* background-color: rgba(255, 255, 255, 0.344); */
    position:relative;
    width: max(37.5vh,43.5vw);
    height: max(46.5vh,53.94vw);
    margin-left:auto;
    margin-right:auto;
    margin-top:  max(30.5vh,35.38vw);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;

}

.div_shared{
    padding: 1%;
    position: relative;
    /* height: 100%; */
    background-repeat: no-repeat;

}

.div1 { 
    grid-area: 1 / 1 / 2 / 2;
}
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 3 / 3 / 4; }
.div7 { grid-area: 3 / 1 / 4 / 2; }
.div8 { grid-area: 3 / 2 / 4 / 3; }
.div9 { grid-area: 3 / 3 / 4 / 4; }
.div10 { grid-area: 4 / 1 / 5 / 2; }
.div11 { grid-area: 4 / 2 / 5 / 3; }
.div12 { grid-area: 4 / 3 / 5 / 4; } 

.frame{
    top:0px;
    left:0;
    width: max(11.5vh,13.5vw);
    position:absolute;
    pointer-events: none;
    /* padding: auto; */
    /* scale: 50%; */
}

.thumbnail{
    top: max(-0.20vh,-0.23vw);
    left:0;
    width: max(11.6vh,13.7vw);
    position:absolute; 
    /* padding: auto; */
    scale: 83%;
}