@charset "UTF-8";
/* CSS Reset from http://meyerweb.com/ */
* {
  outline: 0;
}

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  line-height: 1;
  font-family: inherit;
  text-align: left;
}

a {
  -webkit-tap-highlight-color: #fff;
}

a img, :link img, :visited img {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ol, ul {
  list-style: none;
}

q:before, q:after,
blockquote:before, blockquote:after {
  content: "";
}

*:focus {
  outline: 0;
  outline: none;
}

body, html {
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
  z-index: 1;
}

/*======================================
	Mobile Mixin of Glory and Wonder
	--------------------------------

	This mixin is by far the easiest
	& cleanest way to deal with mobile-
	friendly sass rules.

	The most significant benefits are
	the ease of expansion (you can add
	as many breakpoints as you need),
	and the fact that all mobile
	friendly rules are applied in-line
	with original styles, rather than
	in separate stylesheets.

	-Josiah

======================================*/
/*
	Example 1
	---------
	reduce the font-size of headings on
	tablet resolutions and below with a
	single breakpoint:

	h1{

		font-size: 38pt;

		@include mq('tablet'){

			font-size: 22pt;

		}

	}//end h1

*/
/*
	Example 2
	---------
	Use multiple breakpoints to adjust
	various attributes of a container.

	section.wrap{

		padding: 40px;
		font-size: 18pt;
		margin-bottom: 40px;
		border: solid 1px $dark;

		@include mq('1280'){
			padding: 30px;
			font-size: 16px;
		}

		@include mq('tablet'){
			padding: 20px;
			font-size: 14px;
			margin-bottom: 30px;
		}

		@include mq('phone'){
			padding: 15px;
			font-size: 12px;
			margin-bottom: 20px;
		}

	}//end section.wrap

*/
/*
    Font Size Guide
    ==============
    ExtraLight 200
    Light 300
    Regular 400
    Bold 700 Italic
    Black 900
    Why am I doing this? Why not just make mixins. OK FINE.
*/
body {
  background: #fafafa;
  color: #2E2E2E;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  position: relative;
}
body ::selection {
  background: #2E2E2E;
  color: #FAFAFA;
}
body .content {
  width: 100%;
  max-width: 1024px;
}
@media only screen and (max-width: 1279px) {
  body .content {
    width: 90%;
  }
}
body header {
  margin-top: 32px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  body header {
    margin-top: 16px;
  }
}
body header a.logo {
  display: flex;
  width: 128px;
  height: 128px;
  margin-left: -52px;
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@media only screen and (max-width: 1279px) {
  body header a.logo {
    margin-left: 0px;
  }
}
@media only screen and (max-width: 767px) {
  body header a.logo {
    width: 64px;
    height: 64px;
  }
}
body header navigation {
  display: flex;
  flex-direction: row;
  gap: 16px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body header navigation a {
  display: flex;
  text-decoration: none;
  position: relative;
  color: rgba(46, 46, 46, 0.66);
  font-weight: 900;
  transition: color ease-in-out 0.25s;
  cursor: pointer;
}
body header navigation a:hover {
  color: rgba(46, 46, 46, 0.8);
}
body header navigation a.active {
  color: #2E2E2E;
}
body header navigation a.active:after {
  content: "👇";
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  top: 24px;
  left: calc(50% - 12px);
}
body hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 64px;
}
@media only screen and (max-width: 767px) {
  body hero {
    margin-top: 48px;
    margin-bottom: 32px;
  }
}
body hero h1 {
  font-weight: 900;
  font-size: 4rem;
  margin-bottom: 32px;
}
@media only screen and (max-width: 767px) {
  body hero h1 {
    font-size: 2rem;
    margin-bottom: 16px;
  }
}
body hero p {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  line-height: 2rem;
  width: 100%;
  max-width: 512px;
  text-align: center;
}
body hero p strong {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
}
body hero p a {
  display: inline-block;
  position: relative;
  color: #2E2E2E;
  text-decoration: none;
  z-index: 2;
  transition: color ease-in-out 0.25s;
}
body hero p a:after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 2px;
  background: #2398D5;
  transition: height ease-in-out 0.05s;
}
body hero p a:hover {
  color: #FAFAFA;
}
body hero p a:hover:after {
  transition: height ease-in-out 0.05s;
  height: 17px;
}
@media only screen and (max-width: 767px) {
  body hero p {
    width: 85%;
    font-size: 0.9rem;
    line-height: 1.5rem;
  }
}
body hero.mobile {
  margin-bottom: -32px;
  display: none;
}
@media only screen and (max-width: 767px) {
  body hero.mobile {
    display: flex;
  }
}

sp-image {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  height: 384px;
  background: darkblue;
  border-radius: 32px;
  overflow: hidden;
}

progress-bar#progress {
  --scrollAmount: 0%;
  display: block;
  background-image: linear-gradient(120deg, #28AAE1 0%, #28D2E1 100%);
  width: var(--scrollAmount);
  height: 5px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
@media only screen and (max-width: 767px) {
  progress-bar#progress {
    height: 2px;
  }
}

latest-update {
  background: #fefefe;
  border-radius: 32px;
  border: solid 1px rgba(46, 46, 46, 0.08);
  box-shadow: 0 3px 0px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  display: flex;
  width: 100%;
  margin-bottom: 32px;
}
@media only screen and (max-width: 767px) {
  latest-update {
    margin-bottom: 16px;
  }
}
latest-update a {
  display: flex;
  flex-direction: row;
  padding: 16px;
  color: #2E2E2E;
  text-decoration: none;
}
@media only screen and (max-width: 767px) {
  latest-update a {
    flex-direction: column;
  }
}
latest-update a update-image {
  display: flex;
  height: 320px;
  min-width: 480px;
  border-radius: 16px;
  overflow: hidden;
}
latest-update a update-image actual-image {
  display: block;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 1279px) {
  latest-update a update-image {
    min-width: 40%;
  }
}
@media only screen and (max-width: 767px) {
  latest-update a update-image {
    height: 192px;
  }
}
latest-update a update-meta {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
latest-update a update-meta h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
}
latest-update a update-meta h3 {
  line-height: 1.5rem;
  margin-bottom: 32px;
}
latest-update a update-meta h4 {
  font-size: 0.75rem;
}
@media only screen and (max-width: 767px) {
  latest-update a update-meta {
    padding: 16px;
  }
  latest-update a update-meta h2 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 16px;
  }
}
latest-update:hover {
  z-index: 3;
  transform: scale(1.05) rotate(0.5deg);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
latest-update.ok-go {
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.35s ease-in-out, border 0.35s ease-in-out;
}
latest-update.ok-go:hover {
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.35s ease-in-out, border 0.35s ease-in-out;
}

updates {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 64px;
  gap: 32px;
}
@media only screen and (max-width: 767px) {
  updates {
    gap: 16px;
  }
}
updates a {
  display: flex;
  flex-grow: 1;
  flex-basis: 25%;
  max-width: calc(33.3333333333% - 24px);
  z-index: 2;
  flex-direction: column;
  background: #fefefe;
  border-radius: 32px;
  border: solid 1px rgba(46, 46, 46, 0.08);
  box-shadow: 0 3px 0px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: #2E2E2E;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  updates a {
    flex-basis: 100%;
    max-width: 100%;
  }
}
updates a update-image {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 192px;
  overflow: hidden;
}
updates a update-image actual-image {
  display: block;
  border-radius: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}
