body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
/* Ensure the page can scroll */
display: flex;
flex-direction: column;
color: rgba(255, 255, 255, 0.87);
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
/* Style for the floating div */
.mbm-logger-ui {
position: absolute;
top: 80px;
right: 20px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
z-index: 100;
display: none;
font-family: 'Chalky';
/* Ensure it stays on top of the Phaser canvas */
}
.mbm-inputCapture-ui {
position: absolute;
top: -1000px;
left: 50%;
transform: translate(-50%);
/* Moves the div by half of its width and height */
background-color: rgba(0, 0, 0, 1);
color: white;
padding: 10px;
border: 0;
z-index: 100;
display: none;
font-family: 'Chalky';
font-size: 20px;
text-align: center;
/* Ensure it stays on top of the Phaser canvas */
}
.mbm-inputCapture-input-ui {
font-family: 'Chalky';
font-size: 20px;
text-align: left;
border-radius: 15px;
}
.mbm-inputCapture-button-ui {
font-family: 'Betty';
font-size: 36px;
color: #F7CD58;
background-color: transparent;
/* Transparent background */
text-align: 'center';
border-radius: 5px;
border: none;
-webkit-text-stroke: 1px black;
/* For Webkit-based browsers */
text-stroke: 1px black;
/* Standard property */
text-shadow: -4px 8px 0px black;
/* horizontal, vertical, blur radius, color */
padding: 20px;
}
.mbm-logButton:hover {
background-color: #218838;
}
.container-story {
perspective: 300px;
}
.container-story canvas {
transform-origin: 50% 100%;
transform: rotateX(75deg);
}
#app {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* Icons made from
svg iconsis licensed by CC BY 4.0