/* rubik-regular - hebrew */

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

  font-family: "Rubik";

  font-style: normal;

  font-weight: 400;

  src: url("../icons/fonts/rubik/rubik-v23-hebrew-regular.eot"); /* IE9 Compat Modes */

  src: url("../icons/fonts/rubik/rubik-v23-hebrew-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../icons/fonts/rubik/rubik-v23-hebrew-regular.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("../icons/fonts/rubik/rubik-v23-hebrew-regular.woff") format("woff"),
    /* Modern Browsers */
      url("../icons/fonts/rubik/rubik-v23-hebrew-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../icons/fonts/rubik/rubik-v23-hebrew-regular.svg#Rubik")
      format("svg"); /* Legacy iOS */
}

body {
  font-size: 2vh;

  margin: 0;
}

:root {
  --vw: 100vw;

  --vh: 100vh;

  --height-main-calc: calc(var(--vh) * 0.5 / 9);

  --width-main-calc: calc(var(--vw) * 0.5 / 9);

  --height-main-mw-calc: calc(var(--vh) * 0.95);

  --width-main-mw-calc: calc(var(--vw) * 0.95);
}

/* for Body */

.overflow-x {
  overflow-x: hidden;
}

button {
  all: unset;
}

/*--Animations---------------------------------------------------------------------------------------------------------------------------------------*/

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes rotate {
  from {
    transform: translate(-50%, 50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, 50%) rotate(360deg);
  }
}

