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

@font-face {
  font-display: block;
  font-family: "Windows Regular";
  src: url(/static/fonts/windows-regular.ttf) format("truetype");
}

@font-face {
  font-display: block;
  font-family: "Diatype Variable";
  src: url(/static/fonts/diatype-variable.ttf) formaat("truetype");
}

:root {
  --cursor-size: 32;
  --color-100: #f5f5f5;
  --color-200: #e7ddab;
  --color-300: #dfd08d;
  --color-400: #d6c46e;
  --color-500: #c9b140;
  --color-primary: #8C251C;
  --color-secondary: #6e8cb1;
}

html, body {
  height: 100vh;
  background-color: var(--color-200);
  cursor: url("/static/images/cursors/summer.png") 16 0, auto;
}

body {
  opacity: 0;
  animation: fadeIn ease 2.333s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

a.link {
  color: var(--color-primary);
  text-decoration: underline;
}

a.link:hover {
  color: var(--color-secondary);
  text-decoration: underline wavy;
  cursor: url("/static/images/cursors/spring.png") 21 0, auto;
}

button:hover, a.btn:hover {
  color: var(--color-secondary);
  text-decoration: underline wavy;
  background-color: var(--color-500);
  cursor: url("/static/images/cursors/spring.png") 21 0, auto;
}

a > div.card:hover {
  background-color: var(--color-500);
  cursor: url("/static/images/cursors/spring.png") 21 0, auto;
}

a > img:hover {
  filter: opacity(70%) brightness(105%);
}

p, b, i, h1, h2, h3, h4, h5, h6 {
  font-family: "Diatype Variable", "Rubik", sans-serif;
}

.type {
  font-weight: 500;
  letter-spacing: 0.1em;
  font-family: "Windows Regular", sans-serif;
}

.main-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: green;
}

.text-100 { color: var(--color-100); }
.text-200 { color: var(--color-200); }
.text-300 { color: var(--color-300); }
.text-400 { color: var(--color-400); }
.text-500 { color: var(--color-500); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }

.bg-100 { background-color: var(--color-100); }
.bg-200 { background-color: var(--color-200); }
.bg-300 { background-color: var(--color-300); }
.bg-400 { background-color: var(--color-400); }
.bg-500 { background-color: var(--color-500); }
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }

.border-100 { border-color: var(--color-100); }
.border-200 { border-color: var(--color-200); }
.border-300 { border-color: var(--color-300); }
.border-400 { border-color: var(--color-400); }
.border-500 { border-color: var(--color-500); }
.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }