body{font-family:Arial,Helvetica,sans-serif;text-align:center}hr{width:500px}#title{font-size:36px;font-weight:700;letter-spacing:2px}#board{width:350px;height:420px;margin:3px auto 0;display:flex;flex-wrap:wrap}.tile{border:2px solid lightgray;width:60px;height:60px;margin:2.5px;color:#000;font-size:36px;font-weight:700;display:flex;justify-content:center;align-items:center}.correct{background-color:#15ff00;color:#000;border-color:#fff}.present{background-color:#f8ec04;color:#000;border-color:#fff}.absent{background-color:#7f7f7f;color:#000;border-color:#fff}.keyboard-row{width:400px;margin:0 auto;display:flex;flex-wrap:wrap}.key-tile{width:36px;height:40px;margin:1px;border:1px solid lightgray;font-size:20px;font-weight:700;display:flex;justify-content:center;align-items:center}.enter-key-tile{width:76px;height:40px;margin:1px;border:1px solid lightgray;font-size:20px;font-weight:700;display:flex;justify-content:center;align-items:center}p{font-family:Arial,Helvetica,sans-serif;font-size:18px;padding:25px;text-decoration:none}#score{background-color:gray;margin:2rem 0;display:flex;flex-direction:column;align-items:flex-end;align-items:center}#keyboard-cont{margin:2rem 0;display:flex;flex-direction:column;align-items:flex-end;align-items:center}#keyboard-cont div{display:flex;align-items:flex-end}.second-row{margin:1rem 0}.keyboard-button{font-size:2rem;font-weight:700;padding:1rem;margin:0 4px;cursor:pointer;text-transform:uppercase}#game-board{display:flex;align-items:center;flex-direction:column;padding:1rem;margin:0 4px}.letter-box{border:2px solid gray;border-radius:3px;margin:2px;font-size:2.5rem;font-weight:700;height:3rem;width:3rem;display:flex;justify-content:center;align-items:center;text-transform:uppercase}.filled-box{border:2px solid black}.letter-row{display:flex}.gameBoard{border:2.5px outset grey;text-align:center}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.buttons{margin:20%;text-align:center}.btn-hover{width:200px;font-size:16px;font-weight:600;color:#fff;cursor:pointer;margin:20px;height:55px;text-align:center;border:none;background-size:300% 100%;border-radius:100px;moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.btn-hover:hover{background-position:00% 0;moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.btn-hover:focus{outline:none}.btn-hover.color-3{background-image:linear-gradient(to right,#667eea,#764ba2,#6B8DD6,#8E37D7);box-shadow:0 4px 15px #744fa8bf;$particles: 50;$width: 500;$height: 500;// Create the explosion... $box-shadow: ();$box-shadow2: ();@for $i from 0 through $particles{$box-shadow: $box-shadow,random($width)-$width / 2 + px random($height)-$height / 1.2 + px hsl(random(360),100,50); $box-shadow2: $box-shadow2,0 0 #fff}@mixin keyframes ($animationName){@-webkit-keyframes #{$animationName} {@content;} @-moz-keyframes #{$animationName} {@content;} @-o-keyframes #{$animationName} {@content;} @-ms-keyframes #{$animationName} {@content;} @keyframes #{$animationName} {@content;}}@mixin animation-delay ($settings){-moz-animation-delay: $settings; -webkit-animation-delay: $settings; -o-animation-delay: $settings; -ms-animation-delay: $settings; animation-delay: $settings;}@mixin animation-duration ($settings){-moz-animation-duration: $settings; -webkit-animation-duration: $settings; -o-animation-duration: $settings; -ms-animation-duration: $settings; animation-duration: $settings;}@mixin animation ($settings){-moz-animation: $settings; -webkit-animation: $settings; -o-animation: $settings; -ms-animation: $settings; animation: $settings;}@mixin transform ($settings){transform: $settings; -moz-transform: $settings; -webkit-transform: $settings; -o-transform: $settings; -ms-transform: $settings;}.pyro > .before,.pyro > .after {position: absolute; width: 5px; height: 5px; border-radius: 50%; box-shadow: $box-shadow2; @include animation((1s bang ease-out infinite backwards,1s gravity ease-in infinite backwards,5s position linear infinite backwards));} .pyro > .after {@include animation-delay((1.25s,1.25s,1.25s)); @include animation-duration((1.25s,1.25s,6.25s));} @include keyframes(bang) {to {box-shadow:$box-shadow;}} @include keyframes(gravity) {to {@include transform(translateY(200px)); opacity: 0;}} @include keyframes(position) {0%,19.9% {margin-top: 10%; margin-left: 40%;} 20%,39.9% {margin-top: 40%; margin-left: 30%;} 40%,59.9% {margin-top: 20%; margin-left: 70%} 60%,79.9% {margin-top: 30%; margin-left: 20%;} 80%,99.9% {margin-top: 30%; margin-left: 80%;}} body {font-family: cursive;} .glow {font-size: 80px; color: #fff; text-align: center; animation: glow 1s ease-in-out infinite alternate; margin-top: 250px;} @-webkit-keyframes glow {from {text-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 30px #1a00ea,0 0 40px #1a00ea,0 0 50px #1a00ea,0 0 60px #1a00ea,0 0 70px #1a00ea;} to {text-shadow: 0 0 20px #fff,0 0 30px #1a00ea,0 0 40px #1a00ea,0 0 50px #1a00ea,0 0 60px #1a00ea,0 0 70px #1a00ea,0 0 80px #1a00ea;}}}