*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html , body{
    height: 100%;
    width: 100%;
}

body{
    background-color: #000;
}

/* Box 0 - Index */
#box0 {
    height: 90vh;
    width: 90vw;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    margin: 5vh 5vw;
    padding: 3vh 5vw;
    border-radius: 2vh;
    border: 2px solid #0f3460;
    overflow-y: auto;
}

.index-container {
    color: #eaeaea;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100%;
    width: 100%;
    position: relative;
}

.index-title {
    font-size: 4vh;
    text-transform: uppercase;
    text-align: center;
    /* margin-bottom: 4vh; */
    padding-bottom: 2vh;
    color: #00d4ff;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
    font-weight: bold;
    letter-spacing: 2px;
}

.index-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2vh 3vw;
    padding-top:2vw;
}

.index-item {
    padding: 1.5vh;
    background-color: rgba(15, 52, 96, 0.6);
    border-left: 4px solid #00d4ff;
    border-radius: 0.5vh;
    transition: all 0.3s ease;
}

.index-item:hover {
    background-color: rgba(15, 52, 96, 1);
    transform: translateX(10px);
    border-left-color: #ff006e;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.index-link {
    color: #00d4ff;
    text-decoration: none;
    font-size: 2.2vh;
    font-weight: 500;
    transition: all 0.3s ease;
    display: block;
}

.index-link:hover {
    color: #ff006fcf;
    text-shadow: 0 0 10px rgba(255, 0, 110, 0.5);
}

.index-image-preview {
    position: absolute;
    width: 25vh;
    height: 25vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 3px solid #ff006fd4;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    transition: opacity 0.3s ease;
    box-shadow: 0 0 20px rgba(255, 0, 110, 0.5), inset 0 0 20px rgba(0, 212, 255, 0.2);
}



#box1{
    height: 90vh;
    width: 90vw;
    background-color: red; 
    margin: 5vh 5vw;   
    align-items: center;
    justify-self:center;
    padding: 15vh 10vw;
}

#winbox{
    height: 40vh;
    width: 40vw;
    background-color: green;    
    border-radius: 5vh;
    border: solid 0.5vh;
    border-color:#3a0404 ;
    align-items: center;
    justify-self:center;
}

#team-name{
    font-size: 10vh;
    font-weight: bold;
    font:system-ui;
    text-transform: uppercase;
    text-align: center;
    margin-top: 5vh;
    color: #ffffff;
    -webkit-text-stroke-width: 0.15vw;
    -webkit-text-stroke-color: #4b4b4b;
}

#team-moto{
    font-size: 6vh;
    font-weight: bold;
    font:system-ui;
    text-transform: capitalize;
    text-align: center;
    margin-top: 4vh;
    color: #ffffff;
    letter-spacing: 0.6vh;
    -webkit-text-stroke-width: 0.15vw;
    -webkit-text-stroke-color: #4b4b4b;
}

#button1{
    height: 10vh;
    width: 20vw;
    background-color: rgb(165, 165, 165);    
    margin-top: 5vh;
    transform: translatex(24vw);
    border-radius: 50vw;
    border-width: 0.5vh; 
    border-color: #930000;
    font-size: 5vh;
    font-weight: bold;
    font:system-ui;
    text-transform: capitalize;
    cursor: pointer;
}
#box2{
    height: 90vh;
    width: 90vw;
    background-color: rgb(2, 2, 151);    
    margin: 5vh 5vw;
    position: relative;
    padding: 15vh 10vw;
    overflow: hidden;
}

#button2{
    height: 10vh;
    width: 20vw;
    background-color: rgb(194, 194, 194);    
    transform: translateX(25vw) translateY(25vh);  
    border-radius: 50vw;
    border-width: 0.5vh; 
    border-color: #02025b;
    font-size: 5vh;
    font-weight: bold;
    font:system-ui;
    text-transform: capitalize;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

#box3{
    height: 90vh;
    width: 90vw;
    background-color: rgb(151, 2, 2);    
    margin: 5vh 5vw;  
    padding: 15vh 10vw;
}

#loadingcard{
    height: 50vh;
    width: 50vw;
    background-color: rgb(255, 255, 255);    
    margin: auto;
    padding: 5vh 5vw;
    border-radius: 5vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    /* position: relative; */
}

