html {
    box-sizing: border-box;
    overflow-y: hidden;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
}

canvas {
    width: 100%;
    height: 100%;
    display: block;
}

#game-container {
    width: 100vw;
    height: 100vh;
    min-width: 1024px;
}

#adContainer {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
#loader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(#e5d5bb, #dbc6a7);
    background-size: contain;
    transition: transform .3s ease-out .5s, opacity .3s ease-out .5s;
}

#update-warning {
    background: #fcc;
    border: 1px solid red;
    padding: 0px 20px;
    text-align: center;
    color: rgb(171, 9, 9);
    cursor: pointer;
}

.dark-panel {
    background-image: linear-gradient(#b19a7f, #564434);
    border-radius: 25px;
    width: 38vw;
    height: 11.5vw;
    box-shadow: 0px -2px 3px 0px #bca78c, inset 0px 1px 1px 0px #cabba8;
}
.dark-panel > p {
    text-align: center;
    color: white;
    font-size: 1.6vw;
    margin: 0;
    text-shadow: 0px 1px 2px black;
}
.logo {
    display: block;
    margin: -8% auto .5%;
    width: 25%;
}

.progress {
    padding: 3px 3px 0;
    border-radius: 25px;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    background-color: #6f6151;
    box-shadow: 0 1px 2px 0px rgb(180, 160, 140), inset 0 2px 10px 1px rgb(86, 66, 50);
    height: 2.4vw;
    width: 92%;
    margin: 5px auto;
}

.progress-bar {
    border-radius: 25px;
    height: 100%;
    width: 0%;
    background-size: 40px 40px;
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-color: #cead85;
    animation: progress-bar-stripes 1.0s linear infinite;
    box-shadow: inset 0px 2px 10px 0px rgb(234, 211, 186), inset 0px -1px 2px 0px rgb(99, 60, 19), 0px 4px 13px 0px rgba(236, 213, 188, 0.66);
}

.footnote p {
    color: #D5C6AC;
    font-size: 1.1vw;
    text-shadow: 0px 1px 2px black;
    margin: 1% 6%;
}

.footnote .right {
    float: right;
}

.footnote .left {
    float: left;
}

@-webkit-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}