/* ===========================
   Imports
=========================== */
@import "reset.css";
@import "font.css";

/* ===========================
   CSS-Variablen
=========================== */
:root {
  /* Farben */
  --color-accent: #F296C4;

  /* Schriftarten */
  --font-title: 700 3rem/120% 'IBMPlexMono', sans-serif;
  --font-subline: 400 1.2rem/120% 'IBMPlexMono', sans-serif;
}

/* ===========================
   Reset & Grundlayout
=========================== */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: auto;
  background-color: var(--color-accent);
  color: #0489D6;
  transition: background-color 0.5s ease;
}

main {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  margin-bottom: 1rem;
}

/* ===========================
   Typografie
=========================== */
h1 {
  position: relative;
  font-family: 'IBMPlexMono';
  font-weight: 500;
  transition: color 0.5s ease;
}

.title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12vw;
  color: #0489D6;
  margin: 0;
  padding: 0;
  line-height: 1;
}



p {
  font-family: 'IBMPlexMono';
  font-weight: 500;
  font-size: 2vw;
   color: #0489D6;
}





/* ===========================
   Media Queries
=========================== */
@media (max-width: 640px) {
  :root {
    --font-title: 700 1.8rem/120% 'IBMPlexMono', sans-serif;
    --font-subline: 400 0.8rem/120% 'IBMPlexMono', sans-serif;
  }

  body {
    overflow-y: auto;
  }
}