/* main.css */
@import url("./gimmicks/calendar.css");
@import url("./gimmicks/door.css");
@import url("./gimmicks/gimmick.css");

/* -- Grundlayout -- */
html {
   font-size: calc(0.90em + 0.35vw);
}

body {
    margin: 0;
    font-family: serif;
}

:root {
   --textColor: white;
   --linkColor: aqua;
   --headerColor: var(--textColor, white);
}

/* Helper class to push everything in the middle */
.calendar-container {
    margin: 0 auto;
    padding: 20px;
    min-height: calc(100vh - 40px); /* etwas padding abziehen */
    max-width: max(850px, 80vw);

    /** grey-ish background gradient similar to the snow_background.jpg */
    background: linear-gradient(180deg,
      rgba(65, 76, 91, 1) 0%, 
      rgba(121, 132, 140, 1) 90%, 
      rgba(141, 143, 149, 1) 100%);
    background-attachment: fixed;  /* verhindert “Scrolling-Lücke” */
    color: var(--textColor, white); /** kind of black */

    &::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;

      background-image: url("img/snow_background.jpg");
      background-size: cover;
      background-position: center center;

      filter: blur(1px) brightness(0.4);
      transform: scale(1.05); /* verhindert Randartefakte vom Blur */

      /* für Smoothness */
      will-change: transform, filter;
    }

    h1 {
      margin: 10px 0 20px 0;
    }
}


/** Some typographic element styling */

h1, h2, h3, h4, h5, h6 {
  font-family: sans-serif;
  color: var(--headerColor);
}

h1 {
   font-size: 2rem;
   margin-top: 20px;
   margin-bottom: 10px;
}

h2 {
   font-size: 1.5em;
}

h3 {
   font-size: 1.17em;
}

h4 {
   font-size: 1em;
}

h5 {
   font-size: 0.83em;
}

h6 {
   font-size: 0.67em;
}

/** Paragraph settings **/

p {
  line-height: 1.2;
}

a, a:link, a:visited, a:active {
  color: var(--linkColor, aqua);
}