@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #2B7BA8;
  --print: #FFFFFF;
  --card: #F0EFDC;
  --ink: #16242E;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: "Figtree", system-ui, sans-serif;
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--print);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vw, 16px);
  text-align: center;
}

.text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1vw, 8px);
}

.logo {
  width: clamp(64px, 16vw, 116px);
  height: clamp(64px, 16vw, 116px);
}

h1 {
  font-size: clamp(64px, 19vw, 132px);
  font-weight: 600;
}

p {
  font-size: clamp(18px, 5vw, 25px);
  font-weight: 500;
}

.login {
  position: fixed;
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 6px;
}