@font-face {
    font-family: "CeraProBlack";
    src: url(../fonts/Fontspring-DEMO-cerapro-black.otf);
  }
  
  @font-face {
    font-family: "CeraProBold";
    src: url(../fonts/Fontspring-DEMO-cerapro-bold.otf);
  }
  
  @font-face {
    font-family: "CeraProMedium";
    src: url(../fonts/Fontspring-DEMO-cerapro-medium.otf);
  }
  
  @font-face {
    font-family: "CeraProLight";
    src: url(../fonts/Fontspring-DEMO-cerapro-light.otf);
  }
  
  @font-face {
    font-family: "CeraProRegular";
    src: url(../fonts/Fontspring-DEMO-cerapro-regular.otf);
  }
  
  @font-face {
    font-family: "CeraProThin";
    src: url(../fonts/Fontspring-DEMO-cerapro-thin.otf);
  }
  
  :root {
    --link-color: #006db7;
    --nav-text-color: #747474;
    --button-background-color: #f8f8f8;
    --border-color: #e0e0e0;
    --accent-color: #ffd502;
    --link-border-color: #005ad2;
    --text-color: black;
    --background-color: white;
    --footer-background-color: rgb(32, 29, 72);
    --footer-button-background-color: rgb(24, 21, 45);
    --footer-button-background: rgb(81, 79, 104);
    --darkblue-background-color: #021c47;
    --form-button-color: rgb(233, 111, 20);
    --form-button-color-hover: #c9692b;
    --button-hover-background-color: #f6f6f6;
    --beschikbaarheid-text-color: #007133;
    --button-gallery-color: #00000099;
    --star-color: #fbab18;
    --button-background-color-nav:#f2f2f2;
    --red-color:#dd1a22;
    --background-color-carousel: #e0c570;
    --teller-background-color: white;
    --white-text: white;
    --summary-background-color: #f8f8f8;
    --text-color-black: black;
    --header-background-color: #f6f6f6;
    --header2-background-color: black;
  }


  @media (prefers-color-scheme: dark) {
    :root{
      --text-color:white;
      --background-color: black;
      --link-color: #0399ff;
      --teller-background-color: #1f1f1f;
      --button-gallery-color: rgb(194, 194, 194);
      --summary-background-color: #1f1f1f;
      --nav-text-color: #d1d1d1;
      --header-background-color: #1f1f1f;
      --header2-background-color: #1f1f1f;
    }
}

  
  @keyframes heartAnimation {
      25%  {transform: rotate(45deg);}
      75%  {transform: rotate(-45deg);}
      100% {transform: rotate(0deg);}
  }
  
  @media (prefers-reduced-motion: reduce) {
      html {
          transition: none !important;
          transform: none !important;
          animation: none !important;
          scroll-snap-type: none !important;
      }
  }

body > a{
  background-color: var(--border-color);
  position: absolute;
  right: 9999px;
  z-index: 2;
}

