:root{

  --ff-p:"Euclid Circular B", sans-serif;
  --ff-s:"Playfair Display", serif;

  --c-1:hsl(270 50% 98%);
  --c-2:hsl(270 50% 80%);
  --c-3:hsl(270 50% 12%);
  --c-4:hsl(270 50% 94%);
  --c-5:hsl(270 50% 50%);

  --c-red:hsl(0 60% 50%);
  --c-red-1:hsl(0 60% 96%);

  --c-green:hsl(120 20% 40%);
  --c-green-1:hsl(120 50% 96%);

  --c-w:#fff;
  --c-b:#000;

  --img-loader-1:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">%0D%0A  <circle cx="50" cy="50" fill="none" stroke="hsl(0 0% 100%)" stroke-width="10" r="34" stroke-dasharray="164.93361431346415 56.97787143782138">%0D%0A    <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>%0D%0A  </circle>%0D%0A</svg>');

}

html{
  -webkit-tap-highlight-color:transparent;
}

body{
  margin:0;
  background-color:var(--c-1);
  font-family:var(--ff-p);
  font-size:16px;
  color:var(--c-3);
}

button, input, a{
  outline:none;
}

button{
  font-family:var(--ff-p);
  font-size:16px;
  text-transform:capitalize;
}

button.style-1{
  background-color:var(--c-2);
  border:1px solid var(--c-3);
  border-radius:6px;
  color:var(--c-3);
  box-shadow:4px 4px 0 0 var(--c-3);
}

button.style-1:hover{
  box-shadow:0px 0px 0 0 var(--c-3);
  transition:box-shadow 350ms linear;
}

button:focus:is(.style-1, .style-2, .style-3){
  border-style:dashed;
}

button:active:is(.style-1, .style-2, .style-3){
  transform:scale(0.9);
  transition:transform 350ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

button.style-2{
  border:1px solid var(--c-3);
  border-radius:6px;
  color:var(--c-3);
}

button.style-2:hover{
  background-color:var(--c-2);
  transition:background-color 350ms linear;
}

button.style-3{
  border-radius:6px;
  color:var(--c-3);
}

button.style-3:hover{
  background-color:var(--c-4);
  transition:background-color 350ms linear;
}

button.processing{
  background-image:var(--img-loader-1);
  background-position:96% center;
  background-size:20px;
  background-repeat:no-repeat;
}

div.style-1{
  --border-color:var(--c-2);
}

div.style-1 > input{
 font-family:var(--ff-p);
 font-size:16px;
 border-radius:6px;
}

div.style-1 > input:focus{
  border-color:var(--c-5);
}

div.style-1 > input:focus + label{
  color:var(--c-5);
}

span.website-icon{
  margin:auto;
  display:block;
  width:fit-content;
  user-select: none;
  font-family:var(--ff-s);
  font-style:italic;
  font-size:22px;
  letter-spacing:-1px;
  -webkit-text-stroke:0.5px var(--c-3);
}

span.website-icon > span:first-child{
  font-weight:700;
  -webkit-text-fill-color:var(--c-2);
}

span.website-icon > span:last-child{
  -webkit-text-fill-color:transparent;
}

main > section{
  padding:64px 128px;
  box-sizing:border-box;
}

div.status-message-box{
  user-select: none;
  margin-bottom:32px;
  height:32px;
  display:none;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:4px 2px 4px 8px;
  border:1px solid var(--c-1);
  border-radius:4px;
  background-color:var(--c-2);
  color:var(--c-1);
  font-size:12px;
  line-height:12px;
  box-sizing:border-box;
}

div.status-message-box.show{
  display:flex;
}

div.status-message-box > span:last-child{
  cursor: pointer;
  display:block;
}

div.status-message-box > span:last-child > span{
  cursor: pointer;
  --size:16;
  --color:var(--c-1);
}

div.status-message-box.error{
  --c-1:var(--c-red);
  --c-2:var(--c-red-1);
}

div.status-message-box.success{
  --c-1:var(--c-green);
  --c-2:var(--c-green-1);
}

[class*="remixicon"]:is(span, i){
  --size:20;
  --color:var(--c-3);
}

div.preloader{
  height:100vh;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--c-1);
  box-sizing:border-box;
  position:fixed;
  top:0;
  left:0;
  z-index:100;
}

div.preloader ~ *{
  visibility:hidden;
}

div.preloader > span.loader{
  display:block;
  width:20px;
  height:20px;
  border:2px solid var(--c-5);
  border-top:2px solid var(--c-1);
  border-radius:50%;
  box-sizing:border-box;
  animation: spin 1s linear 0s infinite;
}

@keyframes spin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}


@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait){

  main > section{
    padding:64px;
  }

}

@media only screen and (max-width:767px) and (orientation:portrait){

  span.website-icon.respo > span > span{
    display:none;
  }

  main > section{
    padding:64px 32px;
  }

}