/* MEDIA QUERY MANAGER */
/* 
  0 - 600px:      Phone
  600 - 900px:    Tablet portrait
  900 - 1200px:   Tablet landscape
  [1200 - 1800] is where our normal styles apply
  1800px + :      Big desktop

  1em = 16px
*/

:root {
  /* 0 - 600px:      Phone */
  --font-size-root: 62.5%;

  --color-primary: #53268A;
  --color-secondary: #FFF100;

  --color-font-primary: #111111;
  --color-font-secondary: #DBDBDB;
  --color-font-tertiary: #666666;

  --color-bg-primary: #F5F5F5;
  --color-bg-secondary: #F8F2FA;

  --color-attention: #FFF4F4;
  --color-error: #F02323;

  --color-border-primary: #DBDBDB;
  --color-border-secondary: #53268A;

  --font-primary: 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-eng: 'rustica', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  --hover-opacity: .4;
  --transition-default: 350ms ease;
  --transitionDuration-fast: 150ms;
  --transitionDuration-default: 350ms;
  --transitionDuration-slow: 600ms;
  --transitionTimingFunction-default: ease;
}

/* 600 - 900px:    Tablet portrait */
@media only screen and (max-width: 56.25em) {
  :root {
    --font-size-root: 50%;
  }
}

/* 900 - 1200px:   Tablet landscape */
@media only screen and (max-width: 75em) {
  :root {
    --font-size-root: 56.25%;
  }
}

/* 1800px + :      Big desktop */
@media only screen and (min-width: 112.5em) {
  :root {
    --font-size-root: 75%;
  }
}

.color-primary {
  color: #53268A;
  color: var(--color-primary);
}

.color-bg-primary {
  background-color: #53268A;
  background-color: var(--color-primary);
}

*::-moz-selection {
  background: #FFF100;
  background: var(--color-secondary);
}

*::selection {
  background: #FFF100;
  background: var(--color-secondary);
}