@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk&display=swap');

@font-face {
  font-family: 'Clay Font 2D';
  src: url('font/2d-clay-typeface.eot'); /* IE9 Compat Modes */
  src: url('font/2d-clay-typeface.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/2d-clay-typeface.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/2d-clay-typeface.woff') format('woff');
}

:root {
  --textColor: #000;
  --bgColor: #fff;
  --normal-font: 'Space Grotesk', sans-serif;
  /* --clay-font: 'Press Start 2P', cursive; */
  --clay-font: 'Clay Font 2D', Fallback, 'Space Grotesk', serif;
  --fontSize: 20rem;
  --transition-timing-function: cubic-bezier(0.39, 0.01, 0, 1);
  --outline: none;
}

:root.dark {
  --textColor: #fff;
  --bgColor: #000;
}

::selection {
  background-color: var(--textColor);
  color: var(--bgColor);
}

@media (prefers-color-scheme: dark) {
  :root {
    --textColor: #fff;
    --bgColor: #000;
  }

  :root.light {
    --textColor: #000;
    --bgColor: #fff;
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--normal-font);
  color: var(--textColor);
}

body {
  background-color: var(--bgColor);
}

label,
textarea {
  display: block;
  text-align: center;
  text-transform: uppercase;
}

label {
  cursor: pointer;
}

#text {
  min-height: 100vh;
  height: 100%;
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  padding: 100px 2rem 1rem;
  width: 100%;
  border: 0;
  font-size: var(--fontSize);
  line-height: 0.9;
  outline: none;
  background-color: var(--bgColor);
  font-family: var(--clay-font);
  caret-color: var(--textColor);
  overflow-y: scroll;
}

#text.outline {
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--textColor);
  caret-color: var(--textColor);
}

header.controlcenter {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  padding: 0 1rem;
  z-index: 3;
  /* overflow: hidden; */
}

header.controlcenter * {
  display: inline-block;
}

header.controlcenter input {
  -webkit-appearance: none;
  outline: none;
  margin: 0 2rem 0 .6rem;
  cursor: pointer;
}

header.controlcenter input[type=color] {
  overflow: hidden;
  min-width: 50px;
}

header.controlcenter input[type=color]::-webkit-color-swatch {
    border: none;
}
header.controlcenter input[type=color]::-moz-color-swatch {
    border: none;
}

input[type=range] {
  -webkit-appearance: none;
  height: 1px;
  width: 100%;
  min-width: 100px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  border: none;
  cursor: pointer;
  background: var(--textColor);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  border: none;
  cursor: pointer;
  background: var(--textColor);
}
input[type=range]::-ms-track {
  width: 100%;
  height: 1px;
  border: none;
  cursor: pointer;
  background: var(--textColor);
}

input[type=range]::-webkit-slider-thumb {
  height: 1rem;
  width: 1rem;
  border-radius: 1rem;
  border: none;
  background: var(--textColor);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.5rem;
}
input[type=range]::-moz-range-thumb {
  height: 1rem;
  width: 1rem;
  border-radius: 1rem;
  border: none;
  background: var(--textColor);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.5rem;
}
input[type=range]::-ms-thumb {
  height: 1rem;
  width: 1rem;
  border-radius: 1rem;
  border: none;
  background: var(--textColor);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.5rem;
}

input[type=range]:focus::-webkit-slider-runnable-track,
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper,
input[type=range]:focus::-ms-fill-lower,
input[type=range]:focus::-ms-fill-upper {
  background: var(--textColor);
  height: 1px;
  border: none;
}

#outline {
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: line-through;
}
#outline.check {
  text-decoration: none;
}

input[type=color]  {
  border: 1px solid;
  border-radius: 5px;
}

#textColor  {
  background-color: var(--textColor);
  border-color: var(--bgColor);
}

#bgColor {
  background-color: var(--bgColor);
  border-color: var(--textColor);
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  padding: 0.5rem;
  display: flex;
  flex-direction: row-reverse;
}

footer > * {
  margin: 0.5rem;
}

a[target=_blank],
a[target=_blank]::after {
  -webkit-transition: all 0.4s cubic-bezier(0,.99,.63,.99);
  transition: all 0.4s cubic-bezier(0,.99,.63,.99);
}

a[target=_blank]:hover {
  text-decoration: none;
}

a[target=_blank]::after {
  content: "\2192";
  text-decoration: none;
  display: inline-block;
  margin-left: .5rem;
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}

a[target=_blank]:hover::after {
  -webkit-transform: rotate(315deg) scale(1.6);
  transform: rotate(315deg) scale(1.6);
}

a[target=_blank].download:hover::after {
  -webkit-transform: rotate(-270deg) scale(1.6);
  transform: rotate(-270deg) scale(1.6);
}

.tap-animation {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 10rem;
  pointer-events: none;
  display: none;
}

.tap-animation span {
  display: block;
  padding-top: 2rem;
  transform: rotate(45deg);
	-webkit-animation: heartbeat 1.5s ease-in-out 2 both;
	        animation: heartbeat 1.5s ease-in-out 2 both;
}

@media screen and (max-width: 667px) {
  .tap-animation {
    display: block;
  }
  footer {
    flex-direction: column;
    padding: 1rem;
  }
  footer > * {
    margin: 0.2rem 0;
  }
}

@media screen and (max-width: 414px) {
  header.controlcenter {
    justify-content: left;
    overflow-x: scroll;
  }
  #outline {
    padding-right: 1rem;
  }
}

/* heartbeat */
@-webkit-keyframes heartbeat{from{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:rotate(45deg) scale(.91);transform:rotate(45deg) scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:rotate(45deg) scale(.98);transform:rotate(45deg) scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:rotate(45deg) scale(.87);transform:rotate(45deg) scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:rotate(45deg) scale(.91);transform:rotate(45deg) scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:rotate(45deg) scale(.98);transform:rotate(45deg) scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:rotate(45deg) scale(.87);transform:rotate(45deg) scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}