@font-face {
  font-family: 'Sanvito Pro Regular';
  font-display: block;
  src: url('/fonts/SanvitoPro-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Sanvito Pro Semibold Capt';
  font-display: block;
  src: url('/fonts/SanvitoPro-SemiboldCapt.woff2') format('woff2');
}

@font-face {
  font-family: 'Sanvito Pro Semibold Disp';
  font-display: block;
  src: url('/fonts/SanvitoPro-SemiboldDisp.woff2') format('woff2');
}

@font-face {
  font-family: 'Sanvito Pro Semibold Subh';
  font-display: block;
  src: url('/fonts/SanvitoPro-SemiboldSubh.woff2') format('woff2');
}

@font-face {
  font-family: 'Sanvito Pro Subh';
  font-display: block;
  src: url('/fonts/SanvitoPro-Subh.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/Lato-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  --Primary: hsl(4, 82%, 20%);
  --Primary_Variant: hsl(4, 100%, 45%);
  --Primary_Hover: hsl(4, 83%, 26%);
  --Primary_Active: hsl(4, 83%, 32%);
  --Background: black;

  /* Color Palette */
  --turquois: hsl(191.2, 90.6%, 58.2%);
  --blue: hsl(227, 59%, 38%);
  --lightblue: hsl(227.0, 59.6%, 55.8%);
  --lightBlue: hsl(227, 59%, 68%);
  --green: hsl(144.0, 70.5%, 30.6%);
  --purple: hsl(281.0, 55.6%, 42.4%);
  --orange: hsl(30, 100%, 43.0%);
  --lightOrange: hsl(30, 100%, 55.0%);
  --yellow: hsl(50.0, 100%, 45.0%);
  --red: hsl(353.9, 91.7%, 30.8%);
  --pink: hsl(330.0, 75.0%, 55.0%);
  --teal: hsl(174.0, 66.7%, 44.0%);
  --magenta: hsl(300.0, 70.0%, 45.0%);
  --olive: hsl(60.0, 56.0%, 40.0%);
  --cyan: hsl(182, 97%, 43%);

  --Font_Color: hsl(0, 0%, 85%);
  --Font_Color_Post: hsl(0, 0%, 70%);
  --Font_Color_Disabled: hsl(0, 0%, 45%);
  --Font_Color_Label: hsl(0, 0%, 55%);
  --Font_Color_Error: #ff9100;
  --Font_Color_Success: hsl(120, 100%, 25%);
  --Font_Color_Warning: hsl(25, 100%, 40%);
  --Font_Color_Link: hsl(201, 100%, 80%);

  --Surface: hsl(0, 0%, 16%);
  --Surface_1: hsl(0, 0%, 25%); /* hover */
  --Surface_2: hsl(0, 0%, 34%); /* active */
  --Surface_3: hsl(0, 0%, 50%);
  --Surface_4: hsl(0, 0%, 70%);

  --Outline: 0 0 0 2px var(--Surface_4);
  --Outline_Hover: 0 0 0 2px var(--Surface_4);
  --Outline_Focus: 0 0 0 2px var(--Surface_4);
  --Outline_Primary: 0 0 0 2px var(--Primary);
  --Outline_Primary_Hover: 0 0 0 2px var(--Primary_Hover);
  --Outline_Primary_Variant: 0 0 0 2px var(--Primary_Variant);
  --Outline_Error: 0 0 0 2px var(--Font_Color_Error);
  --Outline_Disabled: 0 0 0 2px var(--Font_Color_Disabled);
  --Outline_Success: 0 0 0 2px var(--Font_Color_Success);
  --Outline_Small: 0 0 0 1.3px var(--Surface_4);

  --Outline_Hover_Small: 0 0 0 1.3px var(--Surface_4);
  --Outline_Focus_Small: 0 0 0 1.3px var(--Surface_4);
  --Outline_Primary_Small: 0 0 0 1.3px var(--Primary);
  --Outline_Primary_Hover_Small: 0 0 0 1.3px var(--Primary_Hover);
  --Outline_Primary_Variant_Small: 0 0 0 1.3px var(--Primary_Variant);
  --Outline_Error_Small: 0 0 0 1.3px var(--Font_Color_Error);
  --Outline_Disabled_Small: 0 0 0 1.3px var(--Font_Color_Disabled);
  --Outline_Success_Small: 0 0 0 1.3px var(--Font_Color_Success);

  --Outline_Inset: inset 0 0 0 2px var(--Surface_4);
  --Outline_Inset_Hover: inset 0 0 0 2px var(--Surface_4);
  --Outline_Inset_Focus: inset 0 0 0 2px var(--Surface_4);
  --Outline_Inset_Primary: inset 0 0 0 2px var(--Primary);
  --Outline_Inset_Primary_Hover: inset 0 0 0 2px var(--Primary_Hover);
  --Outline_Inset_Primary_Variant: inset 0 0 0 2px var(--Primary_Variant);
  --Outline_Inset_Error: inset 0 0 0 2px var(--Font_Color_Error);
  --Outline_Inset_Disabled: inset 0 0 0 2px var(--Font_Color_Disabled);
  --Outline_Inset_Success: inset 0 0 0 2px var(--Font_Color_Success);
  
  --Outline_Inset_Small: inset 0 0 0 1.3px var(--Surface_4);
  --Outline_Inset_Hover_Small: inset 0 0 0 1.3px var(--Surface_4);
  --Outline_Inset_Focus_Small: inset 0 0 0 1.3px var(--Surface_4);
  --Outline_Inset_Primary_Small: inset 0 0 0 1.3px var(--Primary);
  --Outline_Inset_Primary_Hover_Small: inset 0 0 0 1.3px var(--Primary_Hover);
  --Outline_Inset_Primary_Variant_Small: inset 0 0 0 1.3px var(--Primary_Variant);
  --Outline_Inset_Error_Small: inset 0 0 0 1.3px var(--Font_Color_Error);
  --Outline_Inset_Disabled_Small: inset 0 0 0 1.3px var(--Font_Color_Disabled);
  --Outline_Inset_Success_Small: inset 0 0 0 1.3px var(--Font_Color_Success);

  --Button_Height_Extra_Small: 1.5rem;
  --Button_Height_Small: 2rem;
  --Button_Height_Medium: 2.5625rem;
  --Button_Height_Large: 3.25rem;

  --Header_Height: 3.25rem;

  --Header_Font: 'Sanvito Pro Subh', sans-serif;
  --Body_Font: 'Lato', sans-serif;
  --Font_Size_Title: 17px;

  --Page_Width: 600px;
  --Form_Width: 270px;
  --Form_Width_Large: 16rem;
}

body {
  background-color: var(--Background);
  color: var(--Font_Color);
  font-family: var(--Body_Font);
  font-weight: normal;
  margin: 0;
  padding: 0;
}

* {
  font-family: var(--Body_Font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--Header_Font);
  font-weight: bold;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#page-content {
  z-index: 1;
  position: relative;
  overflow-x: hidden;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: .75rem;
  height: .75rem;
}
::-webkit-scrollbar-track {
  background: #270E32;
}
::-webkit-scrollbar-thumb {
  background: #8331A8;
}
::-webkit-scrollbar-thumb:hover {
  background: #8331A8;
}
::-webkit-scrollbar-thumb:active {
  background: #8331A8;
}
::-webkit-scrollbar-corner {
  background: var(--Background);
}

/* Wallpaper Animation */
@keyframes move {
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
}

@media (max-width: 500px) {
  @keyframes move {
    from {
      transform: rotate(0deg) scale(6) translateX(-10px); 
    }
    to {
      transform: rotate(360deg) scale(9) translateX(10px);
    }
  }
}

.wallpaper {
  display: block;
  font-size: 52px;
  color: transparent;
  pointer-events: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-font-smoothing: antialiased;
  filter: blur(20px);
  z-index: -1;
}

.wallpaper::before,
.wallpaper::after {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  content: ".";
  mix-blend-mode: screen;
  animation: move 88s -64s infinite ease-in-out alternate;
}

.wallpaper::before {
  animation-duration: 88s;
  animation-delay: -64s;
}

.wallpaper::after {
  text-shadow: 2.3772499778em -0.2914791919em 7px rgba(255, 91, 0, 0.9), -0.0174905477em 0.848076582em 7px rgba(150, 255, 0, 0.9), 0.1123127278em 2.2790767774em 7px rgba(0, 255, 112, 0.9), -0.2863282214em 2.1757075436em 7px rgba(24, 0, 255, 0.9), 0.8955841924em 1.8758024249em 7px rgba(238, 0, 255, 0.9), -0.496823515em 2.3931898383em 7px rgba(255, 98, 0, 0.9), -0.0844236231em 0.4407763677em 7px rgba(247, 255, 0, 0.9), 1.0920809445em -0.2381871674em 7px rgba(21, 255, 0, 0.9), 0.4836787271em 1.1031601145em 7px rgba(255, 210, 0, 0.9), 1.7710801654em 1.4268708022em 7px rgba(0, 233, 255, 0.9), 0.1315862194em 1.928088477em 7px rgba(158, 0, 255, 0.9), 2.4877626741em 1.1660354295em 7px rgba(255, 0, 67, 0.9), 1.1032982873em 1.5510104272em 7px rgba(126, 255, 0, 0.9), 0.4751119856em 0.9068037575em 7px rgba(0, 71, 255, 0.9), 1.9515208782em -0.1107022407em 7px rgba(0, 255, 82, 0.9), -0.1831515974em 1.3772272507em 7px rgba(0, 255, 208, 0.9), 0.4783280651em 1.3033133855em 7px rgba(24, 255, 0, 0.9), 0.4087018441em 1.4802984131em 7px rgba(0, 111, 255, 0.9), -0.2906585469em -0.100118874em 7px rgba(255, 174, 0, 0.9), -0.1364297417em 1.2595182341em 7px rgba(0, 24, 255, 0.9), 2.298423005em 1.2052282754em 7px rgba(255, 246, 0, 0.9), 0.8707299704em 0.8500567137em 7px rgba(55, 255, 0, 0.9), 1.8825776414em 0.8922227421em 7px rgba(255, 88, 0, 0.9), 0.4551636566em -0.2301517909em 7px rgba(0, 112, 255, 0.9), 2.2910875438em 1.188435166em 7px rgba(0, 72, 255, 0.9), -0.2015130185em 0.1046606439em 7px rgba(0, 255, 169, 0.9), 1.0946575843em 1.1710703846em 7px rgba(130, 0, 255, 0.9), -0.4003254383em -0.3826845545em 7px rgba(255, 0, 38, 0.9), 0.1357120651em 0.5199559674em 7px rgba(255, 0, 215, 0.9), 0.8329298423em 1.1907487781em 7px rgba(37, 0, 255, 0.9), 0.7245942872em 2.2771256702em 7px rgba(137, 255, 0, 0.9), 0.4727200887em 1.9077988714em 7px rgba(0, 254, 255, 0.9), 0.3655424181em 0.4428850173em 7px rgba(0, 222, 255, 0.9), -0.4264052539em 1.6277081538em 7px rgba(204, 0, 255, 0.9), 1.1348264034em 0.5658151327em 7px rgba(0, 253, 255, 0.9), 1.8367433964em 1.6622931953em 7px rgba(76, 0, 255, 0.9), 0.244614192em 2.1860754832em 7px rgba(0, 82, 255, 0.9), -0.3195844423em -0.1542605562em 7px rgba(255, 158, 0, 0.9), 2.2221950065em 0.6860805476em 7px rgba(222, 255, 0, 0.9), 2.3434336144em 0.647982468em 7px rgba(255, 121, 0, 0.9), 0.2829490477em -0.246657039em 7px rgba(57, 0, 255, 0.9);
  animation-duration: 43s;
  animation-delay: -32s;
}

button {
  font-weight: 600;
  letter-spacing: 1px !important;
}

::-webkit-full-page-media, _:future, :root button, #speech-bubble {
  letter-spacing: -0.6px;
}

_::-webkit-full-page-media, _:future, :root button {
  letter-spacing: .5px !important;
}

/* _::-webkit-full-page-media, _:future, :root *:not(input[type="text"]):not(textarea):not([error]) {
  letter-spacing: -.8px;
} */
_::-webkit-full-page-media, _:future, :root input[type="text"],  input[type="email"], textarea {
  letter-spacing: .5px !important;
}

_::-webkit-full-page-media, _:future, :root button {
  font-size: 14px;
}

_::-webkit-full-page-media, _:future, :root h1 {
  letter-spacing: 0px !important;
}

[x-cloak] {
  display: none !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

form {
  width: 100% !important;
}