:root {
  --font-family-1: "Quantico", sans-serif;
  --font-family-2: "Silkscreen", sans-serif;

  --font-size-1: calc(14 / 16 * 1rem);
  --font-size-2: calc(16 / 16 * 1rem);
  --font-size-3: calc(20 / 16 * 1rem);
  --font-size-4: calc(30 / 16 * 1rem);
  --font-size-5: calc(40 / 16 * 1rem);
  --font-size-button: calc(24 / 16 * 1rem);

  --line-height-1: 1.2;
  --line-height-2: 1.5;

  --color-white: 255 255 255;
  --color-black: 0 0 0;
  --color-brown: 64 38 34;
  --color-yellow: 230 160 0;
  --color-light-yellow: 255 190 50;
  --color-off-white: 255 234 188;
  --color-red: 222 34 68;

  --app-margin: max(20px, min(5vi, 100px));

  --input-border: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 255 255)" d="M5 5h90v90H5z"/><path d="M0 5h5v90H0zM5 0h90v5H5zM5 95h90v5H5zM95 5h5v90h-5z"/></svg>');
  --button-border: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 255 255)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/><path d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/></svg>');
  --button-border-hover: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 190 50)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/><path d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/></svg>');
  --button-border-danger: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 255 255)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/><path fill="rgb(222 34 68)" d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/></svg>');
}