/* CSS reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@property --main-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffc0cb;
}

:root {
  color-scheme: light dark;
}

body {
  font-family: sans-serif;
  color: light-dark(#000, #fff);
}

.container {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  min-height: 100svh;
}

.stilig {
  font-size: 3em;
  color: var(--main-color);
  z-index: 1;
}

.smiley {
  font-family: 'Comic Sans MS', 'Chalkboard SE Regular', 'Chalkboard', 'Comic Relief', 'Comic Neue', 'Rosemary', cursive
}

.waffle-link {
  position: absolute;
  bottom: 1.5em;
  left: 1.5em;
  width: 120px;
  height: 120px;
  display: block;
  transition: transform 250ms ease-in-out;
}

.waffle-link:hover {
  transform: scale(1.05);
}

.waffle-recipe {
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 2em;
  padding-bottom: 1em;
  height: 100svh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (prefers-color-scheme: light) {
  .waffle-recipe {
    background-image: linear-gradient(160deg, #fff 50%, var(--main-color) 100%);
  }
}

@media (prefers-color-scheme: dark) {
  .waffle-recipe {
    background-image: linear-gradient(160deg, #000 50%, var(--main-color) 100%);
  }
}

h1 {
  padding-top: 0.5em;  
}

ul {
  list-style: none;
}