/* Reset */
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body 
{
    min-height: 100%;
}

body 
{
    font-family: "Pixelify Sans", "Segoe UI", Arial, sans-serif;
    color: #ffffff;
    opacity: 1;
    transition: opacity .35s ease;
}

body.fade-out 
{
    opacity: 0;
}

button,
a 
{
    font: inherit;
}

button 
{
    cursor: pointer;
}

a 
{
    color: inherit;
    text-decoration: none;
}

/* Buttons */
.button 
{
    min-width: 280px;
    padding: 14px 24px;
    border: 3px solid #000;;
    background: #8b8b8b;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #2b2b2b;
    box-shadow: inset 3px 3px 0 #e9e9e9, inset -3px -3px 0 #393939, 0 5px 0 rgba(0, 0, 0, .35);;
    transition: transform .12s ease, color .12s ease, background .12s ease;
}

.button:hover,
.button:focus-visible 
{
    color: #ffffa0;
    outline: 3px solid rgba(255, 255, 160, .6);
    outline-offset: 3px;
}

.button:active 
{
    transform: translateY(3px);
    box-shadow: inset -3px -3px 0 #e9e9e9, inset 3px 3px 0 #393939;;
}

/* Icon Buttons */
.icon-button,
.game-action 
{
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 3px solid #000;
    background: rgba(50, 50, 50, .78);
    color: #ffffff;
    font-size: 22px;
    box-shadow: inset 2px 2px 0 #dddddd, inset -2px -2px 0 #222222;
    transition: transform .12s ease, background .12s ease;
}

.icon-button:hover,
.game-action:hover 
{
    transform: scale(1.05);
}

.icon-button:active,
.game-action:active 
{
    transform: scale(.96);
}

/* Clouds */
.cloud 
{
    position: absolute;
    width: 150px;
    height: 34px;
    background: #ffffff;
    opacity: .82;
    box-shadow: 40px 0 #ffffff,
        80px 0 #ffffff,
        30px -28px #ffffff,
        70px -28px #ffffff;
    animation: cloudMove linear infinite;
    z-index: 1;
}

.cloud--one 
{
    top: 90px;
    left: -260px;
    animation-duration: 45s;
}

.cloud--two 
{
    top: 190px;
    left: -520px;
    transform: scale(.8);
    animation-duration: 68s;
}

.cloud--three 
{
    top: 300px;
    left: -850px;
    transform: scale(1.15);
    animation-duration: 84s;
}

@keyframes cloudMove 
{
    to 
    {
        translate: calc(100vw + 650px) 0;
    }
}