main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#timer {
  display: flex;
  align-items: center;
}

.brand {
  color: rgba(0, 0, 0, 0.8);
  font-size: 4em;
  line-height: 1em;
}

.brand-title {
  position: relative;
}

.brand-border-bottom {
  border: 2px solid gold;
  right: 0;
  left: 20%;
  bottom: 0;
  position: absolute;
}

.brand p {
  font-size: .5em !important;
  color: gold;
  margin-top: -2em;
}

#env {
  font-weight: bold;
}

#logs {
  color: lightgrey;
  display: contents;
}

aside {
  display: flex;
  flex-direction: column;

}

.service .icon {
  font-size: 4em;
}

.card-footer {
  display: flex;
}

aside {
  grid-row: 1/span 2;
  grid-column: 1;
  height: 100%;
}

.service {
  height: 100%;
}

.card-footer {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-content span {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 3em;
}

.card-header {
  font-size: 2em;
  width: 100%;
  text-align: left;
  padding: 0.2em;
  font-family: monospace;

}

.card {
  box-shadow: 15px 15px 30px #034977,
    -15px -15px 30px #0a244d;
  transition: border-radius cubic-bezier(0.075, 0.82, 0.165, 1) 1s,
    transform cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.card:hover {
  border-bottom-right-radius: .2em;
  border-top-left-radius: .2em;
  transform: scale(1.05);
}


.switch {
  display: block;
  background-color: black;
  width: 4em;
  height: 6em;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.switch input {
  display: none;
}

.switch input:checked+.button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

.switch input:checked+.button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switch input:checked+.button .shine {
  opacity: 1;
}

.switch input:checked+.button .shadow {
  opacity: 0;
}

.switch .button {
  display: block;
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}

.switch .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.switch .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}

.switch .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.switch .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.switch .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }
}



.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 96px;
  width: 96px;
  animation: rotate_3922 1.2s linear infinite;
  background-color: #9b59b6;
  background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}

.loading span {
  position: absolute;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  background-color: #9b59b6;
  background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}

.loading span:nth-of-type(1) {
  filter: blur(5px);
}

.loading span:nth-of-type(2) {
  filter: blur(10px);
}

.loading span:nth-of-type(3) {
  filter: blur(25px);
}

.loading span:nth-of-type(4) {
  filter: blur(50px);
}

.loading::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: #fff;
  border: solid 5px #ffffff;
  border-radius: 50%;
}

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

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


/* Power Button */
#power {
  justify-content: center;
  display: flex;
}

#powercheckbox {
  display: none;
}

.power-switch {
  position: relative;
  width: 10em;
  height: 10em;
  background-color: rgb(99, 99, 99);
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(126, 126, 126);
  box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
  transition: transform cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

.power-switch:hover {
  transform: scale(1.2);
}

.powersign {
  position: relative;
  width: 30%;
  height: 30%;
  border: 4px solid rgb(48, 48, 48);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.powersign::before {
  content: "";
  width: 8px;
  height: 100%;
  background-color: rgb(99, 99, 99);
  position: absolute;
  top: -60%;
  z-index: 2;
}

.powersign::after {
  content: "";
  width: 4px;
  height: 100%;
  background-color: rgb(48, 48, 48);
  position: absolute;
  top: -60%;
  z-index: 3;
}

#powercheckbox:checked + .power-switch .powersign {
  border: 4px solid rgb(255, 255, 255);
  box-shadow: 0px 0px 10px rgb(151, 243, 255),
    0px 0px 5px rgb(151, 243, 255) inset;
}

#powercheckbox:checked + .power-switch .powersign::after {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 5px rgb(151, 243, 255);
}

#powercheckbox:checked + .power-switch {
  box-shadow: 0px 0px 1px rgb(151, 243, 255) inset,
    0px 0px 2px rgb(151, 243, 255) inset,
    0px 0px 10px rgb(151, 243, 255) inset,
    0px 0px 40px rgb(151, 243, 255),
    0px 0px 100px rgb(151, 243, 255),
    0px 0px 5px rgb(151, 243, 255);
  border: 2px solid rgb(255, 255, 255);
  background-color: rgb(146, 180, 184);
}

#powercheckbox:checked + .power-switch .powersign::before {
  background-color: rgb(154, 146, 184);
}



/* Progress Bar */
/* body {
  justify-content: center;
  align-items: center;
  background: #000;
  display: flex;
  height: 100vh;
  padding: 0;
  margin: 0;
} */

.progress {
  background: rgba(255,255,255,0.1);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding: 0 5px;
  display: flex;
  height: 40px;
  width: 500px;
}

.progress-value {
  /* animation: load 3s normal forwards; */
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #fff;
  height: 30px;
  width: 0;
}

@keyframes load {
  0% { width: 0; }
  100% { width: 68%; }
}


#restprgress {
  text-align: center;
  color: white;
  font-family: monospace;
}

/* Reset Button  */
.reset-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  gap: 8px;
  height: 34px;
  width: 112px;
  border: none;
  background: #ff362b34;
  border-radius: 20px;
  cursor: pointer;
  align-self:flex-start;
}

#resetbtn {
  align-self: flex-end;
  position: relative;
  bottom: 3px;
}

.reset-button .lable {
  line-height: 20px;
  font-size: 17px;
  color: #FFC02B;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.reset-button:hover {
  background: #ff362b52;
}

.reset-button:hover .reset-svg-icon {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}


#restprgress > div {
  display: flex;
  gap: 1em; 
  
}

/* Clock | Timer  */


.clock {
  
  color: white;
  /* font-size: 22vh; */
  font-family: sans-serif;
  /* line-height: 20.4vh; */
  display: flex;
  position: relative;
  /*background: green;*/
  overflow: hidden;
  height: 2em;
}

.clock::before, .clock::after {
  content: '';
  /* width: 7ch;
  height: 3vh; */
  background: linear-gradient(to top, transparent, black);
  position: absolute;
  z-index: 2;
}

.clock::after {
  bottom: 0;
  background: linear-gradient(to bottom, transparent, black);
}

.clock > div {
  display: flex;
}

.tick {
  /* line-height: 17vh; */
}

.tick-hidden {
  opacity: 0;
}

.move {
  animation: move linear 1s infinite;
}

@keyframes move {
  from {
    transform: translateY(0vh);
  }
  to {
    transform: translateY(-20vh);
  }
}

#progresstimer {
  justify-content: center;
}

select {
    transition: background 5s ease;
}

select:hover {
    background: linear-gradient(to bottom,  #949494, #f5f3f3) !important;
}

select {
    width: 100%;
    padding: .2em;
    font-size: .5em;
    background: linear-gradient(to bottom, #f5f3f3, #949494);
    display: block;
    cursor: pointer;

}}



label[for="envs"] {
    color: #dddd6d;
    font-size: .7em;
    line-height: 0px;
}