#dn-text{
    font-size: 4vh;
    /* font-weight: bold; */
    font:system-ui;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 5vh; 
    color: #000000;
}
#bluewd{
    color: #00aeff;
    font-weight: bold;
    -webkit-text-stroke: 0.1vw;
    -webkit-text-stroke-color: #070789;
}

#outerbox{
    height: 8vh;
    width: 100%;
    border-radius: 10vh;
    background-color: #4b4b4b;
    display: flex;
    align-items: center;
    padding: 0.5vh 0.3vw ;
    /* position: relative; */
    /* justify-content: center; */
}

#innerbox{
    height: 7vh;
    width: 0%;
    border-radius: 10vh;
    background-color: #00ff00;
    /* position: absolute; */

}

#circle{
    height: 25vh;
    width: 25vh;
    border-radius: 50%;
    background-color: #d7d7d700;
    margin-top: 5vh;
    padding: 2vh;
    transform: translateX(-16vw) translateY(3vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

#loadpercent{
    font-size: 8vh;
    font-weight: bold;
    font:system-ui;
    text-transform: capitalize;
    text-align: center;
    /* margin-top: 3vh;  */
    /* transform: translateX(-17vw) translateY(5vh); */
    color: #000000;
}

#button3{
    height: 10vh;
    width: 25vw;
    background-color: rgba(0, 205, 38, 0.767);    
    transform: translateX(10vw) translateY(32vh);
    border-radius: 50vw;
    border-width: 0.5vh; 
    border-color: #2e2e2e;
    font-size: 5vh;
    font-weight: bold;
    font:system-ui;
    text-transform: capitalize;
    cursor: pointer;
    position: absolute;

}

#butt4{
    height: 10vh;
    width: 10vw;
    background-color: rgba(255, 255, 255, 0.767);    
    transform: translateX(30vw) translateY(2vh);
    border-radius: 50vw;
    border-width: 0.5vh; 
    border-color: #2e2e2e;
    font-size: 45px;
    /* text-transform: capitalize; */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#box4{
    height: 90vh;
    width: 90vw;
    background-color: rgb(2, 151, 2);    
    margin: 5vh 5vw;  
    padding: 15vh 10vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#postcard{
    height: 60vh;
    width: 25vw;
    background-color: rgb(225, 223, 223);    
    
    border-radius: 5vh;
    position: relative;
    overflow: hidden;
    padding: 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4vh;
}

#postcard img{
    height: 70%;
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 5vh;
}

#heart-icon{
    font-size: 10vh;
    /* color: #00aeff; */
    position: absolute;
    background-image: url("https://imgs.search.brave.com/oX9ytDX55IVEWjxkNMGtPiZLBDMRsqJdaF1u-XPspp8/rs:fit:500:0:1:0/g:ce/aHR0cHM6Ly9tZWRp/YS5pc3RvY2twaG90/by5jb20vaWQvMTI0/OTcwMjkxNy92ZWN0/b3Ivc21vb3RoLWJs/dXJyZWQtZ3JhZGll/bnQtaW5zdGEtYmFj/a2dyb3VuZC13YWxs/cGFwZXItc3R5bGUt/c2NhbGFibGUtdmVj/dG9yLW1lc2gtYnJp/Z2h0LmpwZz9zPTYx/Mng2MTImdz0wJms9/MjAmYz0ydHo5cDFG/azF4RXM1MXBTUlVx/dFpUQ1Qzb3RxaXRa/MXhCT1RZUndQTzlR/PQ"); 
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: cover;
    transition: transform 0.7s ease;
    opacity: 0;
    
}

#box5{
    height: 90vh;
    width: 90vw;  
    background-color: rgb(56, 56, 56);
    margin: 5vh 5vw;  
    padding: 15vh 10vw;
    position: relative; 
    cursor : none;
    display: flex; 
    align-items: center;
    justify-content: center;
}

#hammer-cursor{
    transform: translate(-50%,-50%) rotate(-75deg);
}

#fire-cursor{
    transform: translate(-50%,-50%) rotate(0deg);
}

#sawchi-cursor{
    transform: translate(-50%,-50%) rotate(0deg);
}

#sword-cursor{
    transform: translate(-50%,-50%) rotate(90deg);
}

