@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono:vf@latest/latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono:vf@latest/cyrillic-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --base: #eff1f5;
  --mantle: #e6e9ef;
  --crust: #dce0e8;
  --accent: #1e66f5;
  --text: #4c4f69;
}

html,
body {
  background: var(--crust);
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
}

* {
  margin: 0;
  font-weight: inherit;
}

.receiver-container {
  height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sender-container {
  height: 100svh;
  display: grid;
  gap: 2px;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "desc"
    "send";
}

@media only screen and (min-width: 600px) {
  .sender-container {
    grid-template-areas: "desc send";
    grid-template-columns: 61.8% auto;
  }
}

.code-area {
  height: calc(100svh - 96px - 2px);
  grid-area: code;
  background: var(--base);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  animation: fadeIn ease-in 1s;
}

.code-area img,
.code-area canvas {
  width: 100%;
  max-width: 80vw;
}

.code-area__code {
  max-width: 80%;
  height: 61.8%;
  aspect-ratio: 1;
}

.code-area__text {
  overflow: auto;
  max-width: 80vw;
  max-height: 100%;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.status {
  color: var(--accent);
  filter: opacity(0);
  position: absolute;
  left: 0;
  transform: translateX(calc(50vw - 6ch));
  transition: ease 1s;
}

.description {
  grid-area: desc;
  padding: 1rem;
  background: var(--base);
}

.title,
.description__title {
  font-size: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text);
}

.logo,
.description__logo {
  height: 3rem;
}

.footer {
  background: var(--mantle);
  padding: 1rem;
  overflow-x: auto;
  position: relative;
}

.footer,
.footer div {
  gap: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.25rem;
}

.source__button,
.send-actions__button {
  display: block;
  box-sizing: border-box;
  min-width: 64px;
  width: 64px;
  height: 64px;
  padding: 1rem;
  background: var(--base);
  border: 2px solid var(--crust);
  border-radius: 0.5rem;
  color: var(--accent);
  transition: 0.2s ease;
}

.source__button:hover,
.send-actions__button:hover {
  border-color: var(--accent);
  transform: scale(0.95);
}

.send-actions {
  grid-area: send;
  background: var(--base);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.send-actions__button {
  filter: opacity(0);
}

.single-icon {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 2rem;
  animation: fadeIn 1s;
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  0% {
    filter: opacity(0);
  }

  100% {
    filter: opacity(1);
  }
}

.lucide-loader-pinwheel-icon {
  animation: spin 1s linear infinite;
}