* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

:root {
    --main-background: #2b2b2b;
    --main-text: #f4f4f4;
    --second-text: #909090;
    --third-text: #d4d4d4;
    --main-btn: #f4f4f4;
    --accent: #8700AC;
    --main-overlay: #888888cc;
}

body {
    background-color: #383838;
}

nav {
    width: 80%;
    padding: 20px 40px;
    position: fixed;
    top: -490px;
    left: 10vw;
    display: flex;
    justify-content: space-between;
    z-index: 20;
    align-items: center;
    background-color: var(--main-overlay);
    border: 2px solid var(--third-text);
    border-radius: 20px;
}

.nav_left {
    display: flex;
    color: var(--main-text);
    font-size: 1rem;
    align-items: center;
}

.nav_right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav_right a {
    color: var(--main-text);
    font-size: 1rem;
    text-decoration: none;
}

.grid {
    width: 100%;
    height: 100%;
    background-image: url("images/rectangle.svg");
    background-repeat: repeat;
    z-index: 4;
    position: fixed;
}

.clone {
    position: absolute;
    z-index: 3;
    top: 0;
    filter: blur(30px);
    width: 100%;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }
  
  50% {
    scale: 1 1.5;
  }
  
  to {
    rotate: 360deg;
  }
}

#blob {
  height: 30vmax;
  aspect-ratio: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: linear-gradient(to right, aquamarine, mediumpurple);
  animation: rotate 20s infinite;
  opacity: 0.8;
  z-index: 1;
  position: fixed;
}

#blur {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 2;
  backdrop-filter: blur(12vmax);
  position: fixed;
}