/*!
Theme Name: CleanLaundry
Author: Internet Agentur Scherer
Author URI: https://www.ia-scherer.de
*/


/***************************************************/
/*	Schriften                                      */
/***************************************************/

/* poppins-100 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/poppins-v22-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-100italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 100;
    src: url('../fonts/poppins-v22-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-200 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/poppins-v22-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-200italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 200;
    src: url('../fonts/poppins-v22-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-300 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/poppins-v22-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-300italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/poppins-v22-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/poppins-v22-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/poppins-v22-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-500italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/poppins-v22-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-600italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/poppins-v22-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/poppins-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-700italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/poppins-v22-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-800 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/poppins-v22-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-800italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 800;
    src: url('../fonts/poppins-v22-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-900 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/poppins-v22-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-900italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/poppins-v22-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

/***************************************************/
/*	Layout                                         */
/***************************************************/

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body,
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  background: white;
}

h1 {
  --background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: url("../img/hotel-industry.webp");
  background-position: center !important;
  font-size: 140pt;
  line-height: 180pt;
  margin: 0;
  font-weight: 900;
  color: transparent;
  animation: images 5s linear infinite;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  overflow: visible;
  z-index: 1;
}

h1::before {
  position: absolute;
  width: calc(100% + 90px);
  height: calc(100% + 20px);
  content: "";
  z-index: -3;
  border-radius: 30px;
  background: transparent;
  border: 5px solid var(--background);
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 30px inset;
}

h1::after {
  position: absolute;
  width: calc(100% + 70px);
  height: 100%;
  content: "";
  background: var(--background);
  mix-blend-mode: hue;
  border-radius: 30px;
  filter: blur(50px);
  z-index: -1;
}

/* Be sure to include the font links in the <head>. Change fonts and colors here*/

@keyframes images {
  0% {
    --background: red;
    background: url("../img/hospital.webp");
    font-family: "Poppins", sans-serif;
    letter-spacing: -15px;
    background-size: 50%;
  }
  9.9% {
    /* All the keyframes at *.9% prevent images from "fading" between each slide, creates instant change. Also provides background image zoom. */
    --background: red;
    background: url("../img/hotel-industry.webp");
    font-family: "Poppins", sans-serif;
    background-size: 100%;
  }
  10% {
    --background: darkorange;
    background: url("../img/wellness.webp");
    font-family: "Work Sans", sans-serif;
    background-size: 50%;
  }
  19.9% {
    --background: darkorange;
    background: url("../img/industry.webp");
    font-family: "Work Sans", sans-serif;
    font-weight: 800;
    background-size: 100%;
  }
  20% {
    --background: gold;
    background: url("../img/laundry.webp");
    font-family: "Azeret Mono", monospace;
    background-size: 50%;
  }
  29.9% {
    --background: gold;
    background: url("../img/gastronomy.webp");
    font-family: "Azeret Mono", monospace;
    background-size: 100%;
  }
  30% {
    --background: chartreuse;
    background: url("../img/service.webp");
    font-family: "Barlow", sans-serif;
    background-size: 50%;
  }
  39.9% {
    --background: chartreuse;
    background: url("../img/certificate.webp");
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    background-size: 100%;
  }
  40% {
    --background: deepskyblue;
    background: url("../img/rehabilitation.webp");
    font-family: "Jost", sans-serif;
    background-size: 50%;
  }
  49.9% {
    --background: deepskyblue;
    background: url("../img/craft.webp");
    font-family: "Jost", sans-serif;
    background-size: 100%;
  }
  50% {
    --background: rebeccapurple;
    background: url("../img/forrest.webp");
    font-family: "Kanit", sans-serif;
    background-size: 50%;
  }
  59.9% {
    --background: rebeccapurple;
    background: url("../img/laundry.webp");
    font-family: "Kanit", sans-serif;
    background-size: 100%;
  }
  60% {
    --background: mediumspringgreen;
    background: url("../img/hotel.webp");
    font-family: "Petrona", serif;
    background-size: 50%;
  }
  69.9% {
    --background: mediumspringgreen;
    background: url("../img/environment.webp");
    font-family: "Petrona", serif;
    background-size: 100%;
  }
  70% {
    --background: lightsalmon;
    background: url("../img/hospital.webp");
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    background-size: 50%;
  }
  79.9% {
    --background: lightsalmon;
    background: url("../img/support.webp");
    font-family: "Raleway", sans-serif;
    background-size: 100%;
  }
  80% {
    --background: deeppink;
    background: url("../img/textile.webp");
    font-family: "Tomorrow", sans-serif;
    background-size: 50%;
    letter-spacing: 0px;
  }
  89.9% {
    --background: deeppink;
    background: url("../img/nursing-home.webp");
    font-family: "Tomorrow", sans-serif;
    background-size: 100%;
  }
  90% {
    --background: darkblue;
    background: url("../img/company.webp");
    font-family: "Fira Sans", sans-serif;
    font-weight: 900;
    background-size: 50%;
  }
  99.9% {
    --background: darkblue;
    background: url("../img/certified.webp");
    font-family: "Fira Sans", sans-serif;
    background-size: 100%;
  }
  100% {
    --background: red;
    background: url("../img/rest-home.webp");
    font-family: "Poppins", sans-serif;
    background-size: 50%;
    letter-spacing: -15px;
  }
}

/* Responsivity; breakpoints will need to be changed based on your text length.*/

@media (max-width: 1500px) {
  h1 {
    font-size: 100pt;
    line-height: 130pt;
    font-weight: 400;
  }
}

@media (max-width: 1050px) {
  h1 {
    font-size: 70pt;
    line-height: 90pt;
  }
  h1::after {
    filter: blur(30px);
  }
}

@media (max-width: 750px) {
  h1 {
    font-size: 50pt;
    line-height: 64pt;
  }
  h1::after {
    border-radius: 20px;
  }
}

@media (max-width: 550px) {
  h1 {
    font-size: 34pt;
    line-height: 44pt;
  }
  h1::before {
    width: calc(100% + 50px);
    border-radius: 10px;
  }
  h1::after {
    width: calc(100% + 30px);
    border-radius: 10px;
  }
  p {
    font-size: 24pt;
    line-height: 44pt;
    text-align: center;
  }
  p::before {
    width: calc(100% + 50px);
    border-radius: 10px;
  }
  p::after {
    width: calc(100% + 30px);
    border-radius: 10px;
  }
}

/* preloader. remove if not using the preloader, or to break everything */

code,
code * {
  width: 0;
  height: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
}