@charset "UTF-8";

:root {
  --font-color: #333333;
  --theme-color: #5da71e;
  --base-color: #eeeeee;
  --point-color: #ff0000;

  --color-white: #ffffff;
  --color-black: #000000;
  --color-light-grey: #e6e6e6;
  --color-grey: #cccccc;
  --color-dark-grey: #7b7b7b;

  --orange: #f87835;

  --character1: #41b1b4;
  --character2: #81bb6b;
  --character3: #e06a99;
  --character4: #aa89d8;
  --character5: #f0882c;
  --character6: #db2439;
  --character7: #a43585;
  --character8: #38b7ef;
  --character9: #4b81db;
  --character10: #0057a9;

  --font-size: 1.6rem;
  --side-padding: 3%;
  --box-padding: 3em 3em;
  --line-height: 1.8;

  --character-shadow: 2px 2px;
}

@media screen and (max-width: 768px) {
  :root {
    --font-size: 1.4rem;
    --side-padding: 5%;
    --box-padding: 10% 5%;
    --line-height: 1.5;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --font-size: 3.2vw;
  }
}