RootPanel { display: flex; position: absolute; top: 0; left: 0; height: 100%; width: 100%; flex-direction: column; justify-content: flex-start; align-items: center; .CrossHair { position: absolute; top: 50%; left: 50%; height: 14px; width: 14px; margin-left: -7px; margin-top: -7px; border: 1.5px solid rgba ( 255, 255, 255, 0.3 ); border-radius: 100px; &.hidden { opacity: 0; } } .CatCounter { flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; background-color: rgba( black, 0.2 ); border-radius: 30px; backdrop-filter: blur( 15px ); width: 220px; height: 120px; top: 10px; font-family: Chewy; color: white; .title { font-size: 40px; text-shadow: 0px 0px 8px rgba( black, 1 ); text-stroke: 7px black; } .subtitle { font-size: 25px; text-shadow: 0px 0px 5px rgba( black, 1 ); text-stroke: 5px black; } &.hidden { opacity: 0; } } .Inventory { height: 100%; width: 720px; top: 140px; flex-shrink: 0; flex-direction: column; transition: all 0.15s ease-in; .titleContainer { background-color: rgba( 40 40 40, 0.95); border-top-left-radius: 30px; border-top-right-radius: 30px; backdrop-filter: blur( 15px ); flex-shrink: 0; height: 50px; align-items: center; justify-content: center; .title { font-family: Chewy; color: white; font-size: 25px; text-stroke: 4px black; } } .itemsContainer { flex-direction: row; align-items: center; justify-content: center; background-color: rgba( black, 0.4 ); border-radius: 0px 0px 30px 30px; backdrop-filter: blur( 15px ); aspect-ratio: 1.46; padding: 20px 20px 20px 20px; flex-wrap: wrap; overflow: hidden; .item { width: 48px; height: 48px; margin: 3px; background-image: url( /ui/uhoh.png ); background-size: 50px; background-repeat: no-repeat; background-position: center; background-color: rgba( 40 40 40, 0.9 ); border: 3px solid rgba( 20 20 20, 1 ); border-radius: 5px; &.hide { background-size: 0px; } } } &.closed { display: none; } } .Instructions { position: absolute; top: 300px; height: 100%; width: 600px; flex-direction: column; transition: all 1s ease-in; .titleContainer { background-color: rgba( 40 40 40, 0.95); border-top-left-radius: 30px; border-top-right-radius: 30px; backdrop-filter: blur( 15px ); flex-shrink: 0; height: 50px; align-items: center; justify-content: center; .title { font-family: Chewy; color: white; font-size: 25px; text-stroke: 4px black; } } .descriptionContainer { flex-direction: row; align-items: center; justify-content: center; background-color: rgba( black, 0.4 ); border-radius: 0px 0px 30px 30px; backdrop-filter: blur( 15px ); aspect-ratio: 2.25; padding: 20px 20px 20px 20px; flex-wrap: wrap; overflow: hidden; .description { font-family: Chewy; margin: 3px 60px 3px 60px; color: white; font-size: 20px; text-stroke: 3px black; } .objective { font-family: Chewy; margin: 3px 10px 30px 10px; color: white; font-size: 23px; text-stroke: 4px black; text-shadow: 0px 0px 6px rgba( black, 1 ); } } &.closed { top: 70%; opacity: 0; } } .Popup { flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; background-color: rgba( black, 0.2 ); border-radius: 30px; backdrop-filter: blur( 5px ); height: 65px; position: absolute; bottom: 50px; font-family: Chewy; color: white; padding: 10px 50px 10px 50px; .title { font-family: Chewy; color: white; font-size: 30px; text-shadow: 0px 0px 4px rgba( black, 1 ); text-stroke: 5px black; } &.closed { display: none; } } .Choices { flex-direction: row; justify-content: space-around; align-items: center; flex-shrink: 0; height: 90px; width: 50%; position: absolute; bottom: 150px; pointer-events: all; .button { background-color: rgba( black, 0.2 ); border-radius: 30px; flex-shrink: 1; width: 30%; height: 90%; backdrop-filter: blur( 5px ); background-color: rgba ( 150, 150, 200, 0.4 ); border: 2px solid rgba ( 255, 255, 255, 0.4 ); border-radius: 30px; mix-blend-mode: color; cursor: pointer; opacity: 0.4; transition: all 0.1s ease-in; align-items: center; justify-content: center; .title { font-family: Chewy; color: white; font-size: 50px; text-shadow: 0px 0px 10px rgba( black, 1 ); text-stroke: 10px black; } &:hover { opacity: 0.8; height: 100%; } &.active, &:active { opacity: 1; } } &.closed { display: none; pointer-events: none; } } .EndingScreen { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: black; transition: all 3s ease-in; flex-direction: column; align-items: center; justify-content: center; .title { font-family: Chewy; color: white; font-size: 120px; } .subtitle { font-family: Chewy; color: white; font-size: 60px; } &.hidden { opacity: 0; } } .Jumpscare { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url( /ui/stan.png ); transition: all 0.1s ease-in; background-size: 100%; background-repeat: no-repeat; background-position: center; background-color: black; &.hidden { opacity: 0; } } }