.cursor{
    height: 6vh;
    width: auto;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%,-50%);
    /* animation: swing 0.1s infinite ease-in-out; */
    display: none; /* hidden until a selection is active */
    z-index: 9999;
    transition: transform 0.06s linear;
}

#butt5{
    height: 10vh;
    width: 5vw;
    background-color: rgba(255, 255, 255, 0.767);    
    transform: translateX(0vw) translateY(33vh);
    border-radius: 50%;
    border-width: 0.5vh; 
    border-color: #2e2e2e;
    font-size: 5vh;
    /* text-transform: capitalize; */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

#cursor-box{
    min-height: 10vh;
    width: 40vw;
    background-color: rgba(29, 29, 29, 0.323);    
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: visible;
    border-radius: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    opacity: 0;
    padding: 0.5rem;
}

.cursor-button{
    background: transparent;
    border: none; 
    cursor: pointer;   
    padding: 0.25rem;
    border-radius: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cursor-button.selected{
    box-shadow: 0 0 0 3px rgba(0,174,255,0.15), 0 6px 18px rgba(0,0,0,0.35);
    transform: translateY(-3px) scale(1.02);
}

.cursor-option-img{
    width: 6vh;
    height: 6vh;
    object-fit: cover;
    border-radius: 0.5rem;
    object-position: center;
    background-color: rgb(43, 43, 43);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Rotate the hammer thumbnail to match its visual orientation */
.cursor-option-img[data-cursor-id="hammer"]{
    transform: rotate(-75deg) scale(1.03);
    transform-origin: 50% 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}

/* Per-id thumbnail tweaks (use IDs for fine control) */
#cursor-img-hammer{ transform: rotate(-75deg) scale(1.03); }
#cursor-img-fire{ transform: rotate(6deg) scale(1.02); filter: saturate(1.05); }
#cursor-img-sawchi{ transform: rotate(-12deg) scale(1.02); }
#cursor-img-sword{ transform: rotate(90deg) scale(1.04); }

/* On-screen active cursor rotations/presentation */
#active-cursor[data-cursor-id="hammer"]{ transform: translate(-50%,-50%) rotate(-75deg) scale(1.05); }
#active-cursor[data-cursor-id="fire"]{ transform: translate(-50%,-50%) rotate(0deg) scale(1.02); }
#active-cursor[data-cursor-id="sawchi"]{ transform: translate(-50%,-50%) rotate(-12deg) scale(1.02); }
#active-cursor[data-cursor-id="sword"]{ transform: translate(-50%,-50%) rotate(-130deg) scale(1.04); }

/* small hover lift for all thumbnails */
.cursor-button:hover .cursor-option-img{
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

#box6{
    height: 90vh;
    width: 90vw;  
    background-color: rgb(255, 255, 255);
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

#gmcontainer{
    height: 100%;
    width: 100%;
    background-color: rgb(51, 238, 247);
    border-radius: 3vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vh 0.5vw;
}

#gmdisplay{
    height: 100%;
    width: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 2vh;
    overflow-y: auto;
    /* padding: 1vh 1vw; */
    font-size: 3vh;
    font-family: monospace;
    line-height: 4vh;
    display: grid;
    grid-template-columns: 1fr;  
    grid-template-rows: 15vh 1fr;
    grid-template-areas:
        "gmheader"
        "gmbody";
}


.gmheader {
    grid-area: gmheader;
    background: #7decf9ee;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10vw;
 }
.gmbody{ 
    grid-area: gmbody;  
    background: #23abd1;
    padding: 2vh 1vw;
    display: flex;
    flex-wrap: wrap;
    /* gap:3vw ; */
    row-gap: 1vh;
    column-gap: 7vh;
    align-items: center;
    justify-content: center;
}
.gmcontrol{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vh;
}

.valbox{
    height: 5vh;
    min-width: 5vw;
    background-color: #0a7a7c;
    color: #8ee6ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bubbles{
    height: 10vh;
    width: 10vh;
    color: #555656;
    border-radius: 50%;
    background-color: #e1dbdb;
    display: flex;
    align-items: center;
    justify-content: center;

}

#gmplay{
    height: 20vh;
    width: 20vh;
    border-radius: 50%;
    /* top: 2vh; */
    border: 1vh solid rgb(5, 209, 209);
    font-size: 5vh;
    text-transform: uppercase;
    position: absolute;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    z-index: 10;
    transform: translate(0px, 30px);
}


