body{
    margin:0;
    background:red;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    font-family:Verdana,sans-serif;
    cursor:url("kitten2.jpg"), auto;
}

.container{
    position:relative;
    display:inline-block;
    width:800px;
    z-index:1;
}

.flowerlace{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    object-fit:cover;
    object-position:center;
    z-index:-1;
    opacity:0.87;
    filter:invert(100%);
    pointer-events:none;
}


/* Stars border */

.bg-frame{
    position:relative;
    display:inline-block;
    padding:23.3px;
    background:url("stars.gif") repeat;
    background-size:32px 32px;
    box-sizing:content-box;
    line-height:0;
    z-index:1;
    overflow:visible;
}

.bg{
    display:block;
    width:800px;
    height:auto;
}


/* Desert button */

.desert-button{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    width:150px;
    height:60px;

    background:white;
    color:black;

    border:2px solid black;

    font-family:Verdana,sans-serif;
    font-size:18px;

    cursor:pointer;

    z-index:9000;
}




/* Stars border */

.bg-frame{
    position:relative;
    display:inline-block;
    padding:23.3px;
    background:url("stars.gif") repeat;
    background-size:32px 32px;
    box-sizing:content-box;
    line-height:0;
    z-index:1;
}


/* Desert image window */

.desert-window{
    position:relative;
    width:800px;
    overflow:hidden;
    isolation:isolate;
}

/* Desert image window */

.desert-window{
    position:relative;
    width:800px;
    overflow:hidden;
    isolation:isolate;
}


/* ========================= */
/* Tumbleweed */

.tumbleweed{

    position:absolute;

    width:100px;
    height:100px;

    left:-350px;
    bottom:50px;

    background:url("tumbleweed.png") center/contain no-repeat;

    z-index:8000;

    animation:tumble 20s linear infinite;
    animation-delay:3s;

}


@keyframes tumble{

    0%{
        left:-100px;
        transform:rotate(0deg);
    }

    80%{
        left:700px;
        transform:rotate(1440deg);
    }

    100%{
        left:700px;
        transform:rotate(1440deg);
    }

}


/* ========================= */
/* Green box */

.green-box{

    position:absolute;

    top:220px;

    left:640px;

    width:350px;

    height:185px;

    background:#39ff14;

    z-index:2;


    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;


    padding:10px;

    box-sizing:border-box;

    gap:10px;

    overflow:auto;
}


.pg1penguin,
.pg2penguin{

    width:calc(100% - 20px);

    height:auto;

    display:block;

    flex-shrink:0;

}



/* ========================= */
/* Crash */

.crash{

    position:absolute;

    top:180px;

    left:-30px;

    width:250px;

    z-index:200;

}



/* ========================= */
/* Kitten */

.cutekitten{

    position:absolute;

    top:20px;

    left:20px;

    width:150px;

    height:auto;

    z-index:500;

}



.cute-kitten{

    position:absolute;

    top:20px;

    right:20px;

    width:120px;

    border:none;

    background:none;

    cursor:pointer;

    padding:0;

    z-index:600;

}



.cute-kitten img{

    width:100%;

    display:block;

}



/* ========================= */
/* Title */

.whalecum{

    position:absolute;

    top:50px;

    left:50%;

    transform:translateX(-50%);


    font-family:Impact,"Arial Black",sans-serif;

    font-size:60px;

    font-weight:900;


    text-transform:uppercase;

    letter-spacing:4px;


    color:#fff200;

    -webkit-text-stroke:2px #6F2DA8;


    text-shadow:
    2px 2px 0 #6F2DA8,
    4px 4px 0 #000;


    white-space:nowrap;

    z-index:1000;


    animation:flash .8s steps(2,end) infinite;

}



/* ========================= */
/* Link */

.text-button{

    display:inline-block;

    color:#ffffff;

    font-family:sans-serif;

    font-weight:bold;

    cursor:pointer;

    position:absolute;

    margin-left:50px;

    margin-top:-300px;

    z-index:9999;

}


.text-button:hover{

    background-color:#0056b3;

}



/* ========================= */
/* Text */

.center-text{

    position:absolute;

    width:100%;

    top:130px;

    text-align:center;

    color:black;

    z-index:700;

}



.welcome{

    position:absolute;

    width:100%;

    top:165px;

    text-align:center;

    font-family:"Times New Roman",serif;

    color:white;

    z-index:700;

}



/* ========================= */
/* Pepe */

.pepepeblue{

    position:absolute;

    width:300px;

    top:0;

    left:500px;

    z-index:300;

    opacity:0.5;

}



/* ========================= */
/* Flash */

@keyframes flash{

    0%,49%{

        color:#fff200;

        -webkit-text-stroke:2px #7f1734;


        text-shadow:
        2px 2px 0 #6F2DA8,
        4px 4px 0 #000,
        0 0 8px #fff200;

    }


    50%,100%{

        color:#6F2DA8;

        -webkit-text-stroke:2px #fff200;


        text-shadow:
        2px 2px 0 #fff200,
        4px 4px 0 #000,
        0 0 8px #6F2DA8;

    }

}