/* manrope-regular - latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/manrope-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/manrope-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/manrope-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/manrope-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/manrope-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/manrope-v12-latin-regular.svg#Manrope') format('svg'); /* Legacy iOS */
}

:root {
  --background: white;
  --light-accent: rgb(230, 230, 230);
  --dark-accent: rgb(147, 144, 150);
  --contrast: black;


  --smix-red: rgb(219,112,116);
  --smix-orange: rgb(245,147,71);
  --smix-yellow: rgb(255,214,54);
  --smix-green: rgb(87,173,78);
  --smix-blue: rgb(94,132,209);
  --smix-purple: rgb(148,126,204);

  --used-letter: rgb(163, 199, 224);
  --key-color: rgb(230, 230, 230);
  --keyboard-text: black;

  --timer-foreground: rgb(230, 230, 230);
  --timer-background: rgb(147, 144, 150);
  --timer-text: rgb(147, 144, 150);
}

*, *::after, *::before {
  box-sizing: border-box;
  font-family: Manrope;
}

html, body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  height:100%;
  font-size: clamp(.5rem, 2.5vmin, 1.5rem);
  background-color: var(--background);
}

#background {
  position: fixed;
  z-index: 25;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

#header-background {
  position: fixed;
  width: 100%;
  z-index: 25;
  height: min(80px, 17vw, 10vh);
  background-color: var(--light-accent);
}

#container {
  display: flex;
  z-index: 2;
  flex-grow: 1;
  z-index: 10;
  flex-direction: column;
  height: 100%;
}

#header-container {
  position: relative;
  display: flex;
  justify-self: center;
  align-self: center;
  justify-content: center;
  align-items: center;
  gap: 2em;

  max-width: 500px;
  height: min(80px, 6.5em, 10vh);
  z-index: 25;
  background-color: var(--light-accent);
  padding-top: min(.5em, 2vh);
  padding-bottom: min(.5em, 2vh);
}
.button-container {
  display: flex;
  width: min(55px, 11vw, 8vh);
  height: min(55px, 11vw, 8vh);
  justify-content: center;
  align-items: center;
}

.header-button {
  width: min(55px, 11vw, 8vh);
  height: min(55px, 11vw, 8vh);
  font-size: min(35px, 5vh, 6vw);
  border-radius: 50%;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}

#help {
  background-color: var(--contrast);
}

.submit {
  background-color: var(--dark-accent);
  font-size: .5em;
}

.hidden-button {
  display: none;
  pointer-events: none;
}

#question {
  font-size: min(35px, 5vh, 6vw);
  color: var(--background)
}


#title {
  width: min(270px, 30vh, 50vw);
}


#letter-container {
  display: grid;
  justify-content: center;
  align-content: center;
  align-self: center;
  grid-template-columns: repeat(6, min(80px, 6em, 10vh));
  max-width: 500px;
  gap: .25em;
  margin-top: 1em
}

.letter, .letter-used {
  border-radius: 50%;
  height: min(80px, 15vw, 10vh);
  width: min(80px, 15vw, 10vh);
  font-size: min(40px, 7vw, 5vh);
  text-transform: uppercase;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.letter {
  background-color: var(--smix-blue);
}
.letter-used {
  background-color: var(--used-letter);
}

.wavy {
  position: relative;
}
.wavy span {
  position: relative;
  display: inline-block;
  animation: animate 1s ease-in-out infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
  0%
  {
    transform: translateY(0px);
  }
  5%{
    color: var(--smix-red)
  }
  10% {
    color: var(--smix-orange)
  }
  15% {
    color: var(--smix-yellow)
  }
  20%{
    transform: translateY(-10px);
    color: var(--smix-green);
  }
  25%
  {
    color: var(--smix-blue);
  }
  35%
  {
    color: var(--smix-purple)
  }
  40%
  {
    transform: translateY(0px);
    color: var(--contrast);
  }
}

#board-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  flex-grow: 1;
  grid-template-rows: repeat(7, min(54px, 9vw, 6.5vh));
  grid-template-columns: repeat(19, min(27px, 4.5vw, 3.25vh));
  gap: min(.5em, 10px, .5vh);
  column-gap: 0;
  margin-top: .2em;
  margin-bottom: .5em;
}

