body { text-align: center; background-color: black; transition: 0.1s; font-family: 'Work Sans', sans-serif; margin: 3vw auto; width: 95vw; min-width: 400px; }
.box { position: relative; z-index: 1; cursor: pointer; background-color: #333; height: 2.2vw; width: 2.2vw; display: inline-block; border-radius: 2.2vw; margin: 0.1vw; }
.color-picker { text-align: center; display: flex; align-items: center; flex-direction: column; color: white; padding: 1.5vw; margin-bottom: 20px; }

.select-color.cyan, .cyan { background-color: #3db2ff; color: #3db2ff; }
.select-color.yellow, .yellow { background-color: #fce875; color: #fce875; }
.select-color.magenta, .magenta { background-color: #ff5457; color: #ff5457; }
.select-color.green, .green{ background-color: #61e786; color: #61e786; }
.select-color.orange, .orange { background-color: #f7896f; color: #f7896f; }
.select-color.blue, .blue { background-color: #00eef4; color: #00eef4; }
.select-color.purple, .purple { background-color: #abacff; color: #abacff; }
.select-color.pink, .pink { background-color: #ff92d0; color: #ff92d0; }
.select-color { cursor: pointer; display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; font-size: 68px; font-weight: bold; text-align: center; margin: 2.8vw 1.8vw; color:#fff; }
.select-color:not(.not-selected){ color: #FFF; }

.open .box::before { content: ''; cursor: pointer; background-color: transparent; height: 2.4vw ;width: 2.4vw; display: inline-block; border-radius: 2.4vw; position: absolute; z-index: 1; left: -0.1vw; top: -0.1vw; filter: blur(5px); opacity: 0.8; }
.cyan.box::before { background-color: #3db2ff; color: #3db2ff; }
.yellow.box::before { background-color: #fce875; color: #fce875; }
.magenta.box::before { background-color: #ff5457; color: #ff5457; }
.green.box::before { background-color: #61e786; color: #61e786; }
.orange.box::before { background-color: #f7896f; color: #f7896f; }
.blue.box::before { background-color: #00eef4; color: #00eef4; }
.purple.box::before { background-color: #abacff; color: #abacff; }
.pink.box::before { background-color: #ff92d0; color: #ff92d0; }

.toggle-blink { cursor: pointer; flex: 1; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; height: 6vw; border-radius: 0; background-color: black; letter-spacing: 0.2em; font-size: 5.75vw; line-height: 5.75vw; }
.opacity { opacity: 1 !important; }
.blink { opacity: 0.7; }
.color-selector { display: flex; flex: 1; flex-flow: wrap; justify-content:center; }
.color-picker > * { width: 100%; }

:root {
  --hover-color: #fff;
}

.toggle-blink:hover { color: var(--hover-color); animation-name: blink; animation-duration: 4s; animation-iteration-count: infinite; }

@keyframes blink {
   0% { color: inherit; }
   100% { color: #fff; }
}

@media only screen and (max-device-width: 1280px) {
    .box { height: 2.1vw; width: 2.1vw; }
}
@media only screen and (max-device-width: 680px) {
    .box { height: 4.6vw; width: 4.6vw; }
    .row:nth-child(odd) .box:first-child { display: none; }
}