#box7{
    height: 90vh;
    width: 90vw;  
    background: linear-gradient(black,rgb(34, 34, 34),rgb(50, 50, 50));
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.185);

}

.main-box{
    height: 100%;
    width: 25vw;
    background-color: #000000;
    margin: 2vh 2vw;
    border-radius: 1vh;
    position: relative;
    overflow: auto;
    scroll-snap-type:y mandatory;
    scroll-behavior: smooth;
}

.reel-box{
    height: 100%;
    width: 100%;
    border-radius: 1vh;
    position: relative;
    overflow: auto;
    scroll-snap-align: start;

}

.main-box::-webkit-scrollbar{
    display: none;
}

.reel-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    
}

.main-box .lower-box{
    height: 10vh;
    width: 100%;
    background:linear-gradient(rgba(0, 0, 0, 0.049),rgba(0, 0, 0, 0.285),rgba(0, 0, 0, 0.68));
    position: absolute;
    bottom: 0;
    padding: 1vh 1vw;
    overflow: auto;
    
    
}

.lower-box::-webkit-scrollbar{
    display: none;
}

.user-info{
    display: flex;
    gap: 0.6vw;
    align-items: center;
    justify-content: left;
    /* flex-direction: column; */
    overflow:auto;
    margin-bottom: 0.8vh;
    color: #ffffff;
    
}

.user-info img{
    height: 5vh;
    width: 5vh;
    border-radius: 50%;
    object-fit: cover;
    object-position: top ;
    border: 0.1vw solid rgba(204, 204, 204, 0.626) ;

}

.user-info button{
    height: 3vh;
    padding: 0vh 1vw;
    font-size: 0.9vw;
    font-weight: 550;
    border-radius: 2vw;
    align-items: center;
    justify-self: center;
    color: whitesmoke;
    background-color: transparent;
    border-color: rgb(225, 217, 217);
}

.lower-box h5{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    color: #6b6b6b;
}

.icon-box{
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: column;
    gap: 3.5vh;
    position: absolute;
    right: 0;
    bottom: 10vh;
}

.iconset{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.3vh;
    color: white;
    
}

/* .heart-icon{
    border: solid 0.5vw white;
} */

.iconset h6{
    font-weight: 100;
    font-family:'Times New Roman', Times, serif;
    pointer-events: none;
}

.iconset i{
    pointer-events: none;
}

#box8{
    height: 90vh;
    width: 90vw;  
    background-color: #000;
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.185);  
}

#main-section{
    height: 99%;
    width: 99%;
    background-color: #0a7a7c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: auto;
    position: relative;
}

#main-section img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    /* z-index: 1; */
}

#main-section p{
    font-size: 3rem;
    pointer-events: auto;
    z-index: 2;
    font-family: monospace;
    color: #37ff00;
    font-weight: 900;
    text-shadow: 0px 0px 5px #000000,0px 0px 15px rgb(0, 92, 0);
}

:root{
    --x : 50%;
    --y : 50%;
}

#spoting-box{
    height: 100%;
    width: 100%;
    background : radial-gradient(3rem at var(--x) var(--y), rgba(255, 255, 255, 0.049), rgba(0, 0, 0, 0.82));
    position: absolute;
    pointer-events: auto;
    z-index: 3;
    pointer-events: none;
}

#box9{
    height: 90vh;
    width: 90vw;  
    background-color: #000;
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.185);  
}

@property --rotate{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes movecdbor {
    from{
        --rotate:0deg;
    }    
    to{
        --rotate:360deg;
    }
}

#mov-card{
    width: 20vw;
    color: whitesmoke;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    border: 0 solid rgba(0, 255, 255, 0) ;
    background : 
                 linear-gradient(black)padding-box,
                 conic-gradient(from var(--rotate)  ,black,black,#43ACDB,#F9FEFA,#99FFFF,#3194BD, black)border-box;
    padding: 1rem;
    animation: movecdbor 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    transition: all 0.3s linear;
    box-shadow: 0 0 0rem #99FFFF;
    border-radius: 1rem;
}

#mov-card:hover{
    animation-play-state: running;
    border-width: 0.4rem;
    box-shadow: 0 0 3rem #99FFFF;
    color: #71e9e9;
    text-shadow: 0 0 5px #000000,0 0 10px #a9fbfc;
    transform: scale(1.1);
}

