@font-face {
  font-family: "Golos";
  src: url(../assets/fonts/golos-ui_regular.ttf);
  font-weight: normal;
}

@font-face {
  font-family: "Golos";
  src: url(../assets/fonts/golos-ui_medium.ttf);
  font-weight: bold;
}

@font-face {
  font-family: "Golos";
  src: url(../assets/fonts/golos-ui_bold.ttf);
  font-weight: 600;
}

:root {
  --illi-red: rgb(148, 56, 58);
  --illi-light-red: rgba(148, 56, 58, 0.10);
  --illi-black: rgb(45, 45, 45);
  --illi-lighter-gray: rgb(245, 245, 245);
  --illi-light-gray: rgb(236, 236, 236);
  --illi-gray: rgb(82, 82, 82);
  --illi-dark-gray: rgb(59, 59, 59);
  --illi-blue: rgb(223, 233, 245);
  --illi-light-blue: rgb(238, 243, 250);
  --illi-dark-blue: rgb(95 152 221);
  --illi-darker-blue: rgb(47 109 185);
  --illi-yellow: rgb(255, 190, 37);
  --illi-light-yellow: rgba(255, 190, 37, 0.13);
  --illi-green: rgb(58, 179, 73);
  --illi-light-green: rgba(111, 208, 96, 0.16);
  --illi-purple: rgb(165, 106, 198);
  --illi-light-purple: rgba(177, 125, 207, 0.23);
  --illi-game-red: rgb(218, 64, 64);
  --illi-light-game-red: rgba(218, 64, 64, 0.18);
}

* {
  -webkit-tap-highlight-color: rgba(0,
      0,
      0,
      0);
  /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

html {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body {
  background-color: white;
  color: var(--illi-black);
  font-family: "Golos", "Arial", system-ui, -apple-system, -apple-system-font, "Segoe UI",
    "Roboto", sans-serif;
  margin: 0px;
  padding: 0px;
}

#splash-screen {
  background-color: white;
  width: 100vw;
  height: 100vh;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#splash-screen img {
  width: 15vw;
  animation: bounce 2s infinite;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-4vh);
  }

  60% {
    transform: translateY(-2vh);
  }
}

h1 {
  font-size: 4vw;
  margin-bottom: 1vh;
}

h2 {
  color: #747474;
  margin: 3vh 0;
  font-size: 1.6vw;
}

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

#logo {
  width: 10vh;
  margin-bottom: 3vh;
  margin-top: 2vh;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.page,
.mainPage {
  width: 100%;
  height: 100%;
  display: none;
}

.page#overlay {
  position: absolute;
  z-index: 500;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.main-container {
  width: 100%;
  height: 100%;
}

.button {
  margin: 0.5vw;
  background: var(--illi-red);
  color: white;
  border-radius: 0.5vw;
  padding: 2vh;
}

:focus {
  /* outline: 2px solid rgb(65, 154, 67); */
  outline-offset: -2px;
  /* box-shadow: 1vw 0vw 8vw -3vw black; */
}

#error-message {
  margin: 0;
}

#debugMessage {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.84);
  color: black;
  width: 100%;
  font-size: 5vh;
  z-index: 99;
}

.illi-logo {
  font-size: calc(var(--percentage-height) * 8);
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(var(--percentage-width) * 1);
  padding: calc(var(--percentage-width) * 1);
  z-index: 199;
}

.right-logo-container{
  position: absolute;
  right: calc(var(--percentage-width) * 9);
}

.illi-logo.fade {
  opacity: 0.35;
}

.illi-logo.black {
  color: var(--illi-black);
}

.illi-logo.black.fade {
  opacity: 0.10;
}

.illi-logo.right {
  top: 0;
  right: 0;
  left: auto;
}

.illi-logo.bottom-left {
  top: auto;
  bottom: calc(var(--percentage-height) * 1.30);
  left: calc(var(--percentage-width) * 1.5);
  right: auto;
}

.illi-logo.bottom-right {
  top: auto;
  bottom: calc(var(--percentage-height) * 2.5);
  left: auto;
  right: calc(var(--percentage-width) * 2);
}

.mr-illi-live-indicator {
  display: none;
  position: absolute;
  top: calc(var(--percentage-height) * 9);
  left: 0;
  margin: calc(var(--percentage-width) * 2.1);
  z-index: 199;
  color: white;
  background-color: var(--illi-game-red);
  border-radius: calc(var(--percentage-width) * 0.4);
  font-size: calc(var(--percentage-width) * 1);
  padding: calc(var(--percentage-width) * 0.3);
  padding-left: calc(var(--percentage-width) * 0.4);
  padding-right: calc(var(--percentage-width) * 0.4);
  opacity: 0.8;
}

.mouse-detection-zone-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 15%;
  height: 80%;
  z-index: 1;
  /* background-color: pink; */
}

.clocky {
  position: relative;
  max-width: 100%;
}

.clocky .clockFace {
  position: relative;
  width: 100%;
  height: 100%;
}

.clocky .hand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
}

/* To center fa icons vertically */
.fa-fh {
  height: 1.25em;
  line-height: 1.25em !important;
}

/* Styling for icons with an icon and a button like in settings */
.icon-button {
  display: flex;
  flex-direction: row;
  height: 8vh;
  align-items: center;
  /* width: 25vw; */
  width: 22vw;
  margin-bottom: 3vh;
}

.icon-button:focus {
  background-color: var(--settings-light);
  color: var(--settings-dark);
  border-radius: 1vw;
  outline: none;
}

.icon-button-icon {
  display: flex;
  width: 3.5vw;
  min-width: 3.5vw;
  height: 3.5vw;
  justify-content: center;
  align-items: center;
  margin-right: 1vw;
  margin-left: 1vw;
  background-color: var(--settings-light);
  border-radius: 5vw;
  color: var(--settings-dark);
}

.icon-button:focus .icon-button-icon {
  color: var(--settings-light);
  background-color: var(--settings-dark);
}