@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  --color-primary: #360000;
  --color-secondary: #360000;
  --color-100: #ffd3d3;
  --color-200: #ffbfbf;
  --color-300: #ffabab;
  --color-400: #ff9898;
  --color-500: #6a5cc4;
}

#page {
  width: 75%;
  padding: 1rem 0;
  margin: auto;
  max-width: 850px;
}

#content {
  padding: 3rem 1rem;
  width: 100%;
  border-radius: 0 0 0.5rem 0.5rem;
  background-color: var(--color-300);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

body, html {
  height: 100%;
  color: var(--color-primary);
  background-color: var(--color-500);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Rubik", sans-serif;
}

h3.text-sm {
  color: var(--color-secondary);
  font-family: "Rubik", sans-serif;
}

a:not(.tab) {
  color: var(--color-100);
  text-decoration: underline;
}

a:not(.tab):hover {
  color: var(--color-primary);
}

li > a.tab {
  color: var(--color-100);
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
}

li > a.tab:hover {
  background-color: var(--color-400);
}

li > a.tab.active {
  color: var(--color-primary);
  background-color: var(--color-300);
}

li > a.tab.active:hover {
  background-color: var(--color-200);
}

input[type="text"], input[type="email"], textarea {
  padding: 0.625rem;
  border-radius: 0.25rem;
  background-color: var(--color-100);
}

button[type="submit"] {
  color: var(--color-100);
  border-radius: 0.25rem;
  background-color: var(--color-500);
}

button[type="submit"]:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}