sass/base.scss
@use "fonts";

//
// Universal box sizing, see https://css-tricks.com/box-sizing/#aa-universal-box-sizing.
//
*, *:before, *:after {
  box-sizing: border-box;
}

:root {
  --letter-width: 40px;
  --letter-height: var(--letter-width);
  --letter-font-size: 1.25rem;

  --tile-width: var(--letter-width);
  --tile-height: var(--letter-height);

  --key-width: 20px;
  --key-height: 30px;
  --key-large-font-size: 0.4rem;

  --wordle-section-gap: 30px;

  --message-padding-vertical: 6px;
  --message-padding-horizontal: 8px;
  --message-font-size: 0.6rem;
}

@media screen and (min-width: 360px) {
  :root {
    --letter-width: 50px;
    --letter-height: var(--letter-width);
    --letter-font-size: 1.5rem;

    --tile-width: var(--letter-width);
    --tile-height: var(--letter-height);

    --key-width: 28px;
    --key-height: 38px;
    --key-large-font-size: 0.65rem;

    --wordle-section-gap: 40px;

    --message-padding-vertical: 8px;
    --message-padding-horizontal: 12px;
    --message-font-size: 0.8rem;
  }
}

@media screen and (min-width: 600px) {
  :root {
    --letter-width: 65px;
    --letter-font-size: 2rem;

    --key-width: 45px;
    --key-height: 55px;
    --key-large-font-size: 1rem;

    --wordle-section-gap: 60px;

    --message-padding-vertical: 12px;
    --message-padding-horizontal: 14px;
    --message-font-size: 1rem;
  }
}

.body, .prototype {
  font-family: fonts.$clear-sans;
  font-size: 100%;
}

.body {
  margin: 0;
}