updates a:hover {
  z-index: 3;
  transform: scale(1.05) rotate(0.5deg);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
updates a.ok-go, updates a:hover {
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.35s ease-in-out, border 0.35s ease-in-out;
}
updates update-meta {
  display: flex;
  flex-direction: column;
  padding: 16px 32px 32px 32px;
  gap: 16px;
}
updates update-meta h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
}
updates update-meta h4 {
  font-size: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

update-title {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
update-title h1 {
  margin-top: 32px;
  font-size: 3rem;
  line-height: 3.75rem;
  max-width: 960px;
  margin-bottom: 32px;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  text-align: center;
  position: relative;
}
@media only screen and (max-width: 767px) {
  update-title h1 {
    font-size: 1.75rem;
    line-height: 2.5rem;
  }
}
update-title h1 a {
  text-decoration: none;
  display: inline;
  line-height: 32px;
  vertical-align: middle;
  padding: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  top: -8px;
  font-size: 1.5rem;
  color: rgba(46, 46, 46, 0.33);
  transition: color ease-in-out 0.25s;
}
update-title h1 a:hover {
  color: #2E2E2E;
}
update-title p {
  margin-bottom: 32px;
}
update-title p, update-title h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  text-align: center;
  max-width: 75%;
  line-height: 2rem;
}
@media only screen and (max-width: 767px) {
  update-title p, update-title h3 {
    max-width: 100%;
  }
}
update-title h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  margin-bottom: 64px;
}
@media only screen and (max-width: 767px) {
  update-title h3 {
    margin-bottom: 32px;
    font-size: 0.75em;
  }
}

