* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.main {
  --font: sans-serif;
  --countdown-font: var(--font);
  display: grid;
  grid-template-columns: 100vw;
  grid-template-rows: 20vh auto 20vh;
  font-family: var(--font);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  width: 100vw;
  margin: 0;
  padding: 0;
  position: fixed;
}

.header, footer {
  padding: .5rem 1rem .5rem 1rem;
  position: relative;
  display: flex;
}

.header {
  justify-content: flex-start;
}

.footer {
  justify-content: flex-end;
  align-items: flex-end;
}

h1 {
  font-size: clamp(1.5rem, 4vw, 4rem);
  margin: 0;
}

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


/* ****************************************************************** BUTTON */
button {
  --btn-font: var(--font);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  font-family: var(--btn-font);
  word-break: break-all;
  word-break: break-word;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-animation: button-text-color 2s infinite linear alternate;
          animation: button-text-color 2s infinite linear alternate;
}

button.no_click {
  pointer-events: none;
}

button:active {
  color: #ff0000;
  -webkit-animation: none;
          animation: none;
}

/* ****************************************************************************** SWITCH CLASSES */
/* ****************************************************************** iso */
.btn_iso {
  --btn-font: 'Press Start 2P';
  --iso-width: 10rem;
  --iso-height: 5rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  width: var(--iso-width);
  height: var(--iso-height);
  padding: 0;
  margin: 0 auto;
  transform-style: preserve-3d;
  border: 1px solid black;
  background: #fff;
  transform: rotateX(40deg) rotatez(26deg);
  -webkit-transform: rotateX(40deg) rotatez(26deg);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform .1s ease-in-out, box-shadow .1s ease-in-out;
  font-size: 1.3rem;
  text-align: center;
  box-shadow: 1.7rem 13rem 0.2rem 0.5rem white, 1.8rem 8.8rem 0px 0rem #474747;
}

.btn_iso:active {
  box-shadow: 0rem 5.2rem 0px 0rem white, 0rem 5rem 0px 0rem #474747;
  transform: rotateX(40deg) rotatez(26deg) translateZ(-5rem);
  -webkit-transform: rotateX(40deg) rotatez(26deg) translateZ(-5rem);
  transition: transform .2s, box-shadow .2s;
}

.btn_iso::before,
.btn_iso::after {
  content: '';
  position: absolute;
  width: var(--iso-width);
  height: var(--iso-height);
  transform-origin: -2% -2%;
  border: 1px solid black;
  transition: all .1s ease-in-out;
  
}

.btn_iso::before {
  top: 101%;
  width: calc(var(--iso-width) - 1%);
  left: -1%;
  transform: rotateX(-90deg);
  -webkit-transform: rotateX(-90deg);
  background: #8d8d8d;
}

.btn_iso::after {
  top: -3%;
  left: 101%;
  width: calc(var(--iso-height) - 3%);
  border-bottom: none;
  transform: rotateY(90deg);
  -webkit-transform: rotateY(90deg);
  background: #d3d3d3;
}

.btn_iso:active::before {
  height: 0;
  transition: height .2s;
}

.btn_iso:active::after {
  width: 0;
  transition: width .2s;
}

/* ****************************************************************** CLOUD */
.btn_cloud {
  font-family: 'Monoton';
  font-size: 2.5rem;
  line-height: 1;
  position: relative;
  width: 16rem;
  height: 7rem;
  background: #fff;
  margin: auto;
  padding: 0;
  border: 1px solid #f4f4f4;
  border-radius: 14rem;
  border-bottom: 1px solid #f4f4f4;
  box-shadow: 0px 6px 33px -13px #949393, inset 4px -2px 20px -13px #949393;
  transition: all .2s ease;
}

.btn_cloud.btn_slice.animated {
  -webkit-animation: shadow-up 2s ease-in-out;
  animation: shadow-up 2s ease-in-out;
  -webkit-animation-delay: 0, .4s;
  animation-delay: 0, .4s;
}

.btn_cloud::before,
.btn_cloud::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 14rem;
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}

.btn_cloud::before {
  bottom: 0;
  left: 0;
}

.btn_cloud:active {
  border-top: 1px solid #f4f4f4;
  border-radius: 14rem;
  box-shadow: none;
  transition: all .4s ease;
  -webkit-animation: none;
          animation: none;
}

