* {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    /* outline: 2px;
outline-style: dashed;
outline-color: rgb(255, 0, 0);
border: 1px;
border-style: solid;
border-color: rgb(0, 255, 170); */
}

button {
    background-color: rgba(255, 0, 238, 0);
    border: 1px;
    padding: 5px;
    margin: 5px;
    box-shadow: 0px 0px 10px 2px rgba(250, 3, 234, 1), 0px 0px 5px 2px rgb(0, 26, 255);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.555);
    text-shadow: 0px 0px 5px rgb(255, 0, 255), -1px 0px 2px rgb(55, 0, 255), 3px 0px 4px rgb(153, 0, 255);
}

.ButtonContainer {
    display: flex;
    justify-content: center;
    width: 50%;
    position: absolute;
    bottom: 2%;
}

.UserBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 363px;
    margin-top: 50px;
    border: 1px;
    /* border-style: dotted;
    border-color: pink; */
    text-align: center;
    outline: 2px;
}

/* .UserBox-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px;
    border-style: groove;
    border-color: rgb(250, 3, 234, 1);
    margin: 0px 0px 0px 0px;
    outline: 4px;
    width: 750px;
    height: 250px;
    background-color: black; remove to give inner box a bg HIDE TS
    color: white;
    box-shadow: 0px 0px 10px 6px rgba(250, 3, 234, 1), 0px 0px 15px 5px rgb(0, 26, 255);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    box-sizing: border-box;
    position: relative;
} */

.UserBox-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px;
    width: 750px;
    height: 250px;
    border-radius: 20px;
    color: white;
    position: relative;

    /* Restore original glow directly on the box */
    box-shadow:
        0px 0px 10px 6px rgba(250, 3, 234, 1),
        0px 0px 15px 5px rgb(0, 26, 255);
}

.username {
    position: relative;
    bottom: 10%;
    left: 3%;
    padding: 1px;
    text-align: center;
    outline: 2px;
    font-size: 70px;
    color: rgba(0, 0, 0, 0.80);
    text-shadow: 0px 0px 5px rgb(255, 0, 255), -1px 0px 2px rgb(55, 0, 255), 3px 0px 4px rgb(153, 0, 255), -1px 0px 5px rgb(255, 0, 255), -1px 0px 2px rgb(55, 0, 255), -3px 0px 4px rgb(153, 0, 255);
    font-family: Evil;
}

.pfp {
    position: relative;
    left: 5%;
    /* change this if pfp gets pushed off the box */
    width: 150px;
    height: 150px;
    border-radius: 200px;
    box-sizing: border-box;
    border: 2px solid #ff00ea;
    box-shadow: 0px 0px 15px #8c00ff, 0px 0px 20px rgb(205, 43, 226);
    margin-right: 30px;
}

.SexyText {
    color: rgba(255, 255, 255, 0.555);
    text-shadow: 0px 0px 5px rgb(255, 0, 255), -1px 0px 2px rgb(55, 0, 255), 3px 0px 4px rgb(153, 0, 255);
}

#logo {
    position: relative;
    left: 1%;
    color: rgba(0, 0, 0, 0.815);
    text-shadow: 0px 0px 5px rgb(255, 0, 255), -1px 0px 2px rgb(55, 0, 255), 3px 0px 4px rgb(153, 0, 255);
    font-family: Evil;
}

.TextContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    right: 32%;
    top: 15%;
    /* border-bottom: 2px;
    border-bottom-style: solid;
    border-color: rgba(250,3,234,1); */
}

.UserCustomMsg {
    width: 225px;
    font-size: 17px;
    font-family: Evil;
    color: rgb(0, 0, 0);
    outline: 2px;
    text-shadow: 1px 0px 2px rgb(255, 0, 255), 1px 0px 2px rgb(55, 0, 255), 1px 0px 2px rgb(153, 0, 255), -1px 0px 2px rgb(255, 0, 255), -1px 0px 2px rgb(55, 0, 255), -1px 0px 2px rgb(153, 0, 255);
}