hero-image {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 1280px;
  border-radius: 32px;
}
hero-image img {
  width: 100%;
  border-radius: 32px;
}
@media only screen and (max-width: 767px) {
  hero-image img {
    width: 90%;
    border-radius: 16px;
  }
}

update-content {
  display: flex;
  flex-direction: column;
}
update-content h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  margin-bottom: 32px;
}
update-content p {
  line-height: 2rem;
  margin-bottom: 32px;
}
update-content p strong {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
}
update-content p a {
  display: inline-block;
  position: relative;
  color: #2E2E2E;
  text-decoration: none;
  z-index: 2;
  transition: color ease-in-out 0.25s;
}
update-content p a:after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 2px;
  background: #2398D5;
  transition: height ease-in-out 0.05s;
}
update-content p a:hover {
  color: #FAFAFA;
}
update-content p a:hover:after {
  transition: height ease-in-out 0.05s;
  height: 17px;
}
update-content blockquote {
  font-size: 3rem;
  line-height: 3.75rem;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  text-align: center;
  margin-bottom: 32px;
}
update-content blockquote footer {
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  padding: 0;
}
update-content blockquote footer:before {
  content: "-";
}
@media only screen and (max-width: 767px) {
  update-content blockquote {
    font-size: 2rem;
    line-height: 3rem;
  }
}
update-content pre {
  margin-bottom: 32px;
}
update-content pre code {
  border-radius: 16px;
  padding: 1.25rem !important;
  font-size: 0.8rem;
  line-height: 1.25rem;
  font-family: "IBM Plex Mono", monospace;
}
update-content ul {
  list-style-type: disc;
  margin-bottom: 32px;
}
update-content ul li {
  line-height: 32px;
  margin-left: 16px;
}
update-content ul li strong {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
}
update-content figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
  margin-left: 0px;
  width: 100%;
}
update-content figure img {
  width: 100%;
  border-radius: 32px;
}
@media only screen and (max-width: 767px) {
  update-content figure img {
    border-radius: 16px;
  }
}
update-content figure ul {
  display: flex;
  flex-direction: row;
}
update-content figure ul li {
  display: flex;
  flex-grow: 1;
}
update-content figure ul li img {
  height: auto;
  max-height: 250px;
}
update-content figure iframe {
  width: 100%;
  height: 580px;
  border-radius: 32px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  update-content figure iframe {
    width: 100%;
    border-radius: 16px;
    max-width: 390px;
    height: auto;
    min-height: 234px;
  }
}

