html {
    height: 100%;
  }

  :root {
  --altoviolet: #6900ff;
  --altomagenta: #c800ff;
  }

  body {
    padding:1rem;
    height: calc(100% - 3rem);
    font-family: Inter, sans-serif;
  }


#gradient-canvas {
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  --gradient-color-1: #6900ff;
  --gradient-color-2: #FFFCE6;
  --gradient-color-3: #df2ad0;
  --gradient-color-4: #c800ff;
}

  .mediaContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    z-index: 1;
    width:calc(100% - 3rem);
    height:calc(100% - 3rem);
  }

  .links {
    flex-direction: row;
    display: flex;
    gap: 5px;
  }

  .landingContent {
    background-color: rgba(255, 255, 255, 0.6);
    padding:20px;
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .mainbanner {
    width: 30rem;
    aspect-ratio: 850/261;
    transition-duration: 0.4s;
  }

  .maintext {
    font-weight: 600;
    font-size: 3rem;
    background-image: linear-gradient(90deg, rgba(200,0,255,1) 0%, rgba(105,0,255,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .landingText {
    font-size: 1.5rem;
    transition-duration: 0.4s;
  }

  .gitlink {
    text-decoration: none;
    color:black;
    transition-duration: 0.4s;
    padding: 0.5rem;
    border-radius: 100%;
    width: 24px;
    height:24px;
  }

  .gitlink:hover {
    background-color: rgba(255, 255, 255, 0.6);
  }

  @media (max-width: 700px) and (min-width: 450px) {

    .mainbanner {
      width: 20rem;
      transition-duration: 0.4s;
      aspect-ratio: 850/261;
    }

  }

  @media (max-width: 450px) {

    .mainbanner {
      width: 15rem;
      transition-duration: 0.4s;
      aspect-ratio: 850/261;
    }

    .landingText {
      font-size: 1.5rem;
      transition-duration: 0.4s;
    }

  }