#mov-card img{
    width: 100%;
    object-fit: cover;
}


#box10{
    height: 90vh;
    width: 90vw;  
    background-color: #000;
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.185);  
}

#box10sec{
    height: 100%;
    width: 100%;
    display: flex;
    color: whitesmoke;
    align-items: center;
    justify-content: center;
    /* gap: 1.5vw; */
    anchor-name: --some-anchor;


}

.some{
    height: 4vh;
    padding: 1vh 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
}

.some:hover{
    anchor-name: --some-anchor;
}

.anchor{
    background-color: #ffb8b8;
    position: absolute;
    position-anchor: --some-anchor;
    top: anchor(top);
    left: anchor(left);
    right: anchor(right);
    bottom: anchor(bottom);
    pointer-events: none;
    transition: all 0.5s linear;
    mix-blend-mode:exclusion;
}

#box11{
    height: 90vh;
    width: 90vw;  
    background-color: #000;
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.185);  
}

.box11sec{
    height: 100%;
    width: 100%;
    display: flex;
    color: whitesmoke;
    align-items: center;
    justify-content: center;
    anchor-name: --box-anchor;
    /* gap: 1vw; */
    transition: all 0.3s linear;
}

.div-box{
    height: 20vh;
    width: 10vw;
    display: flex;
    transition: all 0.3s ease;
}

.box11sec > div:nth-child(1){
    background-color: red;
}
.box11sec > div:nth-child(2){
    background-color: yellow;
}
.box11sec > div:nth-child(3){
    background-color: blue;
}


.box11sec:has(.div-box:hover) {
    .div-box{
        transform: scale(0.5);
        opacity: 0.5;
         
    }
}

.div-box:hover{
    anchor-name: --box-anchor;
    transform:scale(1.5) !important;
    opacity: 1 !important;
}

.anchor2{
    background-color: #005379;
    position: absolute;
    position-anchor: --box-anchor;
    left: anchor(left);
    bottom: anchor(bottom);
    right: anchor(right);
    top: anchor(top);
    mix-blend-mode: difference;
    pointer-events: none;
    transition: all 0.5s linear;
}

#box12{
    height: 90vh;
    width: 90vw;  
    background-color: #303030;
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    /* position: relative; */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.185); 
}

#colorbox{
    height: 20vh;
    width: 20vw;
    /* position: absolute;
    left: 50%;
    top: 50%; */
    /* transform: translate(-50%,-50%); */
    background-color: #ffffff;
    border: solid 0.5vh #000000;
    
    transition: background-color 0.2s ease;
}

#box13{
    height: 90vh;
    width: 90vw;  
    background-color: #121111;
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(182, 169, 169, 0.185); 
}

#moving-box{
    height: 40vh;
    width: 15vw;
    background-color: #1c6396;
    border: solid 0.3vh #00c3ff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: all 0.1s ease;
}

#box14{
    height: 90vh;
    width: 90vw;  
    background-color: #000;
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(229, 229, 229, 0.185); 
}

#heading-box{
    height: 40vh;
    width: 50vw;
    background-color: #535353;
    border: solid 0.5vh #5e5e5e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5vh;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #000000;
}

.heading-divimg{
    height: 10vh;
    width: 5vw;
    /* background-color: #f70c0c; */
    position: absolute;
    overflow: hidden;
}

.div-imgs{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateY(100%);
}

#nature-line{
    text-transform: uppercase;
    font-size: 4vw;
    color: #00ff2f;
}


#box15{
    height: 90vh;
    width: 90vw;  
    background-color: #090909;
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    border: 1px solid rgba(223, 223, 223, 0.259); 
}

#box15sec{
    height: 99%;
    width: 99%;
    background-color: #1c1c1c;
    border: solid 0.5vh #2e2e2e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5vh;
    padding: 0.8vh 1vw;
}

