:root {
    --spinners-width: 500px;
    --buttons-width: 200px;
    --bg-color: hsl(110, 100%, 96%);
}

::placeholder {
    color: hsl(57, 29%, 65%);
    opacity: 1;
}

.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

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

body, html, .container {
    width: 100%;
    height: 100%;
    font-family: 'Ubuntu', sans-serif;
    background: hsl(110, 100%, 96%);
}

.container, .spinners {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100%;
    width: var(--spinners-width);
}

.container .spinners .spinner-row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 35px 0;
}

.letter-spinner {
    position: relative;
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
}

.letter-spinner .letters {
    width: 100%;
    height: 100%;
    transition: all 4s ease-in-out;
    transform: rotate(0deg);
}

.letter-spinner .letters .letter {
    font: 26px Monaco, MonoSpace;
    height: 50%;
    position: absolute;
    width: 20px;
    left: 90px;
    top: 0;
    transform-origin: bottom center;
}

.letter-spinner .letters .letter[data-char="0"] { transform: rotate(0deg); }
.letter-spinner .letters .letter[data-char="1"] { transform: rotate(45deg); }
.letter-spinner .letters .letter[data-char="2"] { transform: rotate(90deg); }
.letter-spinner .letters .letter[data-char="3"] { transform: rotate(135deg); }
.letter-spinner .letters .letter[data-char="4"] { transform: rotate(180deg); }
.letter-spinner .letters .letter[data-char="5"] { transform: rotate(225deg); }
.letter-spinner .letters .letter[data-char="6"] { transform: rotate(270deg); }
.letter-spinner .letters .letter[data-char="7"] { transform: rotate(315deg); }

.window {
    top: 42%;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: -moz-radial-gradient(transparent 20px, hsl(110, 100%, 96%) 20px);
    background: -webkit-radial-gradient(transparent 20px, hsl(110, 100%, 96%) 20px);
    background: -ms-radial-gradient(transparent 20px, hsl(110, 100%, 96%) 20px);
    background: -o-radial-gradient(transparent 20px, hsl(110, 100%, 96%) 20px);
    pointer-events: none;
}

.window::before {
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    top: -50%;
    left: 0;
    background: var(--bg-color);
}

.window::after {
    content: '';
    display: block;
    position: absolute;
    width: 40px;
    height: 35px;
    top: 80px;
    left: 80px;
    box-sizing: content-box;
    border: 2px solid black;
    border-radius: 50%;
    box-shadow: inset 1px 2px 4px rgba(0,0,0,0.4);
    background: hsl(192deg 77% 76% / 42%);
}

.category {
    position: absolute;
    transform: rotate(180deg);
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    padding: 10px 20px;
    overflow: visible;
    word-wrap: break-word;
    text-align: center;
    width: 170px;
    height: 100px;
    border-radius: 10px;
    background: #f5f5f5;
    border: 2px solid black;
    background: hsl(110, 52%, 78%);
    box-shadow: 5px 5px 5px -3px rgba(0, 0, 0, 0.7);
}


.container, .answers-container {
    width: calc(100vw - var(--spinners-width) - var(--buttons-width));
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.answers-container .answers {
    width: 90%;
    min-height: 80%;
    padding: 20px 0;
    border-radius: 5px;
    min-width: 250px;
    background: hsl(57, 100%, 93%);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.answer {
    width: 80%;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    font-weight: 300;
    margin: 5px 0;
}

.answer .topic .name, .answer .topic .letter {
    font-weight: bold;
}

.answer .answer-field {
    box-shadow: none;
    border: none;
    background: hsl(57, 72%, 85%);
    margin-top: 10px;
    height: 50px;
    padding: 10px 20px;
    font-size: 24px;
    margin: 10px -20px;
    font-weight: 300;
    font-family: 'Ubuntu', sans-serif;
}

.container .buttons-container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: var(--buttons-width);
    height: 100%;
}

.spin-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    box-sizing: content-box;
    border: 2px solid black;
    border-radius: 50%;
    box-shadow: inset -3px -6px 12px rgba(0,0,0,0.6);
    background: hsl(4, 87%, 56%);
    color: white;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
}

.spin-button:not(.disabled):hover {
    box-shadow: inset 3px 6px 12px rgba(0,0,0,0.6);
    background: hsl(4, 89%, 39%);
    color: hsl(4, 32%, 86%);
}

.spin-button:not(.disabled):hover span {
    margin-left: -4px;
    margin-top: -4px;
}

.new-game {
    margin-top: 40px;
    padding: 0 20px;
    display: flex;
    flex-flow: column nowrap;
}

.new-game .new-game-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    box-sizing: content-box;
    border: 2px solid black;
    border-radius: 15px;
    box-shadow: inset -3px -6px 12px rgba(0,0,0,0.6);
    background: hsl(223, 87%, 56%);
    color: white;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.new-game .new-game-button:not(.disabled):hover {
    box-shadow: inset 3px 6px 12px rgba(0,0,0,0.6);
    background: hsl(223, 89%, 39%);
    color: hsl(223, 32%, 86%);
}

.new-game .new-game-button:not(.disabled):hover span {
    margin-left: -6px;
    margin-top: -2px;
}

.new-game .new-game-explanation {
    font-weight: 300;
    color: hsl(110, 97%, 10%);
}