:root {
  --blueBG: #4375b0;
  --blueGradientBG: linear-gradient(
    180deg,
    rgba(97, 170, 255, 1) 0%,
    rgba(67, 117, 176, 1) 75%
  );
  --vibrantBlueBG: #0077ff;
  --darkGradientBG: linear-gradient(
    180deg,
    rgba(44, 51, 61, 1) 0%,
    rgba(25, 30, 37, 1) 75%
  );
  --greenGradientBG: linear-gradient(
    180deg,
    rgba(119, 221, 119, 1) 0%,
    rgba(80, 150, 80, 1) 75%
  );
  --greenBG: #77dd77;
  --yellowGradientBG: linear-gradient(
    180deg,
    rgba(253, 253, 150, 1) 0%,
    rgba(174, 174, 103, 1) 75%
  );
  --darkYellowBG: #bebe0a;
  --redGradientBG: linear-gradient(
    180deg,
    rgba(255, 105, 97, 1) 0%,
    rgba(171, 71, 66, 1) 75%
  );
  --redBG: #ff6961;
  --scrollbarTrack: rgb(25, 27, 38);
  --scrollbarThumb: #555;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--blueBG);
}

p {
  color: white;
  margin: 0;
  text-align: center;
  font-family: Helvetica;
  animation: riseLoad 1s ease 0s 1 normal backwards;
}

img.bgIMG {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation: riseLoad 1s ease 0s 1 normal backwards;
}

img.buttonIMG {
  width: 6vw;
  height: 6vw;
  margin-bottom: 20px;
  animation: riseLoad 1s ease 0s 1 normal backwards;
}

div.blurBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px;
  background: rgba(255, 0, 0, 0);
  backdrop-filter: blur(30px);
  border-radius: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  align-self: center;
  align-content: center;
  animation: fadeIn 0.5s ease 0s 1 normal backwards;
}

div.title {
  color: white;
  text-align: center;
  font-family: Helvetica;
  font-weight: bold;
  font-size: calc(2vw + 3vh);
  animation: riseLoad 1s ease 0s 1 normal backwards;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8vw;
  height: 6vh;
  margin: 0;
  padding: 2px;
  border: none;
  border-radius: 30px;
  font-family: Helvetica;
  font-size: calc(0.625vw + 1.1vh);
  background: var(--darkGradientBG);
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition-duration: 0.4s;
  animation: riseLoad 1s ease 0s 1 normal backwards;
}

button:hover {
  background: var(--blueGradientBG);
  box-shadow: 0 0 10px var(--blueBG);
  transform: perspective(200px) rotateY(10deg) rotateX(10deg);
}

button.bigCentered {
  width: calc((68.75vh - 200px) / 2);
  height: calc((68.75vh - 200px) / 2);
  margin: 20px;
  font-size: calc(0.7vw + 1.5vh);
  flex-direction: column-reverse;
}

button.bigCentered:hover {
  transform: perspective(200px) rotateY(3deg) rotateX(3deg);
}

button.start {
  background: var(--greenGradientBG);
}

button.start:hover {
  background: white;
  color: var(--greenBG);
  box-shadow: 0 0 10px var(--greenBG);
}

button.stop {
  background: var(--yellowGradientBG);
  color: black;
}

button.stop:hover {
  background: white;
  color: var(--darkYellowBG);
  box-shadow: 0 0 10px var(--darkYellowBG);
}

button.reset {
  background: var(--redGradientBG);
}

button.reset:hover {
  background: white;
  color: var(--redBG);
  box-shadow: 0 0 10px var(--redBG);
}

.onTop {
  position: absolute;
  top: 0;
  z-index: 100;
}

div.horizontalLayout {
  display: flex;
  column-gap: 20px;
  align-items: center;
  margin: 5px;
  width: auto;
  height: auto;
}

div.horizontalCenter {
  margin-left: auto;
  margin-right: auto;
}

button.horizontalCenter {
  width: 130px;
  left: 50%;
  transform: translateX(-50%);
}

div.verticalLayout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  align-content: center;
  position: relative;
  margin: 100px;
  width: auto;
  height: 100%;
}

div.timerCircleOutline {
  border: 8px solid var(--vibrantBlueBG);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(14.32vh + 8vw - 80px);
  width: calc(14.32vh + 8vw - 80px);
  border-radius: 50%;
  animation: riseLoad 1s ease 0s 1 normal backwards;
}

div.timerCircle {
  position: absolute;
  background: var(--blueGradientBG);
  height: calc(14.32vh + 8vw - 80px);
  width: calc(14.32vh + 8vw - 80px);
  border-radius: 50%;
  animation: riseLoad 0s ease 0s 1 normal backwards;
}

@keyframes riseLoad {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 10;
  }

  to {
    opacity: 100;
  }
}

::-webkit-scrollbar {
  width: 12px;
  border-radius: 30px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbarTrack);
  border-radius: 30px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbarThumb);
  border-radius: 30px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vibrantBlueBG);
}