@font-face{
  font-family: 'Kombin';
  src: url('../fonts/kombin/Kombin.ttf') format('ttf'),
    url('../fonts/kombin/Kombin.woff') format('woff'),
    url('../fonts/kombin/Kombin.woff2') format('woff2');
  font-style: normal;
  font-display: swap; 
}

@font-face{
  font-family: 'Fraunces';
  src: url('../fonts/fraunces/Fraunces-VariableFont.ttf') format('ttf'),
    url('../fonts/fraunces/Fraunces-VariableFont.woff2') format('woff2');
  font-style: normal;
  font-display: swap;   
}

@font-face{
  font-family: 'Fraunces';
  src: url('../fonts/fraunces/Fraunces-Italic-VariableFont.ttf') format('ttf'),
    url('../fonts/fraunces/Fraunces-Italic-VariableFont.woff2') format('woff2');
  font-style: italic;   
  font-display: swap;
}

:root{
  --text: #333;
  --martian-background: #F9F7F3;
  --martian-light-gray: #F4F4EE;
  --martian-light-salmon: #FF8882;
  --martian-vivid-salmon: #FF5C54;
  --martian-vivid-purple: #9E2EAD;
  --martian-purple: #75297F;
  --martian-dark-purple: #5B2467;

  --headings: 'Kombin', 'Fraunces', serif;
  --headings-height: 112%;

  --h1-xxl: 2.886rem;
  --h1-xl: 2.566rem;
  --h1-l: 2.281rem;
  --h1: 2.025rem;
  --h2: 1.8rem;
  --h3: 1.6rem;
  --h4: 1.419rem;
  --h5: 1.263rem;
  --h6: 1.125rem;

  --paragraphs: 'Fraunces', sans-serif;
  --paragraphs-height: 150%;

  --p-xl: 1.6rem;
  --p-l: 1.375rem;
  --p-m: 1.263rem;
  --p-base: 1.125rem;
  --p-s: 1rem;

  --fade: all .4s ease;
  --fade-in: fadeIn 3s;
}

*{
  box-sizing: border-box;
}

html{
  background-color: var(--martian-dark-purple);
  color: var(--text);
  font-family: var(--paragraphs);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "SOFT" 0,
    "WONK" 0;
  scroll-behavior: smooth;   
}

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-display: swap; 
}

::selection, -moz-selection{
  color: var(--martian-dark-purple);
  background-color: var(--martian-light-salmon);
}

@keyframes down {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(15%);
  }
  100%{
    transform: translateY(0);
  }
}

.hidden-xs{
  display: none;
}

.visible-xs{
  display: block;
}

h1, h2, h3{
  margin: 0;
  color: var(--martian-vivid-purple);
  font-family: var(--headings);
  font-weight: normal;
  line-height: var(--headings-height);
}

/* Uikit */
figure{
  margin: 0;
}

a{
  color: var(--martian-vivid-salmon);
  font-weight: 600;
  transition: var(--fade);
}

a:hover{
  color: var(--martian-vivid-purple);
}

p, label, li{
  margin: 0;
  color: var(--martian-dark-purple);
  line-height: var(--paragraphs-height);  
}

em{
  color: inherit;
}

ul{
  margin-bottom: var(--p-base);
  padding-left: 1rem;
}

label{
  display: block;
  color: var(--martian-vivid-purple);
  font-family: var(--headings);
  font-size: var(--m);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 24%;
  margin-bottom: .5rem;
}

label:has(+ input:focus-visible), label:has(+ textarea:focus-visible) {
  color: var(--martian-vivid-salmon);
  transition: var(--fade);
}

input, textarea{
  display: block;
  width: 100%;
  border: transparent;
  border-bottom: 1px solid var(--martian-dark-purple);
  padding: .5rem .75rem;
  background-color: transparent;
  color: var(--martian-dark-purple);
  margin-bottom: 1.5rem;
  transition: all .2s ease-out;
}

input:focus, textarea:focus{
  background-color: var(--martian-background);
  outline: 2px dotted var(--martian-vivid-salmon);
  color: var(--martian-dark-purple);
}

textarea{
  resize: vertical;
  margin-bottom: 2rem;
  line-height: 150%;
}

button, .button{
  background-color: var(--martian-vivid-salmon);
  color: #fff;
  border: none;
  border-radius: .375rem;
  padding: .75rem 1.5rem;
  font-family: var(--headings);
  font-size: var(--p-m);
  text-transform: uppercase;
  letter-spacing: 24%;
  cursor: pointer;
  margin-bottom: 1.5rem;
  width: 100%;
  transition: var(--fade);
}

button:hover, button:focus, .button:hover, .button:focus{
  background-color: var(--martian-vivid-purple);
  color: var(--martian-vivid-salmon);
  text-decoration: none;
}

button:focus, .button:focus{
  outline: 2px dotted var(--martian-vivid-salmon);
  text-decoration: none;
}

