@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");

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

  scroll-behavior: smooth;
}

:root {
  --font-family: "Poppins", "Montserrat", Helvetica, sans-serif;

  --color-background: #fcf2ff;
  --color-background-alternative: #dcd7de;
  --color-foreground: #0a000d;
  --color-foreground-soft: #6a666d;
  --color-primary: #8500a6;
  --color-primary-lighter: #9e01c6;
  --color-accent: #f5ccff;
  --color-title: #33004f;
  --color-selection: rgba(133, 0, 166, 0.2);
  --color-error: #ff4040;
  --color-disabled: #808080;

  background-color: var(--color-background);
  color: var(--color-foreground);

  font-family: var(--font-family);
  font-size: 16px;

  overflow-x: hidden;
}

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  overflow-x: hidden;
}

input,
textarea {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;

  font-family: var(--font-family);
}

input {
  background-color: var(--color-background);
  border: none;
  outline: none;
  border-bottom: 2px solid var(--color-foreground);
  height: 2rem;
  min-width: 12rem;
  padding: 0.5rem;
  transition: border-color 200ms ease-out;
}

input:focus {
  border-color: var(--color-primary);
}

input::invalid {
  border-color: var(--color-error);
}

input::placeholder {
  color: var(--color-foreground-soft);
}
input:focus:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
}

main {
  padding: 1rem;
  min-height: calc(100vh - 5rem);
}

.material-symbols-rounded {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}