@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:600&display=swap");

@-webkit-keyframes active {
    from {
        box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 10px 0px rgba(0, 0, 250, 0.6);
    }
    to {
        box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;
    }
}

@keyframes active {
    from {
        box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 10px 0px rgba(0, 0, 250, 0.6);
    }
    to {
        box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;
    }
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

body, html {
    margin: 0;
}

html {
    height: 100%;
    background-image: url(alphabet.png);
    background-position: right;
}

body {
    height: 90%;
    max-width: 800px;
    margin: 0 auto;
}

h1, p {
    font-family: sans-serif;
    text-align: center;
    padding: 20px;
}

.clearfix {
    clear: both;
}

.letter {
    font-size: 140pt;
    text-align: center;
    text-transform: uppercase;
}

.grid {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 150px 150px;
    align-items: center;
    justify-content: center;
    grid-gap: 40px 25px;
}

button,
[role=button] {
    -webkit-appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    cursor: pointer;
    width: 150px;
    height: 50px;
    background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
    border-radius: 30px;
    border: 1px solid #8F9092;
    box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 0 #CECFD1;
    transition: all 0.2s ease;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #606060;
    text-shadow: 0 1px #fff;
}

button::-moz-focus-inner,
[role=button]::-moz-focus-inner {
    border: 0;
}

button > *,
[role=button] > * {
    transition: transform 0.2s ease;
}

button:hover:not([disabled]),
[role=button]:hover:not([disabled]) {
    box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 3px 3px #CECFD1;
}

button:hover:not([disabled]) > *,
[role=button]:hover:not([disabled]) > * {
    transform: scale(0.975);
}

button:focus:not(:active),
[role=button]:focus:not(:active) {
    -webkit-animation: active 0.9s alternate infinite;
    animation: active 0.9s alternate infinite;
    outline: none;
}

button:active:not([disabled]),
[role=button]:active:not([disabled]) {
    box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

button:active:not([disabled]) > *,
[role=button]:active:not([disabled]) > * {
    transform: scale(0.95);
}

button:disabled,
[role=button]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

button.icon,
[role=button].icon {
    width: 50px;
}

button.icon svg,
[role=button].icon svg {
    margin-top: 3px;
    width: 30px;
    height: 30px;
}