button:active, button:active, .button:active, .button:active{
  background-color: var(--martian-dark-purple);
  text-decoration: none;
}

.button{
  display: inline-block;
  text-align: center;
}

/* Header */

header, .main-container, .footer-container{
  padding: 0 1.5rem;
  margin: 0 auto;
}

header{
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  scroll-behavior: smooth;
}

.thanks-container, .unconfirm-confirm-container{
  display: flex;
  height: 98vh;
  align-items: center;  
}

.thanks{
  text-align: center;
}

.thanks .logo{
  margin-bottom: 1.5rem;
}

.unconfirm-confirm{
  text-align: left;
}

.unconfirm-confirm, .confirm h1{
  max-width: 50rem;
  font-size: var(--h1-l);
}

.unconfirm-confirm p, .unconfirm-confirm ul{
  font-size: var(--p-m);
  margin-bottom: var(--p-base);
}

.down{
  font-size: 4.11rem;
  color: var(--martian-light-gray);
  position: relative;
  z-index: 10;
  bottom: 6.5rem;
  animation: down 3s ease infinite;
}

.down:hover{
  text-decoration: none;
  color: var(--martian-vivid-salmon);
  transition: color .5s ease;
}

header h1{
  font-size: var(--h1-l);
  margin-bottom: 1rem;
}

.thanks h1{
  margin-bottom: 1rem;
}

.thanks p{
  margin-bottom: 1.5rem;
}

header p{
  font-size: var(--p-m);
  margin-bottom: var(--p-base);
}

header p:last-child{
  margin-bottom: 0;
}

header .logo{
  width: 9rem;
  height: 9.188rem;
}

header .logo, footer .email{
  margin: 0 auto 1.5rem auto;
}

header .logo img, footer .email img{
  width: 100%;
  height: auto;
}

/* Main */

main{
  background-color: var(--martian-light-gray);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

main h2{
  font-size: var(--h2);
  margin-bottom: 1rem;
}

main p{
  font-size: var(--p-m);
  margin-bottom: 3rem;
}

main h2 span:before{
  content: "\e902";
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.note{
  font-size: var(--p-s);
}

/* Footer */

footer{
  padding-top: 3rem;
  padding-bottom: 6rem;
  background-color: var(--martian-purple);
}

footer .email{
  width: 11rem;
  height: 12.375rem;
}

footer h3, footer label, footer p{
  color: var(--martian-background);
}

footer h3{
  font-size: var(--h2);
  margin-bottom: 1.5rem;
}

footer input{
  border-bottom: 1px solid var(--martian-background);
  color: var(--martian-background);
}

footer input:focus{
  background-color: var(--martian-vivid-purple);
  color: var(--martian-background);
}

/*Smallchat*/

#Smallchat .Layout{
  background-color: #FF5C54 !important;
}

#Smallchat .Launcher:hover{
  background-color: #9E2EAD !important;
}

#Smallchat .Launcher-icon{
  background-color: #FF5C54 !important;
}

#Smallchat .Launcher-icon:hover{
  background-color: #9E2EAD !important;
}

#chaticon{
  fill: #F9F7F3 !important;
}

#Smallchat .Launcher-icon:hover #chaticon{
  fill: #FF5C54 !important;
}

/* Uikit */

.uk-slideshow{
  margin-bottom: 1.5rem;
}

.uk-slideshow-items{
  border-radius: 0.75rem;
}

.uk-slideshow-items img{
  width: 100%;
  height: auto;
}

.uk-alert{
  background-color: var(--martian-dark-purple);
  padding: 1.25rem 3.5rem 1.25rem 1.5rem;
  margin-bottom: 0;
}

.uk-alert p{
  color: var(--martian-background);
  font-size: var(--p-base);
}

.uk-alert-close{
  top: 1.5rem;
  right: 1.5rem;
  color: var(--martian-background);
  cursor: pointer;
  opacity: 1;
  font-size: var(--p-s);
  width: inherit;
  background-color: transparent;
  transition: none;
}

.uk-alert-close:hover{
  text-decoration: none;
  opacity: 1;
  color: var(--martian-vivid-salmon);
}

.uk-alert-close:focus{
  outline: 2px dotted var(--martian-vivid-salmon);
  color: var(--martian-vivid-salmon);
}

.uk-alert-close svg{
  display: none;
}


@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon/icomoon.eot?tkomqn');
  src:  url('../fonts/icomoon/icomoon.eot?tkomqn#iefix') format('embedded-opentype'),
    url('../fonts/icomoon/icomoon.ttf?tkomqn') format('truetype'),
    url('../fonts/icomoon/icomoon.woff?tkomqn') format('woff'),
    url('../fonts/icomoon/icomoon.svg?tkomqn#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
  font-display: swap;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-prev:before {
  content: "\e900";
}
.icon-next:before {
  content: "\e901";
}
.icon-smallchat:before {
  content: "\e902";
}
.icon-arrow-down:before {
  content: "\e903";
}
.icon-close:before {
  content: "\e904";
}