@use 'styles/mixins' as *;

$card-height: 80dvh;

:host {
  display: block;
  padding: 0 20px;
}

.card {
  @include flex(null, null, column);
  @include rectangle(100%, $card-height);

  position: relative;
  max-width: 860px;
  margin: ((100 - $card-height) / 2) auto;
  border-radius: 8px;
  background-color: var(--color-always-white);

  // https://www.joshwcomeau.com/css/designing-shadows/
  box-shadow: 1px 2px 2px hsl(220deg 60% 50% / 20%), 2px 4px 4px hsl(220deg 60% 50% / 20%),
    4px 8px 8px hsl(220deg 60% 50% / 20%), 8px 16px 16px hsl(220deg 60% 50% / 20%),
    16px 32px 32px hsl(220deg 60% 50% / 20%);
}

.scrollbar {
  --scrollbar-border-radius: 8px;
  --scrollbar-offset: 4;
  --scrollbar-thumb-color: rgb(153 187 255 / 25%);
  --scrollbar-thumb-hover-color: rgb(153 187 255 / 50%);
  --scrollbar-hover-thickness: 6;
}

.container,
.unsupported-screen-size {
  min-height: $card-height;
}

.container {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 140px;
  padding: 60px 70px;
}

.form-me-on-github {
  position: absolute;
  top: 0;
  right: 0;

  @media (width <= 960px) {
    display: none;
  }
}
