:root {
  --color-bg: #f1f1f1;
  --color-black: #150b20;
  --color-grey: #2e2b3c;
  --color-red: #df1b3e;
  --color-red-dark: #9c132b;
  --color-teal: #15dfb9;
  --color-teal-dark: #226c5e;
  --color-white: #ffffff;
  --color-white-dark: #38344b;

  --corner-rounding: 3px;

  --scale-factor: 0.75;
}

html {
  background-color: var(--color-bg);
  background-image: radial-gradient(
    rgba(151, 151, 151, 0.463) 10%,
    transparent 10%
  );
  background-position: 8px 8px;
  background-size: 16px 16px;
  overflow: hidden;
}

#wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#sds-container {
  font-family: creato display;
  font-weight: lighter;
  color: var(--color-white);
  background-color: var(--color-black);
  box-shadow: 0px 0px 15px 0px #0000002e;
  user-select: none;

  position: absolute;
  width: 665px;
  aspect-ratio: 1 / 1;
  resize: horizontal;

  display: grid;
  grid-template-areas:
    "head head head"
    "branding tapeDeck tapeDeck"
    "branding tapeDeck tapeDeck";
  grid-template-columns: 1fr 2.5fr;
  grid-template-rows: 1fr 2.5fr;
  gap: 5px;

  z-index: 0;

  transform: scale(var(--scale-factor));
}

.sds-head {
  grid-area: head;
  background-color: var(--color-grey);
  background: linear-gradient(
    0deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(21, 11, 32, 1) 100%
  );

  display: grid;
  grid-template-areas:
    "display"
    "interface";
  grid-template-rows: 3fr 2fr;
}

#sds-dragHitbox {
  width: 100%;
  height: 70px;
  position: absolute;
  z-index: 2;
  pointer-events: all;
  cursor: move;
}

.sds-branding {
  grid-area: branding;
  display: flex;
}

#sds-tapeDeck {
  grid-area: tapeDeck;
  display: flex;
  justify-content: center;
  align-items: start;
}

#sds-cleanup {
  pointer-events: all;
  cursor: pointer;
  position: fixed;
  z-index: calc(infinity + 1);
  width: 150px;
  bottom: 40px;
  right: 40px;
  opacity: 0.5;
  transition: opacity 0.05s;
}

#sds-cleanup:hover {
  opacity: 1;
}

#sds-shortcuts {
  position: fixed;
  top: 40px;
  right: 40px;
  opacity: 0.2;
  pointer-events: all;
  transition: opacity 0.1s;
  width: 350px;
  z-index: 0;
}

#sds-shortcuts:hover {
  opacity: 1;
  z-index: calc(infinity + 1);
}