:root {
    --hover-color-1: #e81416;
    --hover-color-2: #ffa500;
    --hover-color-3: #faeb36;
    --hover-color-4: #487de7;
    --hover-color-5: #4b369d;
    --hover-color-6: #70369d;
}

.word {
    display: inline;
    margin-right: 20px;
    margin-bottom: 5px;
}

.highlight { 
    background-color: yellow; 
}

.content-wrapper {
    display: flex;
    gap: 2.5vw;
    align-items: center;
    margin-left: 40vw;
}

.hovers-container { 
    display: flex; 
    flex-direction: column;
    width: fit-content;
    flex-shrink: 0;
    gap: 2vw;
}

.circle {
  position: fixed;
  left: 10vw;
  top: 20vh;
  width: 28vw;
  height: 55vh;
  --n: 6;
  --r: 9vw;
}

/* Background disk */
.circle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  
  /*background-color: rgba(0, 255, 0, 0.2);*/

  /*border: 0.4vw solid rgb(0, 255, 0);
  border-width: 5px;
  border-radius: 3%;*/
}

.hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:
        translate(-50%, -50%)
        rotate(calc(360deg / var(--n) * var(--i)))
        translateX(var(--r));
    transform-origin: center;

    border: 0.5vw solid;
    user-select: none;
    padding: 1.2vw 1.2vw;
    font-size: 1.2vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: monospace;
}

.hover[data-id="hover1"] {
    color: var(--hover-color-1);
    border-color: var(--hover-color-1);
    background-color: color-mix(in srgb, var(--hover-color-1) 30%, transparent 70%);
    box-shadow: 0 0 .5vw var(--hover-color-1);
}

.hover[data-id="hover2"] {
    color: var(--hover-color-2);
    border-color: var(--hover-color-2);
    background-color: color-mix(in srgb, var(--hover-color-2) 30%, transparent 70%);
    box-shadow: 0 0 .5vw var(--hover-color-2);
}

.hover[data-id="hover3"] {
    color: var(--hover-color-3);
    border-color: var(--hover-color-3);
    background-color: color-mix(in srgb, var(--hover-color-3) 30%, transparent 70%);
    box-shadow: 0 0 .5vw var(--hover-color-3);
}

.hover[data-id="hover4"] {
    color: var(--hover-color-4);
    border-color: var(--hover-color-4);
    background-color: color-mix(in srgb, var(--hover-color-4) 30%, transparent 70%);
    box-shadow: 0 0 .5vw var(--hover-color-4);
}

.hover[data-id="hover5"] {
    color: var(--hover-color-5);
    border-color: var(--hover-color-5);
    background-color: color-mix(in srgb, var(--hover-color-5) 30%, transparent 70%);
    box-shadow: 0 0 .5vw var(--hover-color-5);
}

.hover[data-id="hover6"] {
    color: var(--hover-color-6);
    border-color: var(--hover-color-6);
    background-color: color-mix(in srgb, var(--hover-color-6) 30%, transparent 70%);
    box-shadow: 0 0 .5vw var(--hover-color-6);
}

.content-wrapper { position: relative; }