#upcontr{
    height: 5%;
    width: 100%;    
    border:0.2vh solid #515151;
    display: flex;
    align-items: center;
    justify-content: center;
}

#upcontr h4,span{
    display: inline-block;
    margin: 0vh 1vw;
    color: beige;
}

#board{
    height: 95%;
    width: 100%;
    border: 0.2vh solid #515151;
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(30px, 1fr));
    
    /* padding: 0vh 0vw; */
}

.block{
    height: 30px;
    width: 30px;
    border: solid 0.1vh #2e2e2e;
    font-size: 2vh;
}

.sneck-block{
    background-color: #99ff00c8;
}


#gm-str-butt{
    height: 20vh;
    width: 20vh;
    border-radius: 50%;
    color: rgb(0, 0, 0);
    background: #929292;
    border: 1vh solid rgb(203, 203, 203);
    font-size: 5vh;
    text-transform: uppercase;
    position: absolute;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    z-index: 10;
    transform: translate(0px, 30px);
    cursor: pointer;
}

.sfood-block{
    background-color: #e10606c8;
}

#sneck-gm-control{
    height: 7vh;
    /* width: 40vw; */
    background-color: #c1c1c199;
    border: solid 0.2vh #b4b4b4;
    border-radius: 2vh;
    transform: translateY(23vh);
    /* gap: 1vw; */
    font-size: 3vh;
    color: whitesmoke;
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sneck-gm-control img{
    height: 20vh;
    width: 20vh;
    object-fit: cover;
    object-position: center;
}
#sneck-gm-control span{
    display: inline-block;
    width: 30vw;
    padding: 0vh 1vw;
}

#gm-str-head{
    font-size: 5vh;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #bfbfbf;
    text-shadow: 0px 0px 5px #000000,0px 0px 10px #ffffff;
    position: absolute;
    z-index: 10;
    transform: translateY(-10vh);
}

#box16{
    height: 90vh;
    width: 90vw;  
    background-color: #000;
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.185); 
}

#box16-sec{
    height: 100%;
    width: 100%;
    background-color: #222222;
    border: solid 0.5vh #2e2e2e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2vh;
    padding: 2vh 1vw;
}

#top-box{
    height: 15vh;
    width: 15vh;
    background-color: #c1c1c100;
    border: solid 0.2vh #b4b4b4;
    border-radius: 1vh;
    position: relative;
    /* font-size: 3vh; */
    /* color: whitesmoke; */
    overflow: hidden;

}

#bottom-box{
    height: 100%;
    width: 100%;
    background-color: #43434399;
    border: solid 0.2vh #b4b4b4;
    border-radius: 1vh;
    font-size: 3vh;
    color: whitesmoke;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1vh 1vw;
    gap: 1.5vh;
}

.bottom-boxes{
    height: 100%;
    width: 100%;
    /* background-color: #c1c1c199; */
    display: flex;
    flex-grow: 1;
    justify-content: space-around;
    flex-wrap: wrap;
    border: solid 0.2vh #b4b4b4;
    border-radius: 1vh;
    font-size: 3vh;
    /* color: whitesmoke; */
    padding: 1.5vh 1.5vw;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    /* margin: 1vh 0vh; */
}

#red-box{
    background-color: rgba(131, 2, 2, 0.198);
    color: rgb(255,0,0);
}
#green-box{
    background-color: rgba(0, 128, 0, 0.25);
    color: rgb(0,255,0);
}
#blue-box{
    background-color: rgba(0, 0, 139, 0.265);
    color: rgb(0,0,255);
}

.gm-box{
    height: 15vh;
    width: 15vh;
    background-color: #c1c1c1df;
    border: solid 0.2vh #b4b4b4;    
    border-radius: 1vh;
    font-size: 3vh;
    color: whitesmoke;
    position: absolute;
    
}

.drag-in{
    scale: 1.05;
    border: red dotted 0.3vh;
    transition: all 0.3s ease;
}

.in-lined{
    position: relative;
    display: inline-block;
}

#box16-butt{
    position: absolute;
    height: 12vh;
    width: 12vh;
    border-radius: 50%;
    border: solid 0.5vh #9c9c9c;
    background-color: #252525;
    color: whitesmoke;
    font-size: 3vh;
    font-weight: bold;
    cursor: pointer;
    right: 14vw;
    top: 4.5vh;
}