.circle, .blank-circle, .circle-filled, .score-bubble, .full-score-bubble {
  font-size: min(30px, 4vh, 5vw);
  grid-column: span 2;
  border-radius: 50%;
  text-transform: uppercase;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}
.half-circle-spacer {
  grid-column: span 1;
}
.score-bubble {
  background-color: var(--dark-accent);
  color: var(--background);
}
.full-score-bubble {
  background-color: var(--key-color);
  color: var(--keyboard-text);
}

.circle {
    border: .05em solid var(--dark-accent);
    color: var(--contrast);
}


.circle-filled {
  color: white;
}

.circle-active {
  background-color: var(--light-accent);
  border: .05em solid var(--dark-accent);
  animation-name: blink;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.golden-smax {
  background-color: gold;
}

@keyframes blink {
  from {
    opacity: .2;
  }
  to {
    opacity: .8;
  }
}

#timer-background {
  position: relative;
  align-self: center;
  grid-column: span 14;
/*   
  background-color: var(--timer-background); */
  height: 20px;
  width: 95%;
  border-radius: 3rem;
  overflow: hidden;
}

#timer-foreground {
  position: absolute;
  height: 100%;
  /* background-color: var(--timer-foreground); */
}

.fill-bar {
  animation: fill 180s forwards;
  animation-timing-function: linear;
}

@keyframes fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

#timer-text {

  align-self: center;
  grid-column: span 2;

  font-family: "Manrope", "regular";
  font-size: min(25px, 2em, 4vh);
  text-align: left;
}

.timer-main-color {
  color: var(--timer-text);
}

.timer-gold {
  color: #FFD700;
}

#keyboard-container {
  display: grid;
  grid-template-columns: repeat(20, min(22px, 1.5em, 2.5vh));
  grid-auto-rows: min(70px, 13vw, 8vh);
  gap: min(.25em, 1vh);
  justify-content: center;
  padding-bottom: .5em;
  touch-action: manipulation;
}

#keyboard-container button {
  font-size: inherit;
  border: none;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--keyboard-text);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.5em;
  border-radius: .45em;
  cursor: pointer;
  user-select: none;
}

.unused-key, .featured-key, .used-key {
  grid-column: span 2;
}

.unused-key {
  background-color: var(--key-color);
}

.featured-key {
  background-color: var(--smix-blue);
}

.used-key {
  background-color: var(--used-letter);
}
.wide-button {
  grid-column: span 3;
  background-color: var(--key-color);
}

.wide-button svg {
  width: 1.75em;
  height: 1.75em;
}

.cls-1 {
  fill: none;
  stroke-width: 6px;
}

.cls-1,
.cls-2 {
  stroke: var(--keyboard-text);
  stroke-miterlimit: 10;
}

.cls-2 {
  fill: var(--keyboard-text);
  stroke-width: 4px;
}

#stats-container {
  pointer-events: none;

  height: 15em;
  width: min(90%, 500px, 65vh);
  align-self: center;
  justify-self: center;
  margin-bottom: 1em;

  background-color: var(--light-accent);
  border-radius: 1em;

  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stat {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: var(--contrast);
  width: min(200px, 30vh, 40vw);
  height: min(5vh, 5vw);
  font-size: min(20px, 3vh, 4vw);
  font-weight: bold;
  text-transform: uppercase;
  text-align: left;
}
#time,
#score {
  font-weight: lighter;
  letter-spacing: normal;
  padding-left: 20px;
}

.emoji {
  display: flex;
  flex-direction: row;
  gap: min(5px, 3vw, 4vh);
}
.emoji-image {
  width: min(20px, 4.5vw, 3vh);
  height: min(20px, 4.5vw, 3vh);
}

#share, #app {
  font-family: inherit;
  font-weight: bold;
  font-size: min(30px, 3.5vh, 5vw);
  border: 0;
  padding: 0;
  background-color: inherit;
  cursor: pointer;

  user-select: none;
  text-transform: uppercase;
}
#share {
  color: var(--smix-blue);
}

