@font-face{font-family:Montserrat;src:url(../fonts/Montserrat.ttf)}*{margin:0;padding:0;font-family:Montserrat,Avenir;transition-property:all;transition-duration:.5s}body{background-color:#2f2f2f}#header{height:150px;display:flex;flex-flow:column nowrap;justify-content:center;background-color:#2f2f2f;text-align:center;color:#fff}#header h1{text-transform:uppercase;margin-bottom:10px}#header h2{font-weight:400;font-size:20px}#header span{font-weight:800;font-size:35px}#navigation{height:35px;margin:0 20%;display:flex;justify-content:center;color:#f5f5f5}.navigationOption{display:flex;align-items:center;padding:5px}#difficultyContainer,#newColOrPlayAgain,#result{width:150px;justify-content:center}#difficultyContainer,#newColOrPlayAgain{border-width:1px;border-style:solid;border-color:#fff;cursor:pointer}#difficultyContainer{padding:5px}#container{margin-top:50px!important;max-width:600px;margin:auto}.square{float:left;width:30%;padding-bottom:30%;margin:1.6%;border-radius:20px;cursor:pointer}.hidden{visibility:hidden}.chosenDifficulty{background-color:#fff;font-weight:700;color:#2f2f2f}@keyframes shakeX{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.alert{animation-name:shakeX;animation-duration:1s;animation-timing-function:ease-in-out}@media only screen and (max-width:515px){h1{font-size:medium}div#navigation{margin-top:10px}div#difficulty,div#newColOrPlayAgain{font-size:xx-small!important}}@media only screen and (max-width:650px){div#difficulty,div#newColOrPlayAgain{font-size:smaller}}