#box16-butt:hover{
    background-color: #252525c9;
    border-color: #dadada;
    background-color: #00ff008d;
    color: #090909;
    transform: scale(1.2);
}

#box16-timer{
    position: absolute;
    /* height: 10vh; */
    /* width: 10vh; */
    /* border-radius: 50%; */
    /* border: solid 0.5vh #9c9c9c; */
    background-color: #252525;
    color: whitesmoke;
    font-size: 7vh;
    font-weight: bold;
    cursor: pointer;
    left: 14vw;
    top: 6vh;
}


#box17{
    height: 90vh;
    width: 90vw;  
    background-color: #000;
    margin: 5vh 5vw;  
    padding: 1.5vh 1vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.185); 
}

#box17-sec{
    height: 100%;
    width: 100%;
    background-color: #3b3b3b;
    border: solid 0.5vh #2e2e2e;
    display: flex;
    /* flex-direction: column; */
    gap: 2vh;
    padding: 2vh 1vw;
}

#left-div{
    height: 100%;
    width: 75%;
    background-color: #60212199;
    border: solid 0.2vh #b4b4b4;
    border-radius: 1vh;
    font-size: 3vh;
    color: whitesmoke;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5vh;
}

#top-sec{
    height: 10vh;
    width: 100%;
    background-color: #c1c1c199;
    border: solid 0.2vh #b4b4b4;
    border-radius: 1vh;
    font-size: 3vh;
    color: whitesmoke;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5vw;
}

#top-sec label{
    background-color: wheat;
    color: #000;
}

#box17reset-btn{
    background-color: rgb(186, 1, 1);
}

#box17download-btn{
    background-color: rgb(1, 116, 1);
}


.box17-butt{
   
    border-radius: 10vh;
    border: solid 0.3vh #4d4d4d;
    /* background-color: #252525; */
    color: whitesmoke;
    font-size: 3vh;
    font-weight: bold;
    cursor: pointer;
    padding: 0.5vh 1vw;
}

.box17-butt:hover{
    border-color: #dadada;
    transform: scale(1.2);
    transition: all 0.3s ease;
}


#bottom-sec{
    height: 90%;
    width: 100%;
    background-color: #c1c1c199;
    border: solid 0.2vh #b4b4b4;
    border-radius: 1vh;
    font-size: 3vh;
    color: whitesmoke;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bottom-sec div{
    font-size: 3vh;
    color: whitesmoke;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    gap: 1.5vw;
}

#bottom-sec i{
    color: rgb(248, 229, 195);
    font-size: 12vh;
}

#bottom-sec span{
    font-size: 4vh;
    font-weight: bold;
}

#right-div{
    height: 100%;
    width: 25%;
    background-color: #60212199;
    border: solid 0.2vh #b4b4b4;
    border-radius: 1vh;
    font-size: 3vh;
    color: rgb(36, 0, 0);
    gap: 1.5vh;
    padding: 1vw;
    overflow: auto;
}

#right-div::-webkit-scrollbar{
    display: none;
}

#right-div p{
    font-size: 4vh;
    font-weight: bold;
    color: #020101;
    /* text-shadow: 0px 0px 3px #b9b9b9; */
    margin-bottom: 2.5vh;
    
}

#right-div h5{
    color: #000000;
    /* font-size: 1.5vw; */
    font-weight: 200;
    margin-top: 2.5vh;
}

#right-div input{
    width: 100%;
    /* padding: 0.5vh 1vw; */
    /* border-radius: 0.5vh;
    border: solid 0.1vh #b4b4b4;
    background-color: #c1c1c199;
    color: #000000; */
    appearance: none;
}

#right-div input::-webkit-slider-runnable-track{
    appearance: none;
    height: 0.3vh;
    width: 100%;
    /* border: solid 0.1vh #b4b4b4; */
    border-radius: 50%;
}

#right-div input::-webkit-slider-thumb{
    appearance: none;
    height: 3vh;
    width: 3vh;
    border-radius: 50%;
    color: orangered;
    background-color: orangered;
    margin: -1.2vh 0vw;
}

canvas{
    position: absolute;
    background-color: transparent;
    max-height: 99%;
    max-width: 99%;
}