#app {
  color: var(--smix-orange);
}

#keyboard-container.hidden {
  pointer-events: none;
  display: none;
}

#stats-container.visible {
  pointer-events: all;
  display: flex;
}


#confirm-window.visible {
  pointer-events: auto;
  visibility: visible;
}

#app-download-window.visible {
  pointer-events: auto;
  visibility: visible;
}

.playagain-fill-svg {
  fill: var(--background);
  stroke: var(--background);
  stroke-width: 6px;
}

.playagain-fill-svg,
.playagain-stroke-svg {
  stroke-miterlimit: 10;
}

.rightbutton-stroke-svg {
  fill: none;
  stroke: var(--background);
  stroke-width: 9px;
}

#overlay-container {
  z-index: 5;
  position: fixed;
  top:0;
  right:0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  background-color: transparent;
}

.help-container, #settings-container, #credits-container, #statistics-container {
  position: absolute;
  height: 100%;
  width: 100%;
  display: none;
  z-index: 15;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
#top-spacer {
  width: 100vw;
  height: min(80px, 17vw, 10vh);
  pointer-events: none;
}

#help-body, #settings-body, #credits-body, #statistics-body {
  position: relative;
  width: min(85%, 500px, 60vh);
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

}

.help-additional-button {
  text-transform: uppercase;
  border: none;
  text-decoration: none;
  background-color: transparent;
  font-family: inherit;
  color: var(--contrast);
  font-size: min(25px, 4vw, 3vh);
  font-weight: bold;
  pointer-events: all;
  cursor: pointer;
  padding-top: min(10px, 1vh);
}

.help-additional-button:hover {
  color: var(--dark-accent);
}

.help-additional-button:link {
  color: var(--contrast);
  text-decoration: none;
}

.help-additional-button:visited {
  color: var(--contrast);
  text-decoration: none;
}

.help-additional-button:hover {
  color: var(--dark-accent);
  text-decoration: none;
}

.help-additional-button:active {
  color: var(--light-accent);
  text-decoration: none;
}
.screen-blocker {
  position: fixed;
  height: 100%;
  width: 200%;
  pointer-events: all;
  z-index: -1;
  background-color: var(--background);
  margin-bottom: 0;
  padding-bottom: 0;
}
#help-title, #settings-title, #credits-title, #statistics-title {
  margin-top: min(10px, 1vh);
  color: var(--contrast);
  font-size: min(45px, 11vw, 5vh);
  font-weight: bold;
}
.help-text {
  color: var(--contrast);
  font-size: min(25px, 5vw, 2.25vh);
  padding-top: .5em;
  padding-bottom: .5em;
  text-align: center;
}

.help-text.help-no-top-pad {
  padding-top: 0;
}

.help-text.help-no-bottom-pad {
  padding-bottom: 0;
}

.example-text-row {
  display: flex;
  gap: min(10px, 2vw, 1vh);
  align-items: center;
}

#emoji-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(9px, 2vw, 1vh);
  text-transform: uppercase;
}
#emoji-row .help-text {
  font-size: min(12px, 3vw, 1.5vh);
}

#emoji-row .emoji-image {
  width: min(20px, 4.5vw, 2vh);
  height: min(20px, 4.5vw, 2vh);
}

#emoji-row .emoji {
  gap: min(5px, 2.5vw, .75vh);
}

.help-wide-button {
  width: min(30px, 9vw, 5vh);
  height: min(30px, 9vw, 5vh);
  font-size: inherit;
  border: none;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--keyboard-text);
  background-color: var(--key-color);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.5em;
  border-radius: min(5px, 2vw, 1vh);
  cursor: none;
  user-select: none;
}
.help-wide-button svg {
  width: min(20px, 6vw, 3vh);
  height: min(20px, 6vw, 3vh);
}

