@font-face {
  font-family: "GilroyExtraBold";
  src: url("assets/fonts/Gilroy-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GilroyHeavyItalic";
  src: url("assets/fonts/gilroy-heavy-italic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "GilroyMedium";
  src: url("assets/fonts/gilroy-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --purple: #7b00d4;
  --magenta: #ec008c;
  --cyan: #00aeef;
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

main {
  overflow-x: hidden;
  overflow-x: clip;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "GilroyExtraBold", Arial, sans-serif;
}

em,
i,
.font-gilroyItalic {
  font-family: "GilroyHeavyItalic", "GilroyExtraBold", Arial, sans-serif;
  font-style: italic;
}

.font-gilroyMedium {
  font-family: "GilroyMedium", "GilroyExtraBold", Arial, sans-serif;
  font-weight: 500;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: linear-gradient(135deg, rgba(124, 0, 212, 0.09) 1px, transparent 1px);
  background-size: 18px 18px;
}

header {
  border-image: linear-gradient(90deg, var(--cyan), var(--magenta)) 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}