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

body{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 	 background-image: url(img/bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.container{
    height: 80vh;
    width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo img{
    width: 220px;
    margin-bottom: 20px;
}

.logo img.active{
    animation: squizz 0.2s ease-in;
}

.btn-group{
    display: flex;
    flex-wrap: wrap;
    max-width: 300px;
    margin: 0 auto;
    z-index: 6;
}
.btn-container:nth-of-type(odd){
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-self: center;
}

.btn-container:nth-of-type(even){
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-self: center;
}
.btn{
    display: flex;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin: 15px 15px;
    border: 4px solid #fff;
    box-shadow: 0 3px 20px rgba(0,0,0,0.3);
    transition: all .2s;
}

.btn.active{
    box-shadow: 0 3px 8px rgba(0,0,0,0.7);
    transform: scale(0.9);
}

#btn-1{
    background-color: #ffadad;
}
#btn-2{
    background-color: #ffd6a5;
}
#btn-3{
    background-color: #d5d88a;
}
#btn-4{
    background-color: #ccd5ae;
}
#btn-5{
    background-color: #9bf6ff;
}
#btn-6{
    background-color: #a0c4ff;
}
#btn-7{
    background-color: #a0c4ff;
}
#btn-8{
    background-color: #bdb2ff;
}

.btn img{
    width: 40px;
}

@keyframes squizz {
    0%{
        transform: rotate(0deg) scale(1);
    }
    10%{
        transform: rotate(3deg) scale(1.1);
    }
    20%{
        transform: rotate(-3deg) scale(1.1);
    }
    30%{
        transform: rotate(3deg) scale(1);
    }
    40%{
        transform: rotate(-3deg) scale(1);
    }
    50%{
        transform: rotate(3deg) scale(1.1);
    }
    60%{
        transform: rotate(-3deg) scale(1.1);
    }
    70%{
        transform: rotate(3deg) scale(1);
    }
    80%{
        transform: rotate(-3deg) scale(1);
    }
    90%{
        transform: rotate(3deg) scale(1.1);
    }
    100%{
        transform: rotate(0deg) scale(1.1);
    }
}