* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto-VariableFont_wdth,wght.ttf") format("truetype");
}
@font-face {
  font-family: "Roboto";
  src: url("Roboto-VariableFont_wdth,wght.ttf") format("truetype");
  font-style: italic;
}

html {
  --small-border-radius: 5px;
  --big-border-radius: 15px;
  --primary-color: #463cb3;
  --secondary-color: #e3e2f4;
  --tertiary-color: #6c6c6c;
  --background-color: #fff;
  --text-color: #000;
  --error-color: #b33c3c;

  --primary-shadow: 0 4px 20px 5px rgba(70, 60, 179, 0.1);

  --tiny-gap: 5px;
  --small-gap: calc(var(--tiny-gap) * 2);
  --medium-gap: calc(var(--tiny-gap) * 4);

  --big-gap: calc(var(--tiny-gap) * 8);
  --huge-gap: calc(var(--tiny-gap) * 16);

  --tiny-padding: 2px;
  --small-padding: 5px;
  --regular-padding: calc(var(--small-padding) * 2);
  --big-padding: calc(var(--regular-padding) * 3);
}