html,body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
background-color: black;
}
* {
-webkit-transition: opacity 1000ms ease-out;
-moz-transition: opacity 1000ms ease-out;
-o-transition: opacity 1000ms ease-out;
-ms-transition: opacity 1000ms ease-out;
transition: opacity 1000ms ease-out;
}
canvas {
width: 100%;
height: 100%;
}
#game {
width: 100%;
height: 100%;
}
.menu-ui {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
left: 0;
text-align: center;
color: white;
}
.nav-menu-ui {
position: absolute;
white-space: nowrap;
padding: 4px;
background: rgba(127, 127, 127, 0.3);
bottom: 0;
color: white;
}
button {
-webkit-transition: all 180ms ease-out;
-moz-transition: all 180ms ease-out;
-o-transition: all 180ms ease-out;
-ms-transition: all 180ms ease-out;
transition: all 180ms ease-out;
}
.nav-menu-ui button {
width: 3em;
height: 2em;
border: 0px;
color: black;
font-family: 'Syne Mono', serif;
font-size: 1em;
background-color: lightgray;
border-radius: 4px;
border: none;
margin-bottom: 6px;
margin-top: 0;
outline: none;
margin-left: 4px;
margin-right: 4px;
-ms-user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-webkit-touch-callout: none;
-khtml-user-select: none;
user-select:none;
}
.nav-menu-ui button:hover {
margin-bottom: 0;
cursor: pointer;
background-color: gray;
color: white;
}
.menu-ui h1 {
color: white;
font-weight: normal;
font-size: 3em;
font-family: 'Syne Mono', serif;
padding: 0.5em;
}
.menu-ui button {
position: absolute;
bottom: 40%;
left: calc(50% - 1.5em);
width: 3em;
height: 2em;
font-size: 3em;
color: black;
font-family: 'Syne Mono', serif;
background-color: lightgray;
border-radius: 4px;
border: none;
margin-bottom: -6px;
outline: none;
}
.menu-ui button:hover {
margin-bottom: 0;
cursor: pointer;
background-color: gray;
color: white;
}
.ship-info {
position: absolute;
width: calc(90% - 16px);
height: calc(90% - 46px);
white-space: nowrap;
padding: 8px;
border-radius: 8px;
background-color: rgba(127, 127, 127, 0.3);
top: 105%;
left: 5%;
color: white;
-webkit-transition: top 300ms cubic-bezier(.18,.89,.81,1.13);
-moz-transition: top 300ms cubic-bezier(.18,.89,.81,1.13);
-o-transition: top 300ms cubic-bezier(.18,.89,.81,1.13);
-ms-transition: top 300ms cubic-bezier(.18,.89,.81,1.13);
transition: top 300ms cubic-bezier(.18,.89,.81,1.13);
}
.show {
visibility: visible;
top: 5%;
}
.close {
float: right;
}