#connecting{
    display:none;
}

#back-button{
    width: fit-content;
    font-weight: bold;
    font-size: 100%;
    border-radius: 10px;
    padding: 1px 2px;
    border-width: 4px;
    padding:5px;
    background-color: transparent;
}

/* light mode styles */
.board-light {
  background-color: #abb3ce;
  border: solid #1b1835 3px;
}

.light-mode {
  background-color: white;
  color: #13132a;
}

#board .tile-no-match-light {
  background-color: rgb(245, 160, 202);
}

#board .tile-partial-match-light {
  background-color: rgb(238, 212, 119);
  box-shadow: 0 0 10px rgb(0, 0, 0);
}

#board .tile-match-light {
  background-color: rgb(87, 255, 92);
  box-shadow: 0 0 30px rgb(0, 0, 0);
}

/* dark mode stles */
.board-dark {
  background-color: #352870;
  border: solid #eb5497 3px;
}

.dark-mode {
  color: white;
  background-color: #1b1835;
}

#board .tile-no-match-dark {
  background-color: rgb(155, 95, 155);
  box-shadow: none;
}

#board .tile-partial-match-dark {
  background-color: rgb(173, 147, 86);
  box-shadow: 0 0 8px #f5ce45;
}

#board .tile-match-dark {
  background-color: rgb(73, 156, 127);
  box-shadow: 0 0 30px #33c15b;
}

/* colours off */
#board .tile-no-match-grey-dark {
  background-color: rgb(145, 155, 190);
  box-shadow: 0 0 10px #919bbe;
}

#board .tile-no-match-grey-light {
  background-color: rgb(158, 174, 232);
  box-shadow: 0 0 10px rgb(0, 0, 0);
}

#board .tile-match-grey-light {
  background-color: rgb(87, 255, 92);
  box-shadow: 0 0 30px rgb(0, 0, 0);
}

/* bonus letter styles */
#board .boojum {
  border: solid #33c15b 10px;
}

#board .snark {
  border: solid #febe38 10px;
}

/* Rotate Buttons */
#rotate-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* adjust as needed */
  margin-bottom: 10px;
}

.rotate-button {
  width: 6vw;
  height: 6vw;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid #eb5497;
  background-color: #13132a;
  color: #f5ce45;
  font-size: 5.5vw;
  font-weight: 100;
  text-align: center;
  line-height: 6vw; /* Centers arrow vertically within button */
  transition: transform 0.5s ease-in-out;
  cursor: pointer;
  padding: 0px;
  margin-left: 10px;
  margin-right: 10px;
}

#anti-clockwise-button:active {
  transform: rotate(-360deg);
}

#clockwise-button:active {
  transform: rotate(360deg);
}

/* Timer */
#timer {
  color: white;
  font-size: 80%;
}

/* Board Footer */
#board-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

#guess-title {
  font-size: 80%;
}

#guess {
  display: flex;
  justify-content: center;
  background-color: white;
  color: #1b1835;
  width: 30vw;
  height: 5vw;
  border-radius: 10px;
  text-align: center;
  font-size: 3vw;
  margin-left: 0px;
}

/* lightmode button */

/* Container for the switch */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 60px;
  margin-left: 10px;
  margin-right: 10px;
}

/* Hide the default checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1b1835;
  border: solid #eb5497 3px;
  transition: 0.4s;
  border-radius: 34px;
}

/* Circle inside the slider */
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  border-radius: 50%;
  left: 1px;
  top: 2px;
  background-color: #1b1835;
  border: solid #f5ce45 3px;
  transition: 0.4s;
}

/* When the checkbox is checked, move the circle down */
input:checked + #color-slider {
  background-color: #f5ce45;
}

input:checked + #light-slider {
    background-color: white;
  }

input:checked + .slider:before {
  transform: translateY(26px); /* Move circle down */
}

/* Board */
.board-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

#board {
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  border-radius: 25px;
  padding: 10px;
  gap: 10px;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.letter, .letter-child {
  display: flex;
  border: 1px solid white;
  font-family: "Rubik", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-weight: 450;
  align-items: center;
  justify-content: center;
  align-content: center;
  text-align: center;
  border-style: none;
  overflow: hidden;
  border-radius: 50%;
  -webkit-transition: transform 0.5s ease-in-out;
  -moz-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  text-shadow: inherit;
}

:root {
    --speed: 1; 
    --glow: 1;
  }
  
.dot-0, .dot-3, .dot-6, .dot-9, .dot-12, .dot-15{
    border-radius:50%;
    height:30px;
    width:30px;
    background-color: #33c15b;
    animation: glow-animation-green 1.6s infinite;
}

.dot-1, .dot-4, .dot-7, .dot-10, .dot-13, .dot-16 {
    border-radius:50%;
    height:30px;
    width:30px;
    background-color: #f5ce45;
    animation: glow-animation-yellow 1.6s infinite;
}

.dot-2, .dot-5, .dot-8, .dot-11, .dot-14 {
    border-radius:50%;
    height:30px;
    width:30px;
    background-color: #eb5497;
    animation: glow-animation-pink 1.6s infinite;
}

.dot-0{
    animation-delay:0s;
}

.dot-1{
    animation-delay: 0.1s;
}

.dot-2{
    animation-delay: 0.2s;
}

.dot-3{
    animation-delay: 0.3s;
}

.dot-4{
    animation-delay: 0.4s;
}

.dot-5{
    animation-delay: 0.5s;
}

.dot-6{
    animation-delay: 0.6s;
}

.dot-7{
    animation-delay: 0.7s;
}

.dot-8{
    animation-delay: 0.8s;
}

.dot-9{
    animation-delay: 0.9s;
}

.dot-10{
    animation-delay: 1.0s;
}

.dot-11{
    animation-delay: 1.1s;
}

.dot-12{
    animation-delay:1.2s;
}

.dot-13{
    animation-delay:1.3s;
}

.dot-14{
    animation-delay: 1.4s;
}

.dot-15{
    animation-delay:1.5 s;
}

@keyframes glow-animation-green {
    0% {box-shadow:0 0 0 #33c15b}
    50% {box-shadow:0 0 30px #33c15b}
    100% {box-shadow:0 0 0 #33c15b} 
}

@keyframes glow-animation-yellow {
    0% {box-shadow:0 0 0 #f5ce45}
    50% {box-shadow:0 0 30px #f5ce45}
    100% {box-shadow:0 0 0 #f5ce45} 
}

@keyframes glow-animation-pink {
    0% {box-shadow:0 0 0 #eb5497}
    50% {box-shadow:0 0 30px #eb5497}
    100% {box-shadow:0 0 0 #eb5497} 
}


#board .letter .grey {
  color: #8b8b8b;
}

.letter-values {
  display: flex;
  justify-content: center;
}

#match-mobile {
  display: none;
}

svg {
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allows clicks to pass through the SVG */
}

#timer-bar-container{
    width:100%;
    height:40px;
    
    position:relative;
    text-align: center;
}

#timer-bar{
    height:100%;
    position:absolute;
    left:0;
    z-index:-1;

}

#timer{
    position:absolute;
    left: 50%;
    top: 50%;
    z-index:0;
    font-size:170%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width:578px) {
    #timer{
        font-size:120%;
    }
}