* {
    padding: 0;
    margin: 0
}

canvas {
    margin: auto;
    display: block;
}

@media screen and (orientation: portrait) {
    canvas {
        height: 56.25vmin;
        max-height: 100%;
    }
}

@media screen and (orientation: landscape) {
    canvas {
        width: 177.778vmin;
        max-width: 100%;
    }
}

html {
    margin: auto;
    height: 100%;
}

body {
    /*background-color: black;*/
    overflow: hidden;
    position: relative;
    height: 100%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

svg {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    overflow: visible;
}

.svg-icon {
    cursor: pointer;
}

.svg-icon path {
    stroke: rgba(255, 255, 255, 0.9);
    fill: none;
    stroke-width: 1;
}

.game {
    position: relative;
}

input, button {
    outline: none;
    border: none;
}

.container {
    top: 25%;
    left: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 28vh;
    width: 40vw;
    overflow: hidden;
}

::placeholder {
    color: #cecece;
}

.ripple {
    position: absolute;
    width: 15rem;
    height: 15rem;
    margin-left: -7.5rem;
    margin-top: -7.5rem;
    background: rgba(0, 0, 0, 0.4);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-animation: animRipple 0.4s;
    animation: animRipple 0.4s;
    border-radius: 50%;
}