@-moz-keyframes rotate {
  from {
    transform: translate(-50%, 50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, 50%) rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  from {
    transform: translate(-50%, 50%) rotate(0deg);
  }

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

body {
  color: rgb(52, 72, 97);

  font-family: "Rubik";

  /* user-select: none; // allows turning off cursor selection in the website  */

  height: 100vh;

  --game-width: 80vh;
}

/*--Loading Screen--------------------------------------------------------------------------------------------------------------------------------------*/

.loading-screen {
  background-color: rgb(255, 255, 255);

  position: absolute;

  height: 100%;

  width: 100%;

  z-index: 3;

  left: 0px;

  top: 0px;
}

.loading-holder {
  transform: translate(-50%, -50%);

  position: absolute;

  height: 30vh;

  width: 80vw;

  left: 50%;

  top: 50%;
}

.loading-title {
  justify-content: center;

  align-items: center;

  font-weight: bold;

  font-size: 4vh;

  display: flex;

  height: 5vh;

  width: 100%;
}

.loading-text {
  justify-content: center;

  align-items: center;

  font-size: 3vh;

  display: flex;

  height: 5vh;

  width: 100%;
}

.loader {
  animation: "rotate" linear infinite 1s;

  -moz-animation: "rotate" linear infinite 1s;

  -webkit-animation: "rotate" linear infinite 1s;

  border: 2vh solid rgb(110, 125, 140);

  border-top: 2vh solid rgb(52, 72, 97);

  border-radius: 100%;

  margin-left: 50%;

  height: 7vh;

  width: 7vh;
}

/* Page title*/

.top-logo {
  margin: 0;

  font-size: 2em;
}

.page-head-flex {
  display: flex;

  justify-content: center;

  margin-top: 1.2%;

  border-bottom: 1px rgba(52, 72, 97, 0.3) solid;

  gap: 5%;
}

h1 {
  margin: 0;

  padding: 0;
}

.page-title {
  font-weight: bold;

  /* font-size: 23px; */

  padding: 0;

  width: auto;

  padding-bottom: 0.5%;
}

.top-menu-list {
  list-style: none;

  display: flex;

  gap: 6vh;

  color: rgb(110, 125, 140);
}

.mw-hamburger {
  display: none;
}

/*Top-holder-menu */

.top-flex-container {
  display: flex;

  margin-top: 0.5%;

  justify-content: center;
}

.top-holder {
  width: var(--game-width);

  display: flex;

  justify-content: center;

  height: 5vh;
}

/* top holder bar */

/*--Custom Selects---------------------------------------------------------------------------------------------------------------------------------*/

.select-holder {
  display: flex;

  height: 100%;

  width: 23vh;

  z-index: 1;

  position: relative;
}

.select-text {
  justify-content: center;

  align-items: center;

  font-weight: bold;

  display: flex;

  z-index: 1;
}

.select-value-holder {
  color: rgb(110, 125, 140);

  justify-content: center;

  align-items: center;

  cursor: pointer;

  display: flex;

  padding: 1vh;

  width: fit-content;

  z-index: 1;
}

.select-value {
  justify-content: flex-start;

  align-items: center;

  display: flex;

  height: 100%;

  width: 100%;

  z-index: 1;

  padding-right: 10px;
}

.select-arrow {
  border-left: 3px solid rgb(110, 125, 140);

  border-top: 3px solid rgb(110, 125, 140);

  transform: rotate(225deg);

  aspect-ratio: 1;

  height: 0.8vh;

  z-index: 1;
}

.language-container {
  position: relative;

  cursor: pointer;
}

.language-arrow {
  display: -webkit-inline-box;

  margin-left: 0.8vh;

  cursor: pointer;
}

.select-window-language {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

  background-color: rgb(255, 255, 255);

  border-radius: 1vh;

  position: absolute;

  overflow: hidden;

  display: none;

  width: 100%;

  top: 3vh;

  cursor: pointer;

  z-index: 4;
}

.select-window {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

  background-color: rgb(255, 255, 255);

  border-radius: 1vh;

  position: absolute;

  overflow: hidden;

  display: none;

  width: 50%;

  top: 5vh;

  right: 12vh;

  z-index: 4;
}

.select-window-theme {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

  background-color: rgb(255, 255, 255);

  border-radius: 1vh;

  position: absolute;

  overflow: hidden;

  display: none;

  width: 35%;

  top: 5vh;

  left: 8vh;

  z-index: 4;
}

.select-option {
  justify-content: flex-end;

  color: rgb(110, 125, 140);

  align-items: center;

  padding-right: 5%;

  cursor: pointer;

  display: flex;

  height: 4vh;

  width: auto;

  z-index: 1;
}

.select-option-lang-mw {
  padding-left: 5%;
}

.select-option:hover {
  background-color: rgb(225, 225, 230);

  z-index: 1;
}

#light {
  display: block;
}

/*Timer*/

.timer-holder {
  display: flex;

  align-items: center;

  gap: 15px;
}

.pause-button {
  background-color: rgb(220, 225, 230);

  border-radius: 100%;

  cursor: pointer;

  height: 4vh;

  width: 4vh;

  top: 0.5vh;

  display: flex;

  justify-content: center;

  align-items: center;
}

.pause-button:hover {
  background-color: rgb(210, 215, 220);
}

.resume {
  width: 50%;

  padding-left: 10%;

  display: none;
}

.pause {
  width: 60%;

  display: flex;
}

.pause-bar {
  background-color: rgb(52, 72, 97);

  height: 50%;

  width: 10%;

  margin: 5%;
}

.time {
  color: rgb(110, 125, 140);

  width: calc(100% - 6vh);

  width: 5.5vh;

  cursor: pointer;
}

.sudoku-holder {
  position: relative;
}
.clickToStartBackground {
  width: 100%;
  height: 99%;
  position: absolute;
  box-shadow: 0px 0px 20px 8px rgb(158 201 255 / 37%);
  display: flex;
  justify-content: center; /* Centers child horizontally */
  align-items: center; /* Centers child vertically */
  /* background-image: url("../icons/clickToStartBackgroundImage.webp"); */
  background-color:white;
  /*  */
}
.clickToStartBtn {
  /* position: absolute; 
    text-align: center;
    font-size: 4vh;
    z-index: 100;
    background-color: rgb(255, 255, 255);
    width: 120%;
    border: 1px black solid;
    padding: 1vh; */

  font-weight: 800;
  z-index: 1;
  font-size: 4vh;
  border-radius: 23px;
  padding: 1vh 3vh;
  background-size: 300% auto;
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 6px 0px rgba(50, 50, 93, 0.11),
    0px 0px 14px 3px rgb(98 157 196 / 60%);
  background-image: linear-gradient(
    to right,
    #5d9aaf 0%,
    #91dcc0 50%,
    #5d9aaf 100%
  );
  /* transition: 0.65s; */
}

.resume-game-dark {
  position: absolute;

  width: 100%;

  height: 100%;

  background-color: rgb(110, 125, 140, 0.5);

  backdrop-filter: blur(2px);
}

.resume-game {
  text-align: center;

  background-color: rgb(255, 255, 255);

  box-shadow: 0px 0px 20px 8px rgb(52 72 97);

  border-radius: 15px;

  height: 25%;

  width: 50%;

  position: absolute;

  top: 23.5%;

  left: 24.5%;

  z-index: 1;
}

.resume-game-btn-container {
  display: flex;

  justify-content: space-evenly;
}

.resume-game-btn {
  cursor: pointer;
}

.play-button {
  background-color: rgb(52, 72, 97);

  border-radius: 100%;

  position: absolute;

  cursor: pointer;

  display: none;

  height: 6vh;

  width: 6vh;

  left: 43.8%;

  top: 43.5%;

  /* margin-top: 50%; */
}

.play-button-img {
  width: 50%;

  height: 60%;

  justify-self: center;

  align-self: center;

  padding-left: 6%;
}

/* ---------------------- */

/* Ad , Game, Side Bar */

/* ---------------------- */

.main-body-container {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: flex-start;

  margin-top: 1%;

  margin-bottom: 5px;

  gap: 2%;
}

canvas {
  height: calc(var(--height-main-calc) * 9);

  width: calc(var(--height-main-calc) * 9);
}

/*--Side Bar----*/

.side-bar {
  width: calc(var(--game-width) - 50vh);

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: flex-start;

  margin: 1% 0;
}

.new-game-button {
  background-color: rgb(52, 72, 97);

  color: rgb(255, 255, 255);

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 1vh;

  position: relative;

  font-size: 2.5vh;

  cursor: pointer;

  width: 80%;

  height: 40px;
}

.new-game-button:hover {
  background-color: rgb(42, 62, 87);
}

.new-game-button:active {
  background-color: rgb(32, 52, 77);
}

.new-game-button-image {
  display: none;
}

.new-game-window {
  border: 1px solid rgb(160, 175, 190);

  border-radius: 1vh;

  position: absolute;

  display: none;

  height: 22vh;

  width: 30vh;

  z-index: 2;

  margin-top: 50px;
}

.window-arrow {
  transform: translate(-50%, -1vh) rotate(45deg);

  border: 1px solid rgb(160, 175, 190);

  background-color: rgb(255, 255, 255);

  position: absolute;

  height: 5vh;

  width: 5vh;

  left: 50%;
}

.window-body {
  background-color: rgb(255, 255, 255);

  position: absolute;

  border-radius: 1vh;

  overflow: hidden;

  height: 100%;

  width: 100%;

  left: 0px;

  top: 0px;
}

.window-title {
  justify-content: center;

  align-items: center;

  font-weight: bold;

  margin-top: 1vh;

  margin-bottom: 1vh;

  font-size: 2.5vh;

  display: flex;

  height: 4vh;

  width: 100%;
}

.window-subtitle {
  justify-content: center;

  align-items: center;

  margin-bottom: 1vh;

  display: flex;

  height: 2vh;

  width: 100%;
}

.window-option {
  width: calc(100% - 1vh);

  justify-content: center;

  align-items: top;

  cursor: pointer;

  padding: 0.5vh;

  display: flex;

  height: 3vh;
}

.window-option:hover {
  background-color: rgb(235, 240, 245);
}

.window-option:active {
  background-color: rgb(225, 230, 235);
}

/*--Side Buttons-----------------------------------------------------------------------------------------------------------------------------------*/

.side-button-holder {
  width: 100%;
  margin-top: 5%;
}

.side-button-main {
  justify-content: center;
  position: relative;
  align-items: center;
  display: flex;
  height: 7vh;
  width: 100%;
}

.side-button-bottom {
  justify-content: center;
  align-items: center;
  display: flex;
  text-align: center;
  height: 3vh;

  width: 100%;
}

.side-button {
  background-color: rgb(110, 125, 140);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: 50% 50%;

  border-radius: 100%;

  overflow: hidden;

  cursor: pointer;

  margin: 1vh;

  height: 7vh;

  width: 7vh;
}

.side-button:hover {
  background-color: rgb(100, 115, 130);
}

.side-button:active {
  background-color: rgb(90, 105, 120);
}

.side-text {
  justify-content: center;

  align-items: center;

  display: flex;

  margin: 1vh;
  width: 7vh;

  font-size: 2.3vh;
}

#undo {
  background-image: url("../icons/undo.png");
}

