* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.25s;
}

body {
  --bg-color: #333;
  --fg-color: #ccc;
  font-weight: 400;
  font-family:
    IBM Plex Sans,
    Helvetica Neue,
    Arial,
    sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: currentcolor;
}
note {
  display: block;
  margin: 1rem;
  padding-left: 1rem;
  border-left: 3px solid #aaa;
}
ol {
  list-style: decimal none inside;
}
ul {
  list-style: disc none inside;
  padding: 1rem;
}
dl {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
dt {
  font-size: 1.5rem;
  border-top: 1px solid #aaa;
}
@font-face {
  font-family: "0xproto";
  src: url("../fonts/0xProto-Regular.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-display: auto;
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 400;
  src:
    local("IBM Plex Sans"),
    local("IBMPlexSans"),
    url(../fonts/IBMPlexSans-Regular.woff2) format("woff2"),
    url(../fonts/IBMPlexSans-Regular.woff) format("woff");
}

.background-container {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}
.background-container {
  z-index: 1;
}
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.control-tile,
.output-tile {
  background: var(--bg-color);
  color: var(--fg-color);
  position: absolute;
  padding: 1.33rem;
}

.control-tile {
  top: 1.33rem;
  left: 1.33rem;
  max-height: calc(100vh - (1.33rem * 2));
  overflow: auto;
  background: #333;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.output-tile {
  bottom: 1.33rem;
  right: 1.33rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.result {
  font-family: "0xproto";
  padding: 0.33rem 1rem;
  background-color: rgba(33, 33, 33, 0.9);
}
.result-preview {
  min-height: 33px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.copy-btn {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: #00000054;
  border: 1px solid rgba(0, 0, 0, 0.77);
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border-radius: 0;
  & svg {
    width: 1rem;
    height: 1rem;
    fill: #f4f4f4;
    transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
  }
  & #czechmark {
    /* opacity: 0; */
    position: absolute;
    inset: 0;
  }
  & #copy {
    opacity: 1;
  }
  &:hover {
    background: #000000c4;
    border: 1px solid rgba(0, 0, 0, 1);
  }
}

#source-link {
  position: absolute;
  top: 0.33rem;
  right: 0.33rem;
  font-size: 0.87rem;
}
.input-row {
  width: 100%;
  display: flex;
  padding: 0.76rem 0;
  flex-direction: row-reverse;
  /* align-items: center; */
  & input {
    flex: 1;
  }
  & input[type="text"] {
    color: #f4f4f4;
    background: #00000054;
    border: 1px solid rgba(0, 0, 0, 0.77);
    padding: 0 1rem;
  }
  & input[type="color"] {
    background: #00000054;
    border: 1px solid rgba(0, 0, 0, 0.77);
    height: 33px;
    padding: 0;
  }
}
& input[type="range"] {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  padding: 0.76rem 0;
}

#css-output {
  padding: 2rem;
  display: block;
}
a {
  color: currentcolor;
}

.lightgreen {
  color: lightgreen !important;
}
.yellow {
  color: yellow !important;
}
.pink {
  color: pink !important;
}
.btn,
input[type="file"]::file-selector-button {
  color: #f4f4f4;
  background: #00000054;
  border: 1px solid rgba(0, 0, 0, 0.77);
  display: inline-flex;
  /* align-items: center; */
  /* justify-content: center; */
  padding: 0.33rem;
  margin-bottom: 0.33rem;
  height: 33px;
  cursor: pointer;
  border-radius: 0;
  display: block;
  width: 100%;
}
input[type="file"] {
  text-align: center;
  width: 100%;
}
input[type="color"] {
  cursor: pointer;
  padding: 0;
}
/* input[type="color"]::-webkit-color-swatch { */
/*   border-radius: 15px; */
/*   border: none; */
/* } */
/* input[type="color"]::-moz-color-swatch { */
/*   border-radius: 15px; */
/*   border: none; */
/* } */

/* about */

#modal {
  background: rgba(0, 0, 0, 0.76);
  position: fixed;
  z-index: 10000;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal.show {
  pointer-events: all;
  opacity: 1;
}
.more-info {
  width: min(500px, 95vw);
  height: min(500px, 95vh);
  padding: 33px;
  background: #333;
  color: #ccc;
  overflow: auto;
  transform: translate(50% -50%);
}
.tldr {
  font-size: 1.33rem;
}
.text-test-container {
  position: fixed;
  inset: 40vmin;
  font-size: 33px;
  color: var(--fg-color);
}

#text-test {
}