@import url('https://fonts.googleapis.com/css2?family=Recursive:wght@500&display=swap');

@font-face {
    font-family: "Victor Mono";
    src: url("/fonts/victormono-regular-webfont.woff") format("woff");
  }
  
  @font-face {
    font-family: "Victor Mono Italic";
    src: url("/fonts/victormono-italic-webfont.woff") format("woff");
  }
  
  body {
    height: 100%;
    width: 100%;
    background-image: url("https://media.tenor.com/1gfCwmVdMB8AAAAd/vaporwave.gif");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    user-select: none;
    -drag: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    z-index: 2;
  
  }
  
  h1 {
    font-family: 'Recursive', monospace;
    font-size: 5rem;
    color: #ffffff;
    z-index: 2;
  
  
  }
  
  @-webkit-keyframes glow {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #cba6f7, 0 0 40px #cba6f7, 0 0 50px #cba6f7, 0 0 60px #cba6f7, 0 0 70px #cba6f7;
    }
  
    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #cba6f7, 0 0 40px #cba6f7, 0 0 50px #cba6f7, 0 0 60px #cba6f7, 0 0 70px #cba6f7, 0 0 80px #cba6f7;
    }
  }
  
  h1:hover {
    font-family: 'Victor Mono Italic', monospace;
    font-style: italic;
    /* border-radius: clamp(0.4rem, 0.75vw, 1rem);
    background-color: #313244; */
    /* background: -webkit-linear-gradient(left, #fab387 , #f9e2af, #a6e3a1, #89dceb, #89b4fa, #cba6f7);
    background: -o-linear-gradient(right, #fab387, #f9e2af, #a6e3a1, #89dceb, #89b4fa, #cba6f7);
    background: -moz-linear-gradient(right, #fab387, #f9e2af, #a6e3a1, #89dceb, #89b4fa, #cba6f7);
    background: linear-gradient(to right, #fab387 , #f9e2af, #a6e3a1, #89dceb, #89b4fa, #cba6f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    
    
    color:  white;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
  }
  
  h3 {
    font-family: 'Victor Mono', monospace;
    font-size: medium;
    color: #a6adc8;
  }
  
  
  .meta-link {
    align-items: center;
    backdrop-filter: blur(3px);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    bottom: 10px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: inline-flex;
    gap: 5px;
    left: 10px;
    padding: 10px 20px;
    position: fixed;
    text-decoration: none;
    transition: background-color 400ms, border-color 400ms;
    z-index: 10000;
  }
  
  .meta-link:hover {
    background-color: rgba(49, 50, 68, 0.2);
    border: 1px solid rgba(49, 50, 68, 0.2);
  }
  
  .meta-link>i,
  .meta-link>span {
    height: 20px;
    line-height: 20px;
  }
  
  .meta-link>span {
    color: white;
    font-family: 'Victor Mono', monospace;
    font-weight: 500;
  }
  
  a:link {
    font-family: 'Victor Mono', monospace;
    text-decoration: none;
    color: #cdd6f4;
  }
  
  a:visited {
    font-family: 'Victor Mono', monospace;
    text-decoration: none;
    color: #cdd6f4;
  }
  
  a:hover {
    font-family: 'Victor Mono', monospace;
    text-decoration: none;
    border-radius: clamp(0.4rem, 0.75vw, 1rem);
  }
  
  a:active {
    font-family: 'Victor Mono', monospace;
    text-decoration: none;
    color: #cdd6f4;
  }
  
  .linktree {
    font-family: 'Victor Mono', monospace;
    color: #cdd6f4;
    font-size: x-large;
    user-select: none;
    -drag: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    z-index: 2;
  
  }
  
  footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    user-select: none;
    -drag: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    z-index: 2;
  }
  
  .center-content {
    align-items: center;
    height: 100vh;
  
  }
  
  
  .palette:hover {
    color: #cbd1e9;
  }
  
  .source:hover {
    color: #cbd1e9;
  }
  
  .old:hover {
    color: #cbd1e9;
  }
  
  .head {
    margin-bottom: 40;
  }
  
  #blob {
    background-color: white;
    height: 34vmax;
    aspect-ratio: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    background: linear-gradient(to right, rgb(129, 161, 231), rgb(154, 123, 216));
    animation: rotate 20s infinite;
    opacity: 0.8;
  }
  
  #blur {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    backdrop-filter: blur(12vmax);
    -webkit-backdrop-filter: blur(12vmax);
  }

  
  @keyframes rotate {
    from {
      rotate: 0deg;
    }
    
    to {
      rotate: 360deg;
    }
  }