#erase {
  background-image: url("../icons/erase.png");
  background-size: 75%;
}

#notes {
  background-image: url("../icons/pencil.webp");

  background-size: 100%;
}

#display_color {
  background-image: url("../icons/show_duplicates.webp");
  background-size: 75%;
}

.btnActivated {
  background-color: #53a1d6;
}

.btnActivated:hover {
  background-color: #53a1d6;
}
/* color help mode */

.color-help-mode {
  text-align: center;
}
input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  height: 4vh;
  width: 10vh;
  background: grey;
  display: inline-block;
  border-radius: 100px;
  position: relative;
  margin-top: auto;
  margin-bottom: auto;
  align-self: auto;
}

label:after {
  content: "";
  position: absolute;
  top: 0.5vh;
  left: 5px;
  width: 3vh;
  height: 3vh;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label {
  background: #6cb1e0;
}

input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

label:active:after {
  width: 4vh;
}

.my-label.force-after-state::after {
  /* Apply the same styles as the default label:after */
  content: "";
  position: absolute;
  top: 0.5vh;
  left: 5px;
  width: 3vh;
  height: 3vh;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
  /* Additional styles if needed */
  /* For example, you can change the background color, border radius, etc. */
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

/* keyboard */

.keyboard-row {
  height: calc((var(--game-width) - 51vh) / 3);

  width: calc(var(--game-width) - 51vh);

  justify-content: center;

  align-items: center;

  display: flex;

  gap: 1vh;
}

.key {
  height: calc((var(--game-width) - 51vh) / 3 - 1vh);

  width: calc((var(--game-width) - 51vh) / 3 - 1vh);

  background-color: rgb(110, 125, 140);

  color: rgb(255, 255, 255);

  justify-content: center;

  align-items: center;

  border-radius: 1vh;

  cursor: pointer;

  font-size: 4vh;

  display: flex;

  margin-top: 1vh;
}

.key:hover {
  background-color: rgb(100, 115, 130);
}

.key:active {
  background-color: rgb(90, 105, 120);
}

a {
  color: rgb(110, 125, 140);

  text-decoration: none;

  font-size: 2vh;
}

/* Notes Message */
.notesMsg {
  position: absolute;
  background-color: #ffffff;
  border: 1.5px solid #5d9aaf;
  border-radius: 5px;
  top: 8vh;
  width: 110%;
  opacity: 0;
  transition: opacity 0.2s ease-in;
  z-index: 1;
}

.notesMsg.active {
  opacity: 1;
}
.notesMsg p {
  padding-left: 0.5vh;
  padding-bottom: 0;
  padding-right: 1vh;
}
.notesMsg .form-x-btn {
  top: -3%;
  left: 3%;
  font-size: larger;
}
.notesMsg::after {
  position: absolute;
  width: 15px;
  height: 15px;
  border-top: 1px solid #5d9aaf;
  border-right: 0px solid white;
  border-left: 1px solid#5d9aaf;
  border-bottom: 0px solid white;
  bottom: 100%;
  left: 64%;
  margin-left: -50%;
  margin-bottom: -7px;
  content: "";
  background-color: white;
  transform: rotate(45deg);
}

/* Content */

.content-container {
  display: flex;

  margin-top: 10px;

  padding-top: 10px;

  margin-right: 27%;

  margin-bottom: 3vh;

  margin-left: 27%;

  /* justify-content: end; */

  background-color: rgb(230, 235, 240, 0.32);
}

.content-diff-page {
  margin-right: 30%;

  margin-left: 30%;
}

.content-list {
  list-style: none;

  /* margin-left: 17%; */

  width: auto;
}

.content-btn {
  background-color: white;

  color: rgb(52, 72, 97);

  font-weight: 500;

  font-size: 2vh;

  width: 82%;

  text-align: center;

  cursor: pointer;

  padding: 10px;

  border: 1px solid rgba(52, 72, 97, 0.7);

  border-radius: 1vh;

  display: block;
}

.content-btn:hover {
  background-color: rgb(235, 240, 245);
}

.content-btn:active {
  background-color: rgb(110, 125, 140, 0.5);
}

.btn-1 {
  margin-bottom: 10px;
}

.btn-11 {
  background-color: white;

  border: 0;

  cursor: pointer;

  padding: 0;

  text-align: unset;

  font-family: inherit;

  font-size: inherit;

  color: rgb(52, 72, 97);

  font-style: italic;
}

.btn-11:hover {
  font-weight: bold;
}

.content {
  flex: 1;

  font-size: 1.7vh;

  text-align: right;

  padding-right: 2.5%;

  padding-left: 2.5%;

  animation-name: fadeIn;

  animation-duration: 0.6s;

  overflow: auto;
}

.video {
  width: 100%;

  height: auto;

  aspect-ratio: 1.77;
}

.rules-images1 {
  display: inline;

  height: 180px;

  width: 180px;
}

.rules-images2 {
  display: inline;

  height: 180px;

  width: 360px;

  margin-left: 0;
}

.rules-images3 {
  display: inline;

  height: 180px;

  width: 180px;

  margin-left: 0;
}

.tips-images1 {
  display: inline;

  height: 180px;

  width: 180px;

  margin-left: 0;
}

.tips-images2 {
  display: inline;

  height: 180px;

  width: 180px;

  margin-left: 0;
}

.tips-images3 {
  display: inline;

  margin-left: 0;
}

img {
  display: block;

  margin-left: auto;

  margin-right: auto;
}

.advertisement {
  text-align: center;

  font-size: 10px;
}

.ad {
  text-align: center;

  font-size: 10px;

  width: 300px;

  height: 250px;
}

.ad2 {
  text-align: center;

  font-size: 10px;

  height: 90px;

  width: 728px;

  margin-left: auto;

  margin-right: auto;
}

/* Pop up messages */

/* 1st time user */

.bodyshadow {
  background-color: rgba(0, 0, 0, 0.3);

  width: 100%;

  height: 100%;

  position: absolute;

  z-index: 1;

  /* display: none; */
}

.New-user {
  background-color: rgb(255, 255, 255);

  text-align: center;

  position: sticky;

  border: 2px rgb(52, 72, 97) solid;

  padding: 10px;

  bottom: 0%;

  left: 35%;

  right: 35%;

  width: 30%;

  z-index: 2;

  /* display: none; */
}

/* returning User */

.returning-user-wrapper {
  -webkit-transition-duration: 1000ms;

  transition-duration: 1000ms;
}

.returning-user-wrapper.loading {
  transform: translate(100%);

  -webkit-transform: translate(100%);
}

.returning-user {
  z-index: 2;

  height: auto;

  position: absolute;

  left: 72%;

  margin-right: 1%;

  font-size: small;

  border-radius: 3%;

  padding: 1%;

  overflow: auto;

  box-shadow: -10px -10px 15px rgba(52, 72, 97, 0.1),
    10px 10px 15px rgba(70, 70, 70, 0.12);
}

.returning-user:hover {
  box-shadow: -10px -10px 15px rgba(138, 163, 194, 0.1),
    10px 10px 15px rgba(112, 140, 167, 0.12);
}

.form-x-btn {
  position: absolute;

  top: 0;

  font-size: x-large;
}

.form-x-btn:hover {
  cursor: pointer;
}

.returning-user h2 {
  text-align: center;

  color: rgb(110, 125, 140);

  font-weight: 600;
}

.question {
  color: rgb(64, 90, 116);

  font-weight: 550;
}

.question-answer {
  color: black;
}

.question,
.question-answer {
  padding: 0.5%;
}

.returning-user textarea {
  margin-left: 0.5%;
}

.submit {
  text-align: center;
}

.returning-user input {
  cursor: pointer;

  border: 1px rgb(52, 72, 97) solid;

  border-radius: 13%;

  color: rgb(52, 72, 97);

  background-color: white;

  padding: 1%;
}

/* Information Pages (about ,contact etc..) */

.on-page {
  color: white;

  background-color: rgb(110, 125, 140);

  text-align: left;

  border-radius: 5px;
}

/* About */

.container-content-info {
  display: flex;

  animation-name: fadeIn;

  animation-duration: 0.4s;
}

.info-list {
  list-style: none;

  width: auto;

  margin-right: 20%;

  margin-left: 5%;
}

.info-btn {
  display: block;

  margin-bottom: 10px;

  margin-left: 0;

  padding-left: 1vh;

  padding-right: 1vh;

  width: max-content;
}

.info-btn:hover {
  cursor: pointer;
}

.info-content {
  margin-left: 20%;

  width: 100%;
}

.info-dif-list {
  display: flex;

  gap: 1.2vh;

  list-style: none;

  margin: 0;

  padding: 0;
}

/* contact */

/* Cookie */

.page-head-flex-cookie {
  display: flex;

  justify-content: center;

  margin-top: 0.5%;

  border-bottom: 1px rgba(52, 72, 97, 0.3) solid;
}

.container-content-cookie {
  display: flex;

  margin-right: 3%;

  animation-name: fadeIn;

  animation-duration: 0.4s;
}

.cookie-content {
  margin-top: 25px;

  margin-left: 10vh;
}

/* Footer */

footer {
  border-top: 1px rgba(52, 72, 97, 0.3) solid;

  margin-top: 0.3vh;

  display: flex;

  justify-content: left;

  align-items: center;

  position: relative;
}

.footer-title {
  color: rgb(110, 125, 140);

  font-weight: bold;

  justify-self: left;

  font-size: 3vh;

  padding: 0;

  margin-left: 30vh;
}

.footer-list {
  list-style: none;

  display: flex;

  justify-content: center;

  position: absolute;

  left: 35%;

  align-items: center;

  gap: 7vh;

  white-space: nowrap;
}

.hide-desktop {
  display: none;
}

/* tips and articles */

.articles-boxes {
  display: flex;

  flex-wrap: wrap;

  flex-direction: row-reverse;

  justify-content: center;

  row-gap: 1vh;

  column-gap: 15vh;

  margin-left: 10vh;

  margin-right: 10vh;

  margin-bottom: 10vh;
}

.article {
  margin-top: 5vh;

  box-shadow: 1;

  position: relative;
}

.article:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.article-header {
  color: black;

  margin: 0.3em 0;

  padding: 0;

  align-self: flex-start;

  margin-left: auto;

  margin-right: auto;

  height: auto;

  font-weight: normal;

  text-align: center;
}

.articles-main-thumbnail {
  height: auto;

  max-height: 250px;

  width: auto;
}

@media only screen and (max-width: 1320px) {
  canvas {
    height: calc(var(--height-main-calc) * 9 * 1.3);

    width: calc(var(--height-main-calc) * 9 * 1.3);
  }

  .main-body-container {
    flex-wrap: wrap;
  }

  .content-container p,
  li {
    font-size: 125%;

    line-height: 150%;

    margin-right: 0;
  }

  .content-container li {
    display: flex;

    width: 100%;
  }

  .content-container h3 {
    font-size: 130%;

    /* line-height: 150%; */
  }

  .content-container h2 {
    font-size: 160%;

    /* line-height: 150%; */
  }

  .content {
    font-size: 2vh;
  }

  .info-btn {
    font-size: 2.5vh;
  }

  .info-content {
    font-size: 2.5vh;
  }
}

@media only screen and (orientation: portrait) {
  /* sudoku tips and articles */

  .article {
    margin-top: 1.5vh;
  }

  .top-logo {
    margin: 0;

    font-size: 1.5em;
  }

  .articles-boxes {
    flex-wrap: wrap;

    margin: 0 4vh;

    margin-top: 2vh;

    gap: 0;

    margin-bottom: 5vh;
  }

  .articles-main-thumbnail {
    width: 70%;

    height: auto;
  }
  .clickToStartBackground {
    /* background-image: url("../icons/clickToStartBackgroundImage_mw.webp"); */
    background-color: white;
    box-shadow: 0px 0px 0px 0px rgb(158 201 255 / 37%);
  }
  canvas {
    height: var(--width-main-mw-calc);

    width: var(--width-main-mw-calc);
  }

  h1 {
    line-height: 100%;

    text-align: center;
  }

  .page-head-flex {
    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 1.2%;

    border-bottom: 1px rgba(52, 72, 97, 0.3) solid;

    gap: 10%;

    padding-right: 0;

    position: fixed;

    z-index: 15;
  }

  .page-head-flex {
    background-color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    box-sizing: border-box;

    padding-top: 1.2%;

    border-bottom: 1px rgba(52, 72, 97, 0.3) solid;

    position: fixed;

    z-index: 15;

    height: 6.5vh;

    width: 100%;

    top: 0;

    margin-top: 0;

    margin-bottom: 8vh;

    padding: 0;
  }

  .top-flex-container {
    margin-top: 0;
  }

  .page-title {
    font-weight: bold;

    font-size: 23px;

    padding-bottom: 1%;

    width: 108%;

    margin-right: 15%;
  }

  .page-title a {
    font-weight: bold;

    /* font-size: 23px; */

    display: block;

    padding-bottom: 1%;

    margin: 0;

    padding: 0;

    text-align: center;

    width: 108%;

    /* margin-left: 4vh; */
  }

  .mw-hamburger {
    display: block;

    height: 3vh;

    position: fixed;

    z-index: 3;

    right: 1vh;

    margin: 0;

    padding: 0;

    top: 1.8vh;
  }

  .top-menu-list {
    background-color: rgb(255, 255, 255);

    padding: 0;

    margin-top: 0;

    padding-bottom: 2.5vh;

    padding-top: 2.5vh;

    position: fixed;

    display: flex;

    flex-wrap: wrap-reverse;

    height: auto;

    width: 100%;

    z-index: 2;

    left: 0px;

    top: 0px;

    box-sizing: border-box;

    border-bottom: 1px solid black;

    gap: 2vh;
  }

  .hide-mobile {
    display: none;
  }
  .show-mobile-flex {
    display: flex;
  }
  .mw-list-item {
    width: 100%;
  }

  .mw-list-item a {
    text-align: center;

    display: block;

    width: 100%;

    font-size: 3vh;
  }

  .select-window-language {
    top: 5vh;

    width: 35%;

    margin-left: 32.5%;

    margin-right: 32.5%;
  }

  .select-option-lang-mw {
    padding: 0;
  }

  .top-holder {
    gap: 1vh;

    margin-top: 6.5vh;
  }

  .select-holder {
    width: auto;
  }

  .select-window {
    width: 25vw;

    right: 0;
  }

  .side-bar {
    align-items: center;

    display: flex;

    width: 100%;

    margin: 0;
  }

  .new-game-button {
    display: none;
  }

  .new-game-button-image {
    display: block;

    height: 4vh;

    width: 4vh;

    padding-left: 10%;

    align-self: center;
  }

  .new-game-button-text {
    display: none;
  }

  .new-game-button::after {
    color: rgb(52, 72, 97);

    content: "New Game";

    font-size: 1.4vh;

    font-weight: normal;

    position: absolute;

    top: 7.2vh;

    white-space: nowrap;
  }

  .window-arrow {
    display: none;
  }

  .side-text {
    font-size: 1.4vh;
    padding-top: 1vh;
  }

  .side-button-holder {
    width: auto;

    order: 3;

    margin: 2%;
  }

  .keyboard {
    width: 100%;

    gap: 1vh;

    display: flex;

    justify-content: center;

    order: 1;
  }

  .keyboard-row {
    height: auto;

    width: auto;

    display: flex;

    gap: 1vh;
  }

  .key {
    height: 4.1vh;

    width: 4.1vh;

    background-color: rgb(110, 125, 140);

    color: rgb(255, 255, 255);

    border-radius: 69%;

    cursor: pointer;

    font-size: 3vh;

    text-align: center;
  }

  .color-help-mode {
    display: none;
  }

  .advertisement {
    display: none;
  }

  .ad {
    display: none;
  }

  .main-body-container {
    flex-wrap: wrap;

    margin: 0;
  }

  .ad-bottom {
    display: block;

    text-align: right;
  }

  .ad2 {
    height: 10%;

    width: 90%;

    margin-bottom: 25px;
  }

  .content-btn {
    position: relative;

    z-index: 100;

    width: 30vw;

    display: none;
  }

  .content-container {
    flex-wrap: wrap;

    justify-content: center;

    margin: 0;
  }

  .content-list {
    display: none;

    gap: 10%;

    justify-content: center;

    order: 1;

    padding: 0;

    margin: 0;

    position: relative;

    z-index: 1;
  }

  .content {
    margin-left: 5vw;

    margin-right: 5vw;

    line-height: 2.7vh;

    order: 2;

    width: 100%;
  }

  .content-header {
    text-align: center;
  }

  .rules-images1 {
    display: block;

    margin-left: auto;

    margin-right: auto;
  }

  .rules-images2 {
    display: block;

    margin-left: auto;

    margin-right: auto;
  }

  .rules-images3 {
    display: block;

    margin-left: auto;

    margin-right: auto;
  }

  .tips-images1 {
    display: block;

    margin-left: auto;

    margin-right: auto;
  }

  .tips-images2 {
    display: block;

    margin-left: auto;

    margin-right: auto;
  }

  .tips-images3 {
    display: block;

    width: 100%;
  }

  footer {
    padding-bottom: 2vh;

    display: block;
  }

  .footer-title {
    display: block;

    text-align: center;

    margin: 0;
  }

  .footer-list {
    position: unset;

    gap: 4vh;

    padding: 0;

    white-space: nowrap;

    flex-flow: wrap;
  }

  .container-content-info {
    display: block;
  }

  .info-list {
    padding: 0;

    display: flex;

    justify-content: space-evenly;
  }

  .info-content {
    margin-left: auto;

    margin-right: auto;

    width: 90%;
  }

  .info-content-headers {
    text-align: center;
  }

  .tips-header {
    margin-top: 5vh;
  }

  .info-dif-list {
    justify-content: center;

    padding-top: 1vh;
  }

  /* cookie page */

  .container-content-cookie {
    display: block;

    margin-left: 3%;

    margin-right: 3%;
  }

  .cookie-info-list {
    width: 100%;

    flex: 1;
  }

  .cookie-content {
    margin-top: revert;

    margin-left: revert;
  }

  /* Pop up messages */

  /* 1st time user */

  .bodyshadow {
    display: none;
  }

  .New-user {
    display: none;
  }

  .info-btn {
    font-size: 2.5vh;
  }

  .info-content {
    font-size: 2.5vh;
  }

  .info-link {
    text-align: center;
  }

  /* END OF MOBILE */
}

.loading-holder {
  transform: none;

  box-sizing: border-box;

  text-align: center;

  left: initial;

  display: flex;

  flex-wrap: wrap;

  top: initial;

  z-index: 101;

  background-color: white;

  width: 100%;

  height: 100%;

  padding-right: 1vh;

  padding-left: 1vh;
}

.loading-title {
  height: auto;
}

.loading-text {
  height: auto;
}

/*Game-over*/

.game-over-img {
  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  opacity: 50%;
}

.game-over {
  background-color: rgb(255, 255, 255);

  border: 2px solid rgb(52, 72, 97);

  height: 100%;

  width: 100%;

  position: absolute;

  top: 0px;

  display: none;

  z-index: 0;
}

.game-over-title {
  margin-top: 20%;

  font-weight: bold;

  font-size: 4vh;

  width: 100%;

  text-align: center;

  position: relative;

  z-index: 2;
}

.game-over-row {
  margin: 3% 0;

  font-size: 3vh;

  text-align: center;

  position: relative;

  z-index: 2;

  display: block;

  padding: 0;

  color: inherit;
}

.link {
  display: inline;
}

.game-over-button {
  box-shadow: 0px 0px 5px 2px #5d82af91;

  left: 0;

  position: relative;

  margin-left: 25%;

  margin-right: 25%;
}

.game-over-button:hover {
  box-shadow: 0px 0px 15px 5px #5d82af91;

  cursor: pointer;
}

.flash {
  box-shadow: 0px 0px 15px 5px #5d82af91;
}

.new-game-over-window {
  border: 1px solid rgb(160, 175, 190);

  border-radius: 1vh;

  position: absolute;

  display: none;

  height: 22vh;

  width: 30vh;

  --widthGameOverWindow: 30vh;

  z-index: 2;

  /* left: 20%; */

  left: calc(50% - calc(var(--widthGameOverWindow) / 2));

  bottom: calc(43% - 22vh);
}

.game-over-window-arrow {
  transform: translate(-50%, -1vh) rotate(45deg);

  border: 1px solid rgb(160, 175, 190);

  background-color: rgb(255, 255, 255);

  position: absolute;

  height: 5vh;

  width: 5vh;

  left: 50%;

  display: none;
}

.game-over-window-body {
  background-color: rgb(255, 255, 255);

  position: absolute;

  border-radius: 1vh;

  overflow: hidden;

  height: 100%;

  width: 100%;

  left: 0px;

  top: 0px;
}

.game-over-window-title {
  justify-content: center;

  align-items: center;

  font-weight: bold;

  margin-top: 1vh;

  margin-bottom: 1vh;

  font-size: 2.5vh;

  display: flex;

  height: 4vh;

  width: 100%;
}

.game-over-window-subtitle {
  justify-content: center;

  align-items: center;

  margin-bottom: 1vh;

  display: flex;

  height: 2vh;

  width: 100%;
}

.game-over-window-option {
  width: calc(100% - 1vh);

  justify-content: center;

  align-items: top;

  cursor: pointer;

  padding: 0.5vh;

  display: flex;

  height: 3vh;
}

.game-over-window-option:hover {
  background-color: rgb(235, 240, 245);
}

.game-over-window-option:active {
  background-color: rgb(225, 230, 235);
}

.fb-like {
  z-index: 1;

  margin: 3% 0;

  font-size: 3vh;

  text-align: center;

  position: relative;

  z-index: 2;

  padding: 0;

  color: inherit;
}