body {
 font-family: monospace;
 background: #18121E;
 color: #EAC67A;
}

.title {
 font-size: 40px;
 text-align: center;
}

.die-container {
 margin: 0;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}

.die {
 margin: 20px;
 border: 0;
 padding: 0;
 width: 200px;
 height: 200px;
 background: #233237;
 color: #EAC67A;
 font-family: monospace;
 font-size: 40px;
}

.die:focus {
 outline: #EAC67A auto 5px;
}

.die:hover {
 cursor: pointer;
}

.result-layer {
 display: none;
}

.result-layer.is--open {
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #18121E;
 color: #EAC67A;
}

.result {
 margin: 0;
 padding: 0;
 font-size: 500px;
 text-align: center;
}

.result:hover {
 cursor: pointer;
}

.no-scroll {
 overflow: hidden;
}