about-me {
  display: flex;
  flex-direction: row;
  margin-top: 64px;
}
@media only screen and (max-width: 767px) {
  about-me {
    flex-direction: column;
    margin-top: 32px;
  }
}
about-me visage {
  display: flex;
  border-radius: 32px;
  overflow: hidden;
  min-width: 448px;
  height: 448px;
}
about-me visage img {
  width: 100%;
  max-width: 448px;
}
@media only screen and (max-width: 1279px) {
  about-me visage {
    transform: scale(0.8);
    margin-left: -32px;
    margin-top: -32px;
  }
}
@media only screen and (max-width: 767px) {
  about-me visage {
    transform: scale(1);
    min-width: 144px;
    width: 144px;
    max-width: 100%;
    height: auto;
    margin-left: -8px;
    margin-top: 0px;
  }
}
about-me greeting-and-details {
  display: flex;
  flex-direction: column;
  positon: relative;
}
@media only screen and (max-width: 767px) {
  about-me greeting-and-details {
    align-items: center;
  }
}
about-me greeting-and-details h1 {
  font-size: 4rem;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  margin: 16px 0 64px 64px;
}
@media only screen and (max-width: 1279px) {
  about-me greeting-and-details h1 {
    font-size: 3rem;
    margin: 32px 0 64px 32px;
  }
}
@media only screen and (max-width: 767px) {
  about-me greeting-and-details h1 {
    position: absolute;
    font-size: 2.15rem;
    left: 160px;
    top: 128px;
  }
}
about-me greeting-and-details blah-blah {
  background: rgba(254, 254, 254, 0.96);
  border-radius: 32px;
  border: solid 1px rgba(46, 46, 46, 0.08);
  box-shadow: 0 3px 0px rgba(0, 0, 0, 0.05);
  padding: 32px;
  z-index: 3;
  margin-left: -64px;
  margin-top: -16px;
  transform: translateZ(10px);
}
@media only screen and (max-width: 1279px) {
  about-me greeting-and-details blah-blah {
    margin-left: -128px;
    margin-top: -16px;
  }
}
@media only screen and (max-width: 767px) {
  about-me greeting-and-details blah-blah {
    margin-left: 0px;
    margin-top: -32px;
    padding: 16px;
    width: 85%;
    background: rgba(254, 254, 254, 0.96);
  }
}
about-me greeting-and-details blah-blah p {
  font-size: 1.45rem;
  line-height: 2rem;
  margin-bottom: 16px;
}
@media only screen and (max-width: 1279px) {
  about-me greeting-and-details blah-blah p {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media only screen and (max-width: 767px) {
  about-me greeting-and-details blah-blah p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
about-me greeting-and-details blah-blah p a {
  display: inline-block;
  position: relative;
  color: #2E2E2E;
  text-decoration: none;
  z-index: 2;
  transition: color ease-in-out 0.25s;
}
about-me greeting-and-details blah-blah p a:after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 2px;
  background: #2398D5;
  transition: height ease-in-out 0.05s;
}
about-me greeting-and-details blah-blah p a:hover {
  color: #FAFAFA;
}
about-me greeting-and-details blah-blah p a:hover:after {
  transition: height ease-in-out 0.05s;
  height: 24px;
}
about-me greeting-and-details blah-blah p strong {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
}
about-me greeting-and-details blah-blah p:last-child {
  margin-bottom: 0;
}

sharing-is-caring {
  border-top: solid 1px rgba(46, 46, 46, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 64px;
  padding-top: 64px;
}
sharing-is-caring > h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  text-align: center;
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 16px;
}
@media only screen and (max-width: 767px) {
  sharing-is-caring > h2 {
    font-size: 1.5rem;
    max-width: 70%;
    line-height: 1.75rem;
  }
}
sharing-is-caring > p {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  sharing-is-caring > p {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0 5%;
  }
}
sharing-is-caring shared {
  margin-top: 64px;
  column-count: 2;
  column-gap: 32px;
  height: fit-content;
}
@media only screen and (max-width: 767px) {
  sharing-is-caring shared {
    column-count: 1;
  }
}
sharing-is-caring shared mellon, sharing-is-caring shared tool {
  overflow: hidden; /* Fix for firefox and IE 10-11  */
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
  break-inside: avoid-column;
  margin-bottom: 32px;
  display: inline-flex;
  width: calc(100% - 66px);
  position: relative;
  padding: 32px;
  background: #FEFEFE;
  border-radius: 32px;
  border: solid 1px rgba(46, 46, 46, 0.15);
  box-shadow: 0 3px 0px rgba(0, 0, 0, 0.05);
  gap: 16px;
}
@media only screen and (max-width: 767px) {
  sharing-is-caring shared mellon, sharing-is-caring shared tool {
    padding: 24px;
    width: calc(100% - 50px);
    margin-bottom: 24px;
  }
}
sharing-is-caring shared mellon aThousandWords, sharing-is-caring shared tool aThousandWords {
  border-radius: 100px;
  min-height: 80px;
  max-height: 80px;
  min-width: 80px;
  max-width: 80px;
  overflow: hidden;
  border: solid 1px rgba(46, 46, 46, 0.15);
}
@media only screen and (max-width: 767px) {
  sharing-is-caring shared mellon aThousandWords, sharing-is-caring shared tool aThousandWords {
    min-height: 60px;
    max-height: 60px;
    min-width: 60px;
    max-width: 60px;
  }
}
sharing-is-caring shared mellon you-want-some-more, sharing-is-caring shared tool you-want-some-more {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media only screen and (max-width: 767px) {
  sharing-is-caring shared mellon you-want-some-more, sharing-is-caring shared tool you-want-some-more {
    gap: 4px;
  }
}
sharing-is-caring shared mellon you-want-some-more h2, sharing-is-caring shared tool you-want-some-more h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
}
@media only screen and (max-width: 767px) {
  sharing-is-caring shared mellon you-want-some-more h2, sharing-is-caring shared tool you-want-some-more h2 {
    font-size: 1.25rem;
  }
}
sharing-is-caring shared mellon you-want-some-more > p, sharing-is-caring shared tool you-want-some-more > p {
  line-height: 1.5rem;
}
@media only screen and (max-width: 767px) {
  sharing-is-caring shared mellon you-want-some-more > p, sharing-is-caring shared tool you-want-some-more > p {
    font-size: 0.8rem;
    line-height: 1.25rem;
  }
}
sharing-is-caring shared mellon you-want-some-more > p a, sharing-is-caring shared tool you-want-some-more > p a {
  display: inline-block;
  position: relative;
  color: #2E2E2E;
  text-decoration: none;
  z-index: 2;
  transition: color ease-in-out 0.25s;
}
sharing-is-caring shared mellon you-want-some-more > p a:after, sharing-is-caring shared tool you-want-some-more > p a:after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 2px;
  background: #2398D5;
  transition: height ease-in-out 0.05s;
}
sharing-is-caring shared mellon you-want-some-more > p a:hover, sharing-is-caring shared tool you-want-some-more > p a:hover {
  color: #FAFAFA;
}
sharing-is-caring shared mellon you-want-some-more > p a:hover:after, sharing-is-caring shared tool you-want-some-more > p a:hover:after {
  transition: height ease-in-out 0.05s;
  height: 17px;
}
sharing-is-caring shared mellon you-want-some-more > p strong, sharing-is-caring shared tool you-want-some-more > p strong {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
}

form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media only screen and (max-width: 767px) {
  form {
    gap: 16px;
  }
}
form fieldset {
  display: flex;
  flex-direction: row;
  gap: 32px;
}
@media only screen and (max-width: 767px) {
  form fieldset {
    flex-direction: column;
    gap: 16px;
  }
}
form fieldset fieldset {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}
form fieldset fieldset textarea {
  resize: none;
}
form fieldset fieldset input[type=text], form fieldset fieldset input[type=email], form fieldset fieldset textarea {
  border-radius: 16px;
  border: solid 1px rgba(46, 46, 46, 0.33);
  padding: 32px 16px 31px 16px;
  font-size: 1.5rem;
  background: none;
  color: rgba(46, 46, 46, 0.25);
  width: calc(100% - 34px);
  font-family: "Poppins", sans-serif;
  font-weight: 300;
}
@media only screen and (max-width: 767px) {
  form fieldset fieldset input[type=text], form fieldset fieldset input[type=email], form fieldset fieldset textarea {
    font-size: 1.25rem;
    border-radius: 8px;
  }
}
@media only screen and (max-width: 767px) {
  form fieldset fieldset input[type=text], form fieldset fieldset input[type=email], form fieldset fieldset textarea {
    padding: 16px 8px 15px 8px;
    width: calc(100% - 16px);
  }
}
form fieldset fieldset input[type=text]::placeholder, form fieldset fieldset input[type=email]::placeholder, form fieldset fieldset textarea::placeholder {
  visibility: hidden;
}
form fieldset fieldset input[type=text] + label, form fieldset fieldset input[type=email] + label, form fieldset fieldset textarea + label {
  position: absolute;
  display: block;
  top: 39px;
  left: 17px;
  font-size: 1.5rem;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  cursor: text;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0.33;
}
@media only screen and (max-width: 767px) {
  form fieldset fieldset input[type=text] + label, form fieldset fieldset input[type=email] + label, form fieldset fieldset textarea + label {
    top: 24px;
    font-size: 1.25rem;
  }
}
form fieldset fieldset input[type=text]:focus, form fieldset fieldset input[type=email]:focus, form fieldset fieldset textarea:focus {
  border: solid 4px #28D9E2;
  padding: 37px 13px 20px 13px;
  color: #2E2E2E;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
}
form fieldset fieldset input[type=text]:focus + label, form fieldset fieldset input[type=email]:focus + label, form fieldset fieldset textarea:focus + label {
  display: block;
  opacity: 0.33;
  top: 16px;
  left: 18px;
  font-size: 1rem;
  transition: opacity ease-in-out 0.1s, top ease-in-out 0.1s, left ease-in-out 0.1s, font-size ease-in-out 0.1s;
}
@media only screen and (max-width: 767px) {
  form fieldset fieldset input[type=text]:focus + label, form fieldset fieldset input[type=email]:focus + label, form fieldset fieldset textarea:focus + label {
    font-size: 0.75rem;
    top: 12px;
    left: 12px;
  }
}
@media only screen and (max-width: 767px) {
  form fieldset fieldset input[type=text]:focus, form fieldset fieldset input[type=email]:focus, form fieldset fieldset textarea:focus {
    padding: 17px 3px 8px 9px;
  }
}
form fieldset fieldset input[type=text]:not(:placeholder-shown):not(:focus), form fieldset fieldset input[type=email]:not(:placeholder-shown):not(:focus), form fieldset fieldset textarea:not(:placeholder-shown):not(:focus) {
  padding: 40px 16px 23px 16px;
  border: solid 1px #2E2E2E;
  color: #2E2E2E;
}
@media only screen and (max-width: 767px) {
  form fieldset fieldset input[type=text]:not(:placeholder-shown):not(:focus), form fieldset fieldset input[type=email]:not(:placeholder-shown):not(:focus), form fieldset fieldset textarea:not(:placeholder-shown):not(:focus) {
    padding: 20px 3px 11px 12px;
  }
}
form fieldset fieldset input[type=text]:not(:placeholder-shown):not(:focus) + label, form fieldset fieldset input[type=email]:not(:placeholder-shown):not(:focus) + label, form fieldset fieldset textarea:not(:placeholder-shown):not(:focus) + label {
  display: block;
  top: 16px;
  left: 18px;
  opacity: 0.33;
  font-size: 1rem;
  transition: opacity ease-in-out 0.1s, top ease-in-out 0.1s, left ease-in-out 0.1s, font-size ease-in-out 0.1s;
}
@media only screen and (max-width: 767px) {
  form fieldset fieldset input[type=text]:not(:placeholder-shown):not(:focus) + label, form fieldset fieldset input[type=email]:not(:placeholder-shown):not(:focus) + label, form fieldset fieldset textarea:not(:placeholder-shown):not(:focus) + label {
    font-size: 0.75rem;
    top: 12px;
    left: 12px;
  }
}
form fieldset fieldset input[type=text]:not(:placeholder-shown):not(:focus):invalid, form fieldset fieldset input[type=email]:not(:placeholder-shown):not(:focus):invalid, form fieldset fieldset textarea:not(:placeholder-shown):not(:focus):invalid {
  padding: 37px 13px 20px 13px;
  border: solid 4px #FF8159;
}
@media only screen and (max-width: 767px) {
  form fieldset fieldset input[type=text]:not(:placeholder-shown):not(:focus):invalid, form fieldset fieldset input[type=email]:not(:placeholder-shown):not(:focus):invalid, form fieldset fieldset textarea:not(:placeholder-shown):not(:focus):invalid {
    padding: 17px 3px 8px 9px;
  }
}
form fieldset fieldset input[type=text]:not(:placeholder-shown):not(:focus):invalid ~ validation-message, form fieldset fieldset input[type=email]:not(:placeholder-shown):not(:focus):invalid ~ validation-message, form fieldset fieldset textarea:not(:placeholder-shown):not(:focus):invalid ~ validation-message {
  display: block;
}
form fieldset fieldset input[type=text].ok-go, form fieldset fieldset input[type=email].ok-go, form fieldset fieldset textarea.ok-go {
  transition: border ease-in-out 0.15s, padding ease-in-out 0.15s;
}
form fieldset fieldset input[type=text].ok-go + label, form fieldset fieldset input[type=email].ok-go + label, form fieldset fieldset textarea.ok-go + label {
  transition: opacity ease-in-out 0.1s, top ease-in-out 0.1s, left ease-in-out 0.1s, font-size ease-in-out 0.1s;
}
form fieldset fieldset input[type=text].ok-go:focus, form fieldset fieldset input[type=email].ok-go:focus, form fieldset fieldset textarea.ok-go:focus {
  transition: border ease-in-out 0.15s, padding ease-in-out 0.15s;
}
form fieldset fieldset input[type=text].ok-go:focus + label, form fieldset fieldset input[type=email].ok-go:focus + label, form fieldset fieldset textarea.ok-go:focus + label {
  transition: opacity ease-in-out 0.1s, top ease-in-out 0.1s, left ease-in-out 0.1s, font-size ease-in-out 0.1s;
}
form fieldset fieldset validation-message {
  display: none;
  position: absolute;
}
form fieldset fieldset validation-message.name {
  width: 317px;
  height: 232px;
  background: url(/assets/images/validation-name.png) no-repeat center center;
  background-size: contain;
  bottom: calc(100% - 19px);
  left: -32px;
}
form fieldset fieldset validation-message.email {
  width: 333px;
  height: 232px;
  background: url(/assets/images/validation-email.png) no-repeat center center;
  background-size: contain;
  bottom: calc(100% - 5px);
  right: -50px;
}
form fieldset fieldset validation-message.message {
  width: 324px;
  height: 382px;
  background: url(/assets/images/validation-message.png) no-repeat center center;
  background-size: contain;
  left: calc(100% - 131px);
  bottom: calc(100% - 175px);
}
form button {
  height: 92px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(223.34deg, #27D9E1 14.9%, #2FC4D3 68.64%);
  box-shadow: 0 3px 0 rgba(46, 46, 46, 0.15);
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-size: 1.75rem;
  color: #FAFAFA;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  form button {
    border-radius: 8px;
  }
}
form button.ok-go {
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.35s ease-in-out, border 0.35s ease-in-out;
}
form button.ok-go:hover {
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.35s ease-in-out, border 0.35s ease-in-out;
  transform: scale(1.015);
  box-shadow: 0 15px 30px rgba(46, 46, 46, 0.25);
}

footer {
  padding: 64px 0;
}
footer copyright {
  font-size: 0.75rem;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
}