html, body { margin: 0; }
body {
    background-color: #000;
    /* Disables pull-to-refresh but allows overscroll glow effects.
       https://developers.google.com/web/updates/2017/11/overscroll-behavior */
    overscroll-behavior-y: contain;
}

#loader-container {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    margin: -75px 0 0 -75px;
    opacity: 0.75;
    transform: scale(1.0);
    transition: opacity 1s, transform 1s;
}
#loader-container.fade-out {
    opacity: 0;
    transform: scale(2.0);
}
#loader-container.hidden {
    display: none;
}

#loader {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border-top: 2vh solid #c79101;
    border-right: 2vh solid #d2a403;
    border-bottom: 2vh solid #d8b901;
    border-left: 2vh solid #f3d302;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    box-shadow: 0px 0px 86px 10px rgba(0,0,0,0.75);
    background: url('assets/icon.png') no-repeat;
    background-size: 0%;
    background-position: center;
    transition: background-size 0.5s;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#no-es6-support {
    position: absolute;
    left: 50%;
    top: 25%;
    width: 75vw;
    margin: -15vh 0 0 -37%;
    color: silver;
    font-family: 'Press Start 2P', cursive;
    font-size: 2vh;
    line-height: 1.5;
    display: none;
}
#no-es6-support a {
    color: silver;
}

#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/black.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    opacity: 0.3;
    transition: background-image 2s ease-in-out;
    will-change: background-image;
}
#game {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
#game > canvas {
    display: block;
    box-shadow: 0px 0px 86px 10px rgba(0,0,0,0.75);
    opacity: 0;
    transition: opacity 1s;
}

div#hid {
    position: relative;
    width: 90vw;
    height: 90vh;
    top: 5vh;
    left: 5vw;
    opacity: 0;
    transition: opacity 1s;
}
div#hid.hidden {
    display: none;
}
div#hid.fullscreen {
    top: 0;
    left: 0;
}
div.hid {
    position: absolute;
    bottom: 0px;
    font-family: 'Press Start 2P', cursive;
    font-size: 5vh;
    color: gray;
    display: flex;
    flex-wrap: wrap;
    opacity: 0.4;
    visibility: hidden;
    width: 24vh;
    height: 21vh;
    transition: left 0.15s ease-out, top 0.15s ease-out;
    will-change: left, top;
}
div.hid.left {
    left: 0px;
}
div.hid.right {
    right: 0px;
}
div.hid > div {
    background: #00000088;
    border: 0.4vh solid gray;
    border-radius: 0.7vh;
    text-align: center;
    width: 4vh;
    line-height: 6vh;
    flex: auto;
    transition: transform 0.15s ease-out, background 0.15s ease-out;
    will-change: transform, background;
}
div.hid > div {
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}
div.hid.active > div {
    /*transform: scale(0.8);*/
    background: #000000ff;
}
div.hid.keys > div.isDown {
    color: white;
    border-color: white;
}
div.hid.keys > div.up,
div.hid.keys > div.shoot {
    margin: 0 33%;
}
div.hid.keys > div.rotate {
    visibility: hidden;
}

#actions {
    position: absolute;
    top: 1.4vh;
    right: 1.4vh;
    color: gray;
    display: flex;
    transition: left 0.15s ease-out, top 0.15s ease-out;
    will-change: left, top;
}
#actions > button {
    opacity: 0.4;
    background: #00000088;
    border: 0.4vh solid #00000088;
    border-radius: 0.7vh;
    text-align: center;
    cursor: pointer;
    line-height: 1vh;
    padding: 0.7vh;
    margin-left: 1.4vh;
    flex: auto;
    transition: opacity 0.15s ease-out, background 0.15s ease-out;
    will-change: opacity, background;
}
#actions > button:hover {
    opacity: 1;
    border-color: silver;
    background: #ffffff;
}
#actions > button.hidden {
    display: none;
}
#actions > button, #actions > button > img {
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}
#actions > button > div {
    width: 4vh;
    height: 4vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#actions > button.pause > div {
    background-image: url('assets/menu/icons8-pause-40.png');
}
#actions > button.play > div {
    background-image: url('assets/menu/icons8-play-40.png');
}
#actions > button.audio > div {
    background-image: url('assets/menu/icons8-speaker-40.png');
}
#actions > button.no-audio > div {
    background-image: url('assets/menu/icons8-no-audio-40.png');
}
#actions > button.fullscreen > div {
    background-image: url('assets/menu/icons8-fit-to-width-40.png');
}
#actions > button.windowed > div {
    background-image: url('assets/menu/icons8-collapse-40.png');
}