.List {
    list-style-type: none;
    padding: 2%;
    margin: 1px;
    position: relative;
    right: 5%;
    box-shadow: 0px 0px 10px 2px rgba(250, 3, 234, 1), 0px 0px 5px 2px rgb(0, 26, 255);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.List li {
    margin-bottom: 1%
}

h3 {
    position: relative;
    margin: 0px 0px 15% 0px;
    padding: 0px 0px 0px 0px;
}

.icon {
    height: 75%;
    width: 75%;
    filter: 
        /* top bottom shadows */
        drop-shadow(0px 2px 1px rgb(153, 0, 255))
        drop-shadow(0px -2px 1px rgba(153, 0, 255))

        /* left and right shadow */
        drop-shadow(2px 0px 1px rgb(153, 0, 255))
        drop-shadow(-2px 0px 1px rgb(153, 0, 255))

        /* left and right shadow */
        drop-shadow(2px 0px 1px rgba(55, 0, 255, 0.25))
        drop-shadow(-2px 0px 1px rgba(55, 0, 255, 0.25))

        /* top bottom shadows */
        drop-shadow(0px 2px 1px rgba(55, 0, 255, 0.25))
        drop-shadow(0px -2px 1px rgba(55, 0, 255, 0.25))

        /* drop-shadow(2px 2px rgba(255, 0, 255, 0.7))
        drop-shadow(-2px -2px rgba(255, 0, 255, 0.7)) maybe in the future?*/
        ;
}

.wifi_icon {
    position: fixed;
    top: 1%;
    right: 1%;
    height: 5%;
    width: 5%;
    object-fit: contain;
    filter: 
        /* top bottom shadows */
        drop-shadow(0px 1px 0.5px rgb(153, 0, 255))
        drop-shadow(0px -1px 0.5px rgba(153, 0, 255))

        /* left and right shadow */
        drop-shadow(1px 0px 0.5px rgb(153, 0, 255))
        drop-shadow(-1px 0px 0.5px rgb(153, 0, 255))
        /* left and right shadow */
        drop-shadow(1px 0px 0.5px rgba(55, 0, 255, 0.25))
        drop-shadow(-1px 0px 0.5px rgba(55, 0, 255, 0.25))

        /* top bottom shadows */
        drop-shadow(0px 1px 0.5px rgba(55, 0, 255, 0.25))
        drop-shadow(0px -1px 0.5px rgba(55, 0, 255, 0.25));
}

::selection {
    color: rgba(250, 3, 234, 1);
    /* background-color: rgba(195, 0, 255, 0.2); */
}

@font-face {
    font-family: Evil;
    src: url('/assets/fonts/DkPlagueMaster.ttf');
    /* src: local('DkPlagueMaster'); */
    font-style: normal;
    font-weight: 100;
}

body {
    background-color: #000;
    margin: 0;
    /* Important so scrollbars don't mess up widths */
    overflow-x: hidden; 
}

/* --- THE ASPECT RATIO LOCK --- */
/* This container acts as the "Game World". 
   It forces itself to always match the 16:9 ratio of your wallpaper. */
.scene-container {
    position: fixed;
    top: 50%;
    left: 50%;
    
    /* This centers the container and adds your slight zoom */
    transform: translate(-50%, -50%) scale(1.05);
    z-index: -2;
    
    /* Hide the parts of the image that stick out off-screen */
    overflow: hidden; 
}

/* A. If screen is WIDER than the image (Desktop/Ultrawide) */
/* Lock width to 100%, let height grow to keep ratio */
@media (min-aspect-ratio: 16/9) {
    .scene-container {
        width: 100vw;
        height: 56.25vw; /* Math: 100 * (9 / 16) */
    }
}

/* B. If screen is TALLER than the image (Mobile/Portrait) */
/* Lock height to 100%, let width grow to keep ratio */
@media (max-aspect-ratio: 16/9) {
    .scene-container {
        width: 177.78vh; /* Math: 100 * (16 / 9) */
        height: 100vh;
    }
}

/* --- INNER LAYERS --- */

/* Background just fills the locked container */
.bg-image-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* We don't need object-fit anymore because the container does the work */
    width: 100%;
    height: 100%;
    
    filter: blur(3px) brightness(0.7); 
}

/* Yuno is now positioned relative to the IMAGE, not the screen */
.yuno-layer {
    position: absolute;
    z-index: 2;
    
    /* --- POSITIONING --- */
    /* Since we are now locked to the image coordinates: */
    /* 50% left = Exact center of the background image */
    /* 55% top = Exact spot on the water */
    top: 50%; 
    left: 53%;
    
    /* Anchor her feet to that spot */
    transform: translate(-50%, -50%);

    /* --- SCALING --- */
    /* We use % now, so she scales perfectly with the background */
    width: 25%; 
    height: auto;
    
    pointer-events: none;

    /* --- FILTERS --- */
    filter: drop-shadow(0 0 4px rgb(234, 0, 255))
            drop-shadow(0 0 2px rgb(0, 17, 255, 0.75)) 
            drop-shadow(0 0 12px rgba(180, 40, 255, 0.5))
            brightness(0.85) 
            contrast(1.2);
}


video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;

    /* position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: -100;
overflow: hidden;
object-fit: fill;
pointer-events: none; */
}

.glass-eff {
    /* From https://css.glass WiP its buggy*/
background: rgba(0, 0, 0, 0.021);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}