website/themes/cozy-hugo/assets/css/main.scss

:root {
    --background: rgb(255, 255, 230);
    --background-header: rgb(250, 220, 120);
    --background-nav: rgb(252.5, 237.5, 175);
    --text: rgb(50, 50, 50);
    --sphere: rgb(245, 180, 100);
    --hill: rgb(50, 235, 150);
    --hillshade: rgb(40, 160, 100);
    --image-decorative-blend: initial;
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --background: rgb(0, 45, 60);
      --background-header: rgb(0, 70, 100);
      --background-nav: rgb(0, 62.5, 80);
      --text: rgb(255, 255, 255);
      --sphere: rgb(105, 210, 255);
      --hill: rgb(0, 95, 135);
      --hillshade: rgb(0, 45, 60);
      --image-decorative-blend: luminosity;
    }
  }
  
  * {
    box-sizing: border-box;
    scrollbar-color: var(--sphere) var(--background-header);
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  a {
    color: var(--text);
    text-underline-offset: 3px;
    transition: text-decoration-color .15s ease;
  }
  
  a:hover {
    text-decoration-color: var(--sphere);
  }
  
  body {
    background-color: var(--background);
    color: var(--text);
    font-family: 'Lucida Console', 'Courier New', monospace;
    hyphens: auto;
    line-height: 1.8;
    margin: 0;
  }
  
  header {
    background-blend-mode: var(--image-decorative-blend);
    background-color: var(--background-header);
    background-image: url(home-header-optimized.svg);
    background-position: center;
    color: var(--text);
    display: flex;
    flex-direction: column;
    height: 40vh;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  
  header h1 {
    font-size: 3.6em;
    line-height: .9em;
    margin: 0;
    z-index: 10;
  }
  
  header p {
    margin: 0;
    z-index: 10;
  }
  
  header #sphere {
    background: var(--sphere);
    border-radius: 100%;
    display: none;
    height: 10vh;
    left: 30vw;
    position: absolute;
    top: 3vh;
    width: 10vh;
  }
  
  header #hill {
    background: var(--hill);
    border-radius: 40px;
    bottom: 0;
    display: none;
    height: 40vh;
    left: 50vw;
    position: absolute;
    transform: rotate(45deg) translate(50%, 50%);
    width: 40vh;
  }
  
  header #hillshade {
    background: var(--hillshade);
    border-radius: 80px;
    bottom: -5vh;
    display: none;
    height: 40vh;
    left: 30vw;
    position: absolute;
    transform: rotate(45deg) translate(50%, 50%);
    width: 40vh;
  }
  
  #header-background {
    height: 100%;
    position: absolute;
    align-self: center;
  }
  
  body > nav {
    align-items: center;
    background: var(--background-nav);
    border-radius: 10px;
    display: flex;
    gap: 20px;
    height: 60px;
    justify-content: center;
    margin: 0px 20px -30px 20px;
    position: relative;
    top: -30px;
  }
  
  .width-1200 {
    margin: 0 auto;
    max-width: 1200px;
  }

  main section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }
  
  main article {
    background: var(--background-header);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 10px 10px 0px 0px;
    display: flex;
    flex-direction: column;
    padding: 40px;
    transition: box-shadow .3s ease, transform .3s ease;
  }
  
  main article:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 10px 15px 0px 0px;
    transform: translate(0, -5px);
  }
  
  main article a {
    background: var(--background);
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 0px 0px;
    color: var(--text);
    display: inline-block;
    font-weight: bold;
    padding: 10px 14px;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
  }
  
  main article a:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 2.5px 2.5px 0px 0px;
    transform: translate(2.5px, 2.5px);
  }
  
  main article a:active {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 0px;
    transform: translate(5px, 5px);
  }
  
  main article h2 {
    font-size: 1.8em;
    line-height: normal;
    margin: 0;
  }
  
  main article p {
    margin: 20px 0;
  }
  
  main article nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    hyphens: none;
    margin-top: auto;
  }
  
  footer {
    margin-top: 20px !important;
    text-align: center;
  }
  
  /*footer p, footer a {
      text-align: center;
      color: rgb(80, 150, 190);
  }*/
  
  @media (max-width: 1000px) {
    header hill {
      transform: rotate(45deg) translate(40%, 70%);
    }
    header hillshade {
      transform: rotate(45deg) translate(20%, 80%);
    }
    section#dienste {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 600px) {
    section#dienste {
      grid-template-columns: repeat(1, 1fr);
    }
  }
  
  @media (prefers-color-scheme: dark) {
    header #sphere {
      left: unset;
      right: 30vw;
    }
  }