body {
  margin: 0;

  background-color: var(--background);
  font-family: 'Switzer', sans-serif;
  color: var(--text);

  text-wrap: pretty;
}

:root {
  --fs-xl: clamp(2.5em, 2.5em + 2vw, 6em);
  --fs-lg: clamp(1.5em, 1.5em + 1vw, 4em);
  --fs-rg: clamp(1em, 1em + 0.5vw, 3em);
  --fs-sm: clamp(0.75em, 0.75em + 0.25vw, 1.5em);

  --primary: oklch(78.59% 0.1452 315.72);
  --secondary: oklch(69.81% 0.1359 34.93);
  --text: oklch(1 0 0);
  --background: oklch(0.1 0.01 48);
  --surface: oklch(0.6 0 0 /0.15);
  --surface2: oklch(0.6 0 0/0.5);
  --gradient: linear-gradient(in oklch 45deg, var(--primary), var(--secondary));
}

.fsxl {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}
.fslg {
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}
.fsrg {
  font-size: var(--fs-rg);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}
.fssm {
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}

.fw600 {
  font-weight: 600 !important;
}

.primary {
  background-color: var(--primary);
}
.secondary {
  background-color: var(--secondary);
}
.text {
  color: var(--text);
}
.background {
  background-color: var(--background);
}
.surface {
  background-color: var(--surface);
}
.gradient{
  background-image: var(--gradient);
}
.gradient-text{
  color: transparent;
  background-image: var(--gradient);
  background-clip: text;
}

nav {
  position: fixed;
  top: 0;
  padding-top: 0;
  display: grid;
  width: 100%;
  z-index: 99;
  background-image: linear-gradient(0deg, transparent, var(--background));
  background-size: fill;

  div {
    place-self: center;
    display: flex;
    background-color: var(--surface);
    padding-block: 0.5em;
    padding-inline: 1em;
    border-radius: 3em;
    margin-top: 16px;

    backdrop-filter: blur(16px);

    ul {
      display: flex;
      list-style-type: none;
      gap: 1em;
      align-items: center;
    }
  }
}

footer {
  display: flex;
  flex-direction: row;
  place-content: center;
  padding-block: 2em;

  ul {
    display: flex;
    gap: 1em;
    list-style-type: none;
    
    li {
      a{
        color: var(--surface2) !important;
      }
    }
  }
}

a {
    text-decoration: none;
    color: var(--text);
}

button{
  border-radius: 1em;
  border: none;
  padding-inline: 1em;
  padding-block: 0.25em;
  font-weight: 800 !important;
  cursor: pointer !important;
}