:root {
    --form-control-disabled: #959495;
}

h1 {
    text-align: center;
    &::before {
        content: " ⠃ ";
    }
    &::after {
        content: " ⠃ ";
    }
    
}

#gameOver {
    visibility: hidden;
    p {
        font-size: xx-large;
        span {
            /* animation: rotate 2s infinite ease-in-out; */
            animation: rotate 5s linear infinite;
            /* background-color: red; */
        }
    }
}

/* #lives:first-letter {
    font-size: 120%;
    animation: pulseOpacity 2s infinite ease-in-out;
} */

/* #lives:first-letter {
    color: red;
    animation: pulseOpacity 2s infinite ease-in-out;
} */

p#points {
        font-size: xx-large;
        /* width: max(5em, 50%); */

}

.form-control {
    position: absolute;
    bottom: 0.4em;
    right: 1em;
    transform: rotate(2deg);
}

body {
    justify-content: center;
    align-items: center;
}

body>div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em;
    align-items: baseline;
    /* grid-template-rows: min(10.5em); */
}

body>div {
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


#sixPointOutput,
#eightPointOutput {
    font-size: 3em;
    /* font-size: xx-large; */
    field-sizing: content;
}

#visualAnswer {
    font-size: 2em;
}

progress[value] {
    border-radius: 7px;
    overflow: hidden;
    width: 90%;
    /* background-color: #f4f4f4; */
    border-radius: 22em;
    /* background: linear-gradient(#fff8,#fff0), repeating-linear-gradient(135deg,#0003 0 10px,#0000 0 20px),#31c6f7; */
    /* background-color: linear-gradient(#fff8,#fff0), repeating-linear-gradient(135deg,#0003 0 10px,#0000 0 20px),#31c6f7; */
    height: 3em;
    /* --val: attr(value type(<number>)); */
    /* Default max to 1 if not specified */
    /* --max: attr(max type(<number>), 1);  */
    /* --percentage: calc(100% * var(--val) / var(--max)); */
    /* Dynamic color based on value */
    /* background-color: hsl(var(--val) / var(--max) * 120, 70%, 50%);  */
    --val: attr(value type(<number>));
    --max: attr(max type(<number>), 1);
    --p: calc(100% * var(--val) / var(--max));

}

progress[value]::-webkit-progress-value {
  background: conic-gradient(red 0 0) 0 / max(0%, 20% - var(--p)) 1%,
              conic-gradient(rgb(255, 102, 0) 0 0) 0 / max(0%, 40% - var(--p)) 1%,
              conic-gradient(orange 0 0) 0 / max(0%, 60% - var(--p)) 1%,
              conic-gradient(rgb(187, 211, 2) 0 0) 0 / max(0%, 80% - var(--p)) 1%,
              green;
    /* background-color: #04af2f; */
              /* background: hsl(var(--val) / var(--max) * 120, 70%, 50%);  */
}

progressXX {
    width: 100%;

    /* height: 1.5em; */
    /* background-color: #e4e4e4; */
    /* background-color: #f4f4f4; */
    background: linear-gradient(#fff8,#fff0), repeating-linear-gradient(135deg,#0003 0 10px,#0000 0 20px),#31c6f7;

    background-color: linear-gradient(#fff8,#fff0), repeating-linear-gradient(135deg,#0003 0 10px,#0000 0 20px),#31c6f7;
    border-radius: 22em;
    /* border: none; */
    /* transition: width 1s; */
}
div:has(progress) {
    column-span: all;
}

@font-face {
    font-family: kvileSixDotsShadow;
    src: url("./NorBraille6ShadowBlankSpace.ttf")
}

@font-face {
    font-family: kvileEightDotsShadow;
    src: url("./NorBraille8ShadowBlankSpace.ttf")
}

@font-face {
    font-family: kvileSixDots;
    src: url("./NorBraille6.ttf")
}

@font-face {
    font-family: kvileEightDots;
    src: url("./NorBraille8.ttf")
}

html:has(input[type="checkbox"]:checked) #sixPointOutput {
    font-family: kvileSixDotsShadow;
}

html:has(input[type="checkbox"]:checked) #eightPointOutput {
    font-family: kvileEightDotsShadow;
}

#sixPointOutput, h1::before, h1::after {
    /* font-family: kvileSixDots; */
    font-family: kvileSixDotsShadow;
}

#eightPointOutput {
    font-family: kvileEightDots;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
    /* transform: rotate(360deg); */
  }
}

@keyframes pulse {
  0% {
    transform: scale(1); /* Start at original size */
    opacity: 1;
  }
  50% {
    transform: scale(0.95); /* Grow slightly */
    opacity: 0.7;
  }
  100% {
    transform: scale(1); /* Return to original size */
    opacity: 1;
  }
}

@keyframes pulse2 {
  0% {
    transform: scale(1); /* Start at original size */
    opacity: 1;
  }
  50% {
    transform: scale(0.95); /* Grow slightly */
    opacity: 0.7;
  }
  100% {
    transform: scale(1); /* Return to original size */
    opacity: 1;
  }
}

@keyframes pulseOpacityX {
  0% {
    /* opacity: 1; */
    font-size: 100%;
  }
  50% {
    /* transform: scale(1.5); */
    /* opacity: 0.2; */
    font-size: 96%;

  }
  100% {
    /* opacity: 1; */
    font-size: 100%;
  }
}