.button-example {
  border-radius: 50%;
  width: min(30px, 7vw, 3.75vh);
  height: min(30px, 7vw, 3.75vh);
  font-size: .5em;
  background-color: var(--dark-accent);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#start-container {
  position: absolute;
  z-index: 5;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

#start-body {
  position: relative;
  width: 100%;
  flex-grow: 1;
  display: flex;
  gap: min(100px, 20vh, 30vw);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: all;
}

#logo-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#logo-image-wrapper img {
  width: min(100px, 25vw, 20vh);
  pointer-events: none;
}
.rotate-forever {
  animation: rotateForever 5s infinite linear;
}
@keyframes rotateForever {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

#start-screen-button-column {
  display: flex;
  flex-direction: column;
}

.menu-button {
  text-transform: uppercase;
  border: none;
  background-color: transparent;
  font-family: inherit;
  color: var(--contrast);
  font-size: min(30px, 7vw, 5.5vh);
  font-weight: bold;
  cursor: pointer;
}

#menu-start {
  color: var(--smix-green);
}

#menu-start:hover {
  color: var(--smix-blue);
}
#menu-start:active {
  color: var(--smix-purple);
}

#menu-settings:hover, #menu-help:hover, #menu-stats:hover, #menu-app:hover {
  color: var(--dark-accent);
}

#menu-settings:active, #menu-help:active, #menu-stats:active, #menu-app:active {
  color: var(--light-accent);
}

.menu-button.hidden {
  visibility: hidden;
}

#submit, #check, #play-again, #bulb, #volume-on, #volume-off {
  width: 70%;
  height: 70%;
}

#logo-letter {
  position: absolute;
  color: white;
  font-size: min(60px, 15vw, 12vh);
  font-weight: bold;
}

#confirm-window {
  position: fixed;
  display: none;
  pointer-events: none;
  width: min(375px, 55vh, 85vw);
  top: 15vh;
  left: 50vw;
  transform: translateX(-50%);
  z-index: 1;
  flex-direction: column;
  align-items: center;
  background-color: var(--dark-accent);
  font-size: min(15px, 4vw, 3.5vh);
  border-radius: 2em;
}

#app-download-window {
  position: fixed;
  justify-content: center;
  display: none;
  pointer-events: none;
  width: min(375px, 45vh, 62vw);

  top: 25vh;
  left: 50vw;
  transform: translateX(-50%);
  z-index: 15;
  flex-direction: column;

  align-items: center;
  background-color: var(--light-accent);
  font-size: min(15px, 4vw, 3.5vh);
  border-radius: 2em;
}

.download-banner {
  width: min(280px, 35vh, 50vw);
  padding-top: min(10px, 1.5vh, 2vw);
  padding-bottom: min(10px, 1.5vh, 2vw);
  cursor: pointer;
}
.download-banner:hover {
  width: min(285px, 37vh, 53vw);
  opacity: 70%;
}
#back-download {
  text-transform: uppercase;
  border: none;
  background-color: transparent;
  font-family: inherit;
  font-size: min(30px, 7vw, 5.5vh);
  font-weight: bold;
  cursor: pointer;
  padding-bottom: min(10px, 1.5vh, 2vw);

}
.back {
  color: var(--contrast);
}
.back:hover {
  color: var(--dark-accent)
}

#button-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;
  margin-top: .5em;
  margin-bottom: 1em;
}

#button-row button {
  font: inherit;
  border: none;
  font-size: 1.5em;
  border-radius: .5em;
}
#confirm, #cancel {
  cursor: pointer;
  color: white;
}
#confirm {
  background-color: var(--smix-green);
}

#cancel {
  background-color: var(--smix-red);
}

#confirm-window.visible {
  pointer-events: all;
  display: flex;
}

#app-download-window.visible {
  pointer-events: all;
  display: flex;
}

.help-container.visible, #settings-container.visible, #credits-container.visible, #statistics-container.visible {
  display: flex;
  pointer-events: none;
}

#start-container.hidden {
  display: none;
  pointer-events: none;
}

.start-button.hidden {
  pointer-events: none;
  visibility: hidden;
}