/* ****************************************************************** SLICE */
.btn_slice {
  position: relative;
  width: 6rem;
  height: 3rem;
  white-space: nowrap;
  background: white;
  border: 1px solid #ff0000;
  color: #ff0000;
  border-radius: .3rem;
  transition: background .2s ease;
}

.btn_slice.animated {
  -webkit-animation: widen 1s ease-in;
          animation: widen 1s ease-in;
}

.btn_slice.animated::before {
  content: '';
  width: 1rem;
  height: 100%;
  position: absolute;
  background-color: transparent;
  top: 0;
  border-radius: 0rem 1rem;
  left: 0;
  -webkit-animation: slice-down 1s cubic-bezier(0.42, 0, 0.58, 1.86), drop-radius-fade-in 2s linear;
          animation: slice-down 1s cubic-bezier(0.42, 0, 0.58, 1.86), drop-radius-fade-in 2s linear;
}

.btn_slice:hover {
  background: #ff00002f;
  transition: background .2s ease;
}

.btn_slice:active {
  background: #ff000088;
  color: white;
  transition: background .2s ease;
}

/* ****************************************************************** ANIMATIONS */
@-webkit-keyframes drop-radius-fade-in {
  from {
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
    border-radius: 0rem 1rem;
  }
  to {
    border-radius: 0;
  }
}
@keyframes drop-radius-fade-in {
  from {
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
    border-radius: 0rem 1rem;
  }
  to {
    border-radius: 0;
  }
}

@-webkit-keyframes widen {
  0% {
    color: transparent;
    width: 0;
    opacity: 0;
    -webkit-transform: translateX(-3rem) skewX(10deg);
    transform: translateX(-3rem) skewX(10deg);
    border-right: none;
  }
  20% {
    border-right: none;
    -webkit-transform: translateX(-3rem) skewX(10deg);
    transform: translateX(-3rem) skewX(10deg);
    border-radius: 0rem 1rem;;
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: 6rem;
    color: transparent;
    border-right: none;
  }
}

@keyframes widen {
  0% {
    color: transparent;
    width: 0;
    opacity: 0;
    -webkit-transform: translateX(-3rem) skewX(10deg);
    transform: translateX(-3rem) skewX(10deg);
    border-right: none;
  }
  20% {
    border-right: none;
    -webkit-transform: translateX(-3rem) skewX(10deg);
    transform: translateX(-3rem) skewX(10deg);
    border-radius: 0rem 1rem;;
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: 6rem;
    color: transparent;
    border-right: none;
  }
}

@-webkit-keyframes slice-down {
  0% {
    top: -10rem;
    box-shadow: 1rem -10rem 0rem 0rem transparent, 2rem -10rem 0rem 0rem transparent, 3rem -10rem 0rem 0rem transparent, 4rem -10rem 0rem 0rem transparent, 5rem -10rem 0rem 0rem transparent;
  }
  16.6667% {
    top: 0;
    box-shadow: 1rem -10rem 0rem 0rem #ff0000, 2rem -10rem 0rem 0rem transparent, 3rem -10rem 0rem 0rem transparent, 4rem -10rem 0rem 0rem transparent, 5rem -10rem 0rem 0rem transparent;
    background-color: transparent; 
  }
  33.3333% {
    
    box-shadow: 1rem 0rem 0rem 0rem #ff0000, 2rem -10rem 0rem 0rem #ff0000, 3rem -10rem 0rem 0rem transparent, 4rem -10rem 0rem 0rem transparent, 5rem -10rem 0rem 0rem transparent;
  }
  50% {
    
    box-shadow: 1rem 0rem 0rem 0rem transparent, 2rem 0rem 0rem 0rem #ff0000, 3rem -10rem 0rem 0rem #ff0000, 4rem -10rem 0rem 0rem transparent, 5rem -10rem 0rem 0rem transparent;
  }
  66.6667% {
    
    box-shadow: 1rem 0rem 0rem 0rem transparent, 2rem 0rem 0rem 0rem transparent, 3rem 0rem 0rem 0rem #ff0000, 4rem -10rem 0rem 0rem #ff0000, 5rem -10rem 0rem 0rem transparent;
  }
  83.3333% {
    
    box-shadow: 1rem 0rem 0rem 0rem transparent, 2rem 0rem 0rem 0rem transparent, 3rem 0rem 0rem 0rem transparent, 4rem 0rem 0rem 0rem #ff0000, 5rem -10rem 0rem 0rem #ff0000;
  }
  100% {
    background-color: transparent;
    box-shadow: 1rem 0rem 0rem 0rem transparent, 2rem 0rem 0rem 0rem transparent, 3rem 0rem 0rem 0rem transparent, 4rem 0rem 0rem 0rem transparent, 5rem 0rem 0rem 0rem #ff0000;
  }
}

