body,html{margin:0;padding:0; 
    

      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;

      font-style: normal;


} *,*::before,*::after{box-sizing:border-box; position:relative;}
img{width: 100%;}
.full{width:100%;height:100svh;left:0;top:0; position: fixed;}
.startpage{background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px);}
.globepage{display: grid; grid-template-rows: 70% 1fr;}
.room{background-color: black; display:flex;align-items:flex-end; justify-content:center;}
.globecontainermove{transform: translateY(10%);}
.floor{background-color: black;display:flex;align-items:flex-start; justify-content:center;}
.fill{width:100%;height:100%;left:0;top:0;position: absolute;}
.started .startpage{display: none;}

button{background-color: transparent; isolation: isolate; transition: all 1s; border-radius: 1000px; padding: 0.5em 1rem; overflow: hidden; color: white; outline: none; border: 1px solid white;}
button:after{content: ""; z-index: -1; width:100%;height:0%;left:0;top:0;background-color: white; position: absolute;transition: all 1s;}
button:hover:after{height: 100%;}
button:hover{color: black; scale:1.2}

.bottom{background-color: brown; width: 90%; position: absolute; top: 80%;height: 10%;  left: 5%;
   border-top-left-radius: .6rem;
   border-top-right-radius: .6rem;
   background: linear-gradient(90deg,rgb(42, 42, 42),grey 20%,white 30%,grey,rgb(34, 34, 34));
   box-shadow: inset 0 0 4px black;


}
.floor img{min-width: 1200px; position: absolute;}
.message{margin: auto 0; color: white;}

.shadow{background-color: black; width: 90%; position: absolute; top: 40%;aspect-ratio: 1/1;  left: 5%;
border-radius: 100%;
width: 80vw; height:80vw; max-width: 500px; max-height: 500px; filter: blur(calc(var(--blur) * 1px)); --blur:0;
}
.ref{mix-blend-mode: screen;}
.flexcenter{display:flex;align-items:center; justify-content:center;}
.globepics{width:100%;height:100%;left:0;top:0; position: absolute;}
.desktop{display: block;}
.cell{display: none;}
.flake{background-color: white; border-radius: 100%; top:0%; position: absolute; background: url("bone.png") center no-repeat; background-size: contain; }
.globe{overflow: hidden;border:2px solid white; padding: 3rem; color:white;width: 80vw; height:80vw; max-width: 500px; max-height: 500px; border-radius: 100%; display:flex;align-items:center; justify-content:center; clip-path: inset(-200% -200% 20% -200%);}
/* .shaking .globe{background-color: grey;} */
.flakes{border-radius: 100%; overflow: hidden;}
.logo,.logo *{transition: all 1s;}
.logo{width:100%;height:100%;left:0;top:0;background-color: black; position: fixed;}
.logo.loaded{background-color: transparent; pointer-events: none; padding: 2rem; text-align: right;}
.logo.loaded img{width: 8rem;}
.noevents{pointer-events: none;}
@media(max-width:600px){   
    .desktop{display: none;}
    .cell{display: block;}
}

.tutorial{color: white; padding: 1rem; text-align: center; max-width: 400px;}
.message{font-weight: 500; letter-spacing: .05rem; text-align: center; padding: 1rem; line-height:1.2rem ; font-size: .9rem; text-transform: uppercase; }