body > a:focus{
  right: 0px;
}
  
  nav article{
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 0;
      right: 9999px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: var(--background-color);
      overflow-x: hidden;
      transition: 0.3s;
  
      a {
          display: flex;
          justify-content: space-between;
          align-items: center;
          text-decoration: none;
          color: var(--text-color);
          transition: 0.3s;
          border-bottom: 1px solid var(--border-color);
          padding: 1rem 0;
          margin: 0 1rem;
          svg{
              height: 1em;
          }
        }
  
      img{
          height: 3rem;
      }
  
      a:nth-of-type(1){
          width: max-content;
      }
  
      a:nth-of-type(2){
          border-top: 3px solid var(--accent-color);
      }
  
      a:nth-of-type(5):hover, a:nth-of-type(7):hover, a:nth-of-type(9):hover, a:nth-of-type(5):focus, a:nth-of-type(7):focus, a:nth-of-type(9):focus{
          text-decoration: underline;
        }
      
      a:nth-of-type(2), a:nth-of-type(3), a:nth-of-type(4), a:nth-of-type(5){
          font-size: 1.8em;
          font-family: CeraProBold;
        }
  
      a:nth-of-type(6), a:nth-of-type(7), a:nth-of-type(8), a:nth-of-type(9){
          font-family: CeraProRegular;
        }
  
      a:nth-of-type(5){
          color: var(--red-color);
        }
  
      button {
          position: absolute;
          right: 0;
          top: 0;
          margin: 1em;
          border: none;
          border-radius: 5em;
          height: 3em;
          width: 3em;
          cursor: pointer;
          background-color: var(--button-background-color-nav);
        }
  
      button:hover, button:focus{
          background-color: var(--border-color);
          svg{
              animation: heartAnimation 0.5s;
          }
      }
  }
  
  body {
    margin: 0;
    font-family: "CeraProMedium";
  }
  
  header {
    background: var(--background-color);
    border-bottom-style: solid;
    border-color: var(--accent-color);
    z-index: 1;
    top: -80px;
    position: sticky;
    transition: top 0.5s ease;
   
  
      > nav{
      display: flex;
      align-items: center;
      padding: 0 0.5em 0 1em;
    }
  
    > nav > a img, > nav > ul > li > a svg{
      height: 2em;
    }

    > nav > a img, > nav > ul > li:nth-of-type(2) > a > svg{
      color: var(--text-color-black);
    }
  
    > nav > button svg{
      height: 1.5em;
      padding: 0 0.5em 0 0;
      color: var(--text-color);
    }
  
  }

  main{
    background-color: var(--background-color);
    h1{
      color: var(--text-color);
    }
  }
  
  main > nav {
    display: flex;
    padding: 1em 1em 1em 4em;
    gap: 1em;
    font-size: 0.8em;
  
    > a{
      text-decoration: none;
      color: var(--link-color);
    }
  
    > a:hover, > a:focus{
      text-decoration: underline;
    }
  
    p{
      margin: 0;
      color: var(--nav-text-color);
    }
  
    svg{
      height: 1em;
      color: var(--nav-text-color);
    }
  }
  
  nav{
      > button{
          background: none;
          border: none;
          font-size: 24px;
          cursor: pointer;
      }
  
      li a{
          font-size: 0.8em;
          text-decoration: none;
          color: var(--text-color);
      }
  
      article{
          display: flex;
          flex-direction: column;
          height: 100%;
          width: 0;
          right: 9999px;
          position: fixed;
          z-index: 1;
          top: 0;
          left: 0;
          background-color: var(--background-color);
          overflow-x: hidden;
          transition: 0.3s;
      
          a {
              display: flex;
              justify-content: space-between;
              align-items: center;
              text-decoration: none;
              color: var(--text-color);
              transition: 0.3s;
              border-bottom: 1px solid var(--border-color);
              padding: 1rem 0;
              margin: 0 1rem;
              svg{
                  height: 1em;
              }
            }
      
          img{
              height: 3rem;
          }
      
          a:nth-of-type(1){
              width: max-content;
          }
      
          a:nth-of-type(2){
              border-top: 3px solid var(--accent-color);
          }
      
          a:nth-of-type(5):hover, a:nth-of-type(7):hover, a:nth-of-type(9):hover, a:nth-of-type(5):focus, a:nth-of-type(7):focus, a:nth-of-type(9):focus{
              text-decoration: underline;
            }
          
          a:nth-of-type(2), a:nth-of-type(3), a:nth-of-type(4), a:nth-of-type(5){
              font-size: 1.8em;
              font-family: CeraProBold;
            }
      
          a:nth-of-type(6), a:nth-of-type(7), a:nth-of-type(8), a:nth-of-type(9){
              font-family: CeraProRegular;
            }
      
          a:nth-of-type(5){
              color: var(--red-color);
            }
      
          button {
              position: absolute;
              right: 0;
              top: 0;
              margin: 1em;
              border: none;
              border-radius: 5em;
              height: 3em;
              width: 3em;
              cursor: pointer;
              background-color: var(--button-background-color-nav);
            }
      
          button:hover, button:focus{
              background-color: var(--border-color);
              svg{
                  animation: heartAnimation 0.5s;
              }
          }
      }
    
  }
  
  ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    margin-left: auto;
  }
  footer {
    background-color: var(--footer-background-color);
    p {
      color: var(--white-text);
    }
    section:nth-child(1) {
      display: flex;
      flex-direction: row;
      gap: 1em;
      p {
          font-size: 1.5em;
          font-family: CeraProRegular;
          margin: 0;
      }
      svg {
          fill: var(--white-text);
          height: 2em;
        }
    }
    section:nth-child(2) ul {
      display: flex;
      flex-direction: column;
    }
    section:nth-child(3) p {
      font-family: CeraProMedium;
      margin-top: 1em;
    }
    section:nth-child(4) {
      padding: 1em 0 1em 0;
    }
    section:nth-child(5) {
      display: grid;
      grid-template-columns: 3em 3em 3em 3em;
      gap: 1em;
      p {
        grid-column-start: 1;
        grid-column-end: 5;
      }
      img {
        grid-row-start: 2;
        height: 3em;
      }
    }
    
    form {
      display: flex;
      flex-direction: row;
      width: 100%;
      label {
          text-align: left;
          font-size: 0.9em;
          font-family: CeraProMedium;
          color: var(--text-color);
        }
        input[type="email"] {
          padding: 1.5em 1.5em;
          border: none;
          font-family: CeraProRegular;
          width: 100%;
        }
        button {
          background-color: var(--form-button-color);
          border: none;
          padding: 1em 1.5em;
          border-radius: 0 6px 6px 0;
          font-family: CeraProBold;
          cursor: pointer;
          svg {
              height: 1.2em;
            }
        }
        svg {
          width: 1em;
          height: auto;
          fill: var(--teller-background-color);
        }
    }
    section:nth-child(6) {
      ul {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: flex-start;
          row-gap: 1.5em;
          padding-bottom: 2em;
      }
      a {
          font-size: 0.8em;
      }
      p {
          font-size: 0.9em;
          font-family: CeraProRegular;
          text-align: left;
          margin: 0;
          padding-bottom: 2em;
        }
  }
    section {
      padding: 2em 1em 0em 1em;
      article summary {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          border: none;
          border-top: 1px solid var(--white-text);
          cursor: pointer;
          background-color: var(--footer-background-color);
          color: var(--white);
          padding: 1em;
          font-family: CeraProBold;
          font-size: 1.2em;
          color: var(--white-text);
        }
        article summary:hover, article summary:focus {
          background-color: var(--footer-button-background);
        }
        article details ul {
          display: flex;
          flex-direction: column;
          gap: 0;
        }
        article details li {
          border-top: 1px solid var(--white-text);
          padding: 1em;
        }
        details svg {
          height: 1em;
        }
        > img {
          height: 75px;
        }
    }
    > section > button {
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      background-color: var(--footer-button-background-color);
      color: var(--text-color);
      height: 3em;
      justify-content: space-between;
      align-items: center;
      padding: 1em;
      font-size: 1em;
      font-family: CeraProRegular;
      color: var(--white-text);
    }
    li a {
      font-family: CeraProRegular;
      color: var(--white-text);
      text-decoration: none;
    }
    a:hover, a:focus {
      text-decoration: underline;
    }
  }
label{
    position: absolute;
    left: 9999999px;
}