@keyframes slice-down {
  0% {
    top: -10rem;
    box-shadow: 1rem -10rem 0rem 0rem transparent, 2rem -10rem 0rem 0rem transparent, 3rem -10rem 0rem 0rem transparent, 4rem -10rem 0rem 0rem transparent, 5rem -10rem 0rem 0rem transparent;
  }
  16.6667% {
    top: 0;
    box-shadow: 1rem -10rem 0rem 0rem #ff0000, 2rem -10rem 0rem 0rem transparent, 3rem -10rem 0rem 0rem transparent, 4rem -10rem 0rem 0rem transparent, 5rem -10rem 0rem 0rem transparent;
    background-color: transparent; 
  }
  33.3333% {
    
    box-shadow: 1rem 0rem 0rem 0rem #ff0000, 2rem -10rem 0rem 0rem #ff0000, 3rem -10rem 0rem 0rem transparent, 4rem -10rem 0rem 0rem transparent, 5rem -10rem 0rem 0rem transparent;
  }
  50% {
    
    box-shadow: 1rem 0rem 0rem 0rem transparent, 2rem 0rem 0rem 0rem #ff0000, 3rem -10rem 0rem 0rem #ff0000, 4rem -10rem 0rem 0rem transparent, 5rem -10rem 0rem 0rem transparent;
  }
  66.6667% {
    
    box-shadow: 1rem 0rem 0rem 0rem transparent, 2rem 0rem 0rem 0rem transparent, 3rem 0rem 0rem 0rem #ff0000, 4rem -10rem 0rem 0rem #ff0000, 5rem -10rem 0rem 0rem transparent;
  }
  83.3333% {
    
    box-shadow: 1rem 0rem 0rem 0rem transparent, 2rem 0rem 0rem 0rem transparent, 3rem 0rem 0rem 0rem transparent, 4rem 0rem 0rem 0rem #ff0000, 5rem -10rem 0rem 0rem #ff0000;
  }
  100% {
    background-color: transparent;
    box-shadow: 1rem 0rem 0rem 0rem transparent, 2rem 0rem 0rem 0rem transparent, 3rem 0rem 0rem 0rem transparent, 4rem 0rem 0rem 0rem transparent, 5rem 0rem 0rem 0rem #ff0000;
  }
}

@-webkit-keyframes iso-shadow-out {
  from {
    box-shadow: 1.7rem 14rem 0px 0rem white, 1.8rem 8.8rem 0px 0rem #474747
  }
  to {
    box-shadow: 0rem 5.2rem 0px 0rem white, 0rem 5rem 0px 0rem #474747;
  }
}

@keyframes iso-shadow-out {
  from {
    box-shadow: 1.7rem 14rem 0px 0rem white, 1.8rem 8.8rem 0px 0rem #474747
  }
  to {
    box-shadow: 0rem 5.2rem 0px 0rem white, 0rem 5rem 0px 0rem #474747;
  }
}

@-webkit-keyframes draw-right {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: calc(100% - 1rem);
    opacity: 1;
    bottom: 0;
    left: 0;
    border-left: 1px solid #f4f4f4;
    border-right: 1px solid #f4f4f4;
  }
}
@keyframes draw-right {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    height: calc(100% - 1rem);
    opacity: 1;
    bottom: 0;
    left: 0;
    border-left: 1px solid #f4f4f4;
    border-right: 1px solid #f4f4f4;
  }
}

@-webkit-keyframes shadow-up {
  from {
    box-shadow: -28px 30px 54px -59px #949393;
  }
  to {
    box-shadow: 0px 6px 33px -13px #949393, inset 4px -2px 20px -13px #949393;
  }
}

@keyframes shadow-up {
  from {
    box-shadow: -28px 30px 54px -59px #949393;
  }
  to {
    box-shadow: 0px 6px 33px -13px #949393, inset 4px -2px 20px -13px #949393;
  }
}

@-webkit-keyframes button-text-color {
  from {
    color: #ff0000;
  }
  to {
    color: #fcc8c8;
  }
}

@keyframes button-text-color {
  from {
    color: #ff0000;
  }
  to {
    color: #fcc8c8;
  }
}