/* {
    border: 1px solid #888;
}*/

@import url('https://fonts.googleapis.com/css?family=Roboto');

:root {
    --green:  	#9ff1a5;
    --red: #ff9292;
    --dim: 62px;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #f8f994;
}

h1, h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #333;
    margin: 10px;
}

h1 {
    font-size: 60px;
}

h2 {
    font-size: 37px;
}

p {
    font-family: 'Roboto', sans-serif;
    font-size: 23px;
    font-weight: 100;
    color: #333; 
    margin: 10px;
}

.center {
    position: relative;
    top: 20%;
    margin: 0;
}

.center1 {
    position: relative;
    margin: 30px;
}

.container {
    height: 100%;
    position: relative;
}

.game {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 540px;
    height: 650px;
    border-radius: 9px;
    background-color: #333;
    padding: 5px;

}

.box {
    height: 100px;
    width: 100px;
    float: left;
    margin: 0;
    padding: 0px;
    text-align: center;
    border-radius: 9px;
    border: 4px solid #333;
    background-color: #f1c97c;

    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;

}

.green {
    background-color: var(--green);
    animation-name: getIn;
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.red {
    background-color: var(--red);
    animation-name: getIn1;
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.won, .init {
    z-index: 999;
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    border: 8px solid #333;
    border-radius: 7px;
}

.won {
    background-color: var(--green);
    top: 100%;
    width: 600px;
    height: 300px;
}

.init {
    background-color: var(--red);
    top: 30%;
    width: 600px;
    height: 300px;
}

.floating {
    position: relative;
    animation-name: floating;
    animation-iteration-count: infinite;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #333;
    margin-top: 30px;
}

@keyframes won {
    from {top: 100%; transform: rotate(180deg);}
    to   {top: 30%; transform: rotate(0deg);}    
}

@keyframes start {
    from   {top: 30%; transform: rotate(0deg);}    
    to {top: 100%; transform: rotate(180deg);}
}

@keyframes floating {
    0% {top: 0px; transform: rotate(0deg);}
    25% {top: 5px; transform: rotate(3deg);}
    50% {top: -5px; transform: rotate(-3deg);}
    100%   {top: 0px; transform: rotate(0deg);}  
}

@keyframes getIn {
    from {background-size: 0%;}
    to   {background-size: 70%;}
}

@keyframes getIn1 {
    from {background-size: 0%;}
    to   {background-size: 70%;}
}

@media (max-width: 500px) {
    .game {
        width: 331px;
        height: 396px;
    }

    .box {
        width: var(--dim);
        height: var(--dim);
        border: 2.1px solid #333;
    }

    .won, .init {
        width: 300px;
        height: 500px;
    }

    .init {
        top: 10%;
    }
}