@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background: #ffffff;
  font-family: "Baloo Tamma 2", cursive;
  width: 100%;
  overflow-x: hidden;
  transition-duration: 1s;
}

header {
  background: #a7ffae;
}

body.dark {
  background-color: #000000;
  color: rgb(236, 254, 255);
}

header.dark {
  background-color: rgb(1, 17, 62);
}




#sudoku-heading {
  font-size: 6vw;
}

.fas {
  font-size: 2.7vw;
}

#difficulty-colon {
  font-size: 2.7vw;
  text-align: right;
}




#diff-dropdown {
  text-align: left;
  font-size: 1.6vw;
}



#time-colon {
  font-size: 2.6vw;
  text-align: right;
}

#time-dropdown {
  text-align: left;
  font-size: 1.6vw;
}

#start-button {
  font-size: 1.8vw;
  background-color: #b7faff;
  border: 0.3vw solid rgb(48, 69, 255);
  border-radius: 10%;
  transition: ease 0.3s;
}



#start-button:hover {
  font-size: 2vw;
  background-color: #f53900;
  transition: ease 0.8s;
}

#start-button:active {
  transform: translateY(1vmin);
}


p#timer {
  font-size: 3vw;
  text-align: center;
}

.hidden {
  display: none;
}

.win_loss {
  text-align: center;
  font-size: 3vw;
}

.red {
  color: red;
}

#game {
  display: flex;
  justify-content: center;
}

#number-container {
  margin-top: 5vh;
}

#number-container > * {
  border: 0.3vh solid rgb(167, 230, 255);
  border-radius: 30%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  width: 6.5vh;
  height: 6.5vh;
  font-size: 5vh;
  margin-left: 5vw;
  margin-bottom: 1vh;
  text-align: center;
}

#board {
  padding-top: 2vh;
  margin-bottom: 10vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  width: 72vh;
  height: 72vh;
}

.tile {
  border: 0.1vh solid black;
  width: 8vh;
  height: 8vh;
  text-align: center;
  margin: 0px;
  vertical-align: middle;
  font-size: 6vh;
}

.tileWhite {
  border: 0.1vh solid rgb(221, 254, 255);
  width: 8vh;
  height: 8vh;
  text-align: center;
  margin: 0px;
  vertical-align: middle;
  font-size: 6vh;
}

button.selected {
  background-color: lightblue;
}

p.incorrect {
  color: red;
}

p.mightbecorrect {
  color: blue;
}

.rightBorder {
  border-right: 0.5vh solid black;
}

.bottomBorder {
  border-bottom: 0.5vh solid black;
}

.leftBorder {
  border-left: 0.5vh solid black;
}

.topBorder {
  border-top: 0.5vh solid black;
}

.rightBorderWhite {
  border-right: 0.55vh solid rgb(221, 254, 255);
}

.bottomBorderWhite {
  border-bottom: 0.55vh solid rgb(221, 254, 255);
}

.leftBorderWhite {
  border-left: 0.55vh solid rgb(221, 254, 255);
}

.topBorderWhite {
  border-top: 0.55vh solid rgb(221, 254, 255);
}

/* For portrait mode */
@media only screen and (orientation: portrait) {
  #sudoku-heading {
    font-size: 11vw;
  }

  .fas {
    font-size: 5vw;
    padding-top: 1.6vw;
  }

  #difficulty-colon {
    font-size: 5vw;
    padding-left: 1vw;
  }

  #diff-dropdown {
    font-size: 2.6vw;
  }

  #time-colon {
    font-size: 5vw;
    padding-left: 1vw;
  }

  #time-dropdown {
    font-size: 2.6vw;
  }

  #start-button {
    font-size: 3vw;
  }

  #start-button:hover {
    font-size: 3.5vw;
    background-color: #f53900;
    transition: ease 0.8s;
  }

  p#timer {
    font-size: 5vw;
    text-align: center;
  }

  p#win_loss_status {
    font-size: 5vw;
    text-align: center;
  }

  #game {
    display: flex;
    justify-content: center;
  }

  #number-container {
    margin-top: 3vh;
  }

  #number-container > * {
    border: 0.3vh solid rgb(167, 230, 255);
    border-radius: 30%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    width: 5vw;
    height: 6.4vw;
    font-size: 4.5vw;
    margin-left: 5vw;
    margin-bottom: 1vh;
    text-align: center;
  }

  #board {
    padding-top: 1vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    width: 72.9vw;
    height: 72.9vw;
  }

  .tile {
    border: 0.1vh solid black;
    width: 8.1vw;
    height: 8.1vw;
    text-align: center;
    margin: 0px;
    vertical-align: middle;
    font-size: 6vw;
  }

  .tileWhite {
    border: 0.1vh solid rgb(221, 254, 255);
    width: 8.1vw;
    height: 8.1vw;
    text-align: center;
    margin: 0px;
    vertical-align: middle;
    font-size: 6vw;
  }

  .rightBorder {
    border-right: 0.5vh solid black;
  }

  .bottomBorder {
    border-bottom: 0.5vh solid black;
  }

  .leftBorder {
    border-left: 0.5vh solid black;
  }

  .topBorder {
    border-top: 0.5vh solid black;
  }

  .rightBorderWhite {
    border-right: 0.55vh solid rgb(221, 254, 255);
  }

  .bottomBorderWhite {
    border-bottom: 0.55vh solid rgb(221, 254, 255);
  }

  .leftBorderWhite {
    border-left: 0.55vh solid rgb(221, 254, 255);
  }

  .topBorderWhite {
    border-top: 0.55vh solid rgb(221, 254, 255);
  }
}