@import url("https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Display:wght@400..800&display=swap");

@font-face {
  font-family: "Blanka";
  src: url("../fonts/Blanka-Regular.otf") format("opentype");
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
	--primary: #000;
	--secondary: #007683;
	--white: #fff;

  --font-title: "Blanka", sans-serif;
  --font-text: "Wix Madefor Display", sans-serif;
}

/*---------------------------------------------
			style errors
---------------------------------------------*/

.page-builder {
  top: 0px;
  width: 100%;
  height: auto;
  min-height: 100vh;
  background-color: var(--white);
  position: relative;
}

.container {
  width: 100%;
  max-width: 800px;
  height: auto;
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 20px;
}

.text {
  width: 100%;
  height: auto;
  position: relative;
  text-align: center;
}

.text img {
  width: 100%;
  max-width: 250px;
  height: auto;
  object-fit: contain;
  margin-bottom: 4em;
	animation: logo 3s linear infinite, backInDown 1s ease-in-out;
}

.text h2 {
  top: 0;
  width: 100%;
	min-width: 100px;
  height: auto;
  position: relative;
  font-family: var(--font-title);
  font-weight: 500;
  line-height: 1.5em;
  color: var(--primary);
  font-size: clamp(30px, 5vw, 3rem);
  margin-bottom: 40px;
	text-transform: uppercase;
	animation: jello 2s backwards;
	text-overflow: ellipsis;
	white-space: wrap;
	overflow: hidden;
}

.text h2 span {
	color: var(--secondary);
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.align-items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.text p {
  top: 0;
  width: 100%;
  height: auto;
  position: relative;
  font-family: var(--font-text);
  font-weight: 300;
  color: var(--primary);
  font-size: clamp(15px, 2vw, 1.2rem);
}

.button {
  top: 0;
  width: 90%;
  height: auto;
  position: relative;
  margin: 0 auto;
  margin-top: 4em;
  text-align: center;
	animation: headShake 1s infinite ease-in-out,
	backInUp 1s ease-in-out;

}

.button a {
  padding: 0.5em 2em;
  color: var(--white);
  background-color: var(--primary);
  text-decoration: none;
  font-family: var(--font-text);
  font-weight: 300;
  font-size: clamp(15px, 2vw, 1.2rem);
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  display: inline-block;
}

.button a:hover {
  background-color: var(--secondary);
}

/* --- animations --- */

@keyframes logo {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.08);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes jello {
  11.1% {
    transform: none
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg)
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg)
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg)
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg)
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg)
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg)
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
  }
  100% {
    transform: none
  }
}

@keyframes backInUp {
	0% {
		opacity: 0;
		transform: translateY(80px) scale(1.1);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes backInDown {
	0% {
		opacity: 0;
		transform: translateY(-80px) scale(1.1);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes headShake {
	0% {
		transform: translateX(0);
	}
	6.5% {
		transform: translateX(-6px) rotateY(-9deg);
	}
	18.5% {
		transform: translateX(5px) rotateY(7deg);
	}
	31.5% {
		transform: translateX(-3px) rotateY(-5deg);
	}
	43.5% {
		transform: translateX(2px) rotateY(3deg);
	}
	50% {
		transform: translateX(0);
	}
}

/* --- responsive of errors --- */

@media screen and (max-width: 800px) {
  .text img {
		max-width: 150px;
	}
}