.start-fill-svg {
  fill: var(--contrast);
  stroke: var(--contrast);
  stroke-miterlimit: 10;
  stroke-width: 6px;
}

#alert-container {
  position: relative;
  grid-column: span 13;
  /* top: min(545px, 66vh);
  left: 50vw;
  transform: translateX(-50%); */
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.alert {
  pointer-events: none;
  background-color: var(--dark-accent);
  color: var(--background);
  width: min(max-content, 350px);
  padding: min(5px);
  border-radius: .25em;
  text-align: center;
  font-size: min(.85em, 14px);
}
#settings-title {
  margin-bottom: min(40px, 10vh);
}

#settings-body {
  gap: min(20px, 5vh)
}

.settings-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

.settings-button {
  text-transform: uppercase;
  border: none;
  text-decoration: none;
  background-color: transparent;
  font-family: inherit;
  color: var(--contrast);
  font-size: min(30px, 6vw, 4vh);
  font-weight: bold;
  pointer-events: all;
  cursor: pointer;
}

.settings-button:hover {
  color: var(--dark-accent);
}

.settings-button:link {
  color: var(--contrast);
  text-decoration: none;
}

.settings-button:visited {
  color: var(--contrast);
  text-decoration: none;
}

.settings-button:hover {
  color: var(--dark-accent);
  text-decoration: none;
}

.settings-button:active {
  color: var(--light-accent);
  text-decoration: none;
}

.icon-holder {
  border-radius: 50%;
  width: min(30px, 7vw, 3.75vh);
  height: min(30px, 7vw, 3.75vh);
  font-size: .5em;
  background-color: var(--contrast);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  cursor: pointer;
}


.light-lines-svg {
  stroke-width: 3px;
}

.light-lines-svg,
.light-bulb-svg {
  fill: none;
  stroke: var(--background);
  stroke-miterlimit: 10;
}

.light-bulb-svg {
  stroke-width: 6px;
}

.volume-fill {
  fill: var(--background);
}

.volume-fill,
.volume-stroke {
  stroke: var(--background);
  stroke-miterlimit: 10;
  stroke-width: 6px;
}

.volume-stroke {
  fill: none;
  stroke-linecap: round;
}

.icon-holder.hidden {
  display: none;
  pointer-events: none;
}

.statistics-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: min(300px, 70vw, 60vh);
  margin-bottom: min(10px, 2vh);
  margin-top: min(10px, 2vh);
}

#statistics-spacer {
  height: min(70px, 15vh);
  width: 100%;
}

.statistics-title {
color: var(--contrast);
display: flex;
justify-content: center;
align-items: center;
font-size: min(20px, 5vw, 4vh);

text-transform: uppercase;
}

.statistics-circle {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--light-accent);
  border-radius: 50%;
  
  width: min(60px, 12vw, 10vh);
  height: min(60px, 12vw, 10vh);
}

.statistics-entry {
color: var(--contrast);


text-align: center;
text-anchor: middle;
font-size: min(20px, 5vw, 4vh);
}

.about-text {
  color: var(--contrast);
  font-size: min(15px, 4vw, 1.75vh);
  width: min(400px, 80vw, 50vh);
  padding-top: .5em;
  padding-bottom: .5em;
  text-align: left;
  text-indent: min(40px, 7vw, 5vh);
}

#credits-body {
  gap: min(30px, 3vh);
}

.credit-entry {
  pointer-events: all;
  text-align: center;
  color: var(--contrast);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: min(30px, 5vw, 4vh);
}
.credit-job {
  text-align: center;
}
.credit-name {
  font-weight: bold;
  text-align: center;
  
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.credit-name a:link {
  color: var(--contrast);
  text-decoration: none;
}
.credit-name a:visited{
  color: var(--contrast);
} 
.credit-name a:hover {
  color: var(--dark-accent);
  text-decoration: underline;
}
.credit-name a:active {
  color: var(--light-accent);
}
.credit-name svg {
  fill: var(--contrast);
  width: min(20px, 4vw, 3vh);
  height: min(20px, 4vw, 3vh);
}
.desc {
  display: none;
}