:root {
  --text-color:#333;
  --link: #0000EE77;
  --link-full: #0000EE;
  --link-visited: #551A8B77;
  /* --link-active: #EE000077; */
  --link-active: #fc07;
  --background: linear-gradient(135deg, #fff 30%, #51327577 100%);
}

body {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  vertical-align: baseline;
  background: transparent;
}
html {
  font-family:  'Montserrat',-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 22px;
  color: var(--text-color);
  font-weight:600;
  line-height:1.35;
}

main {
  font-size: 1em;
  font-size: clamp(1em, 3vw, 40px);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: 0;
  text-decoration-thickness: 0.20em;
  transition: 600ms all ease;


}
a:link {

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

}
a:hover {
  text-decoration-color: transparent;
  background-color: var(--link-active);

  /* text-decoration-thickness: 0.2em; */
  /* text-underline-offset: 0.1em; */


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

}
main {
    background: var(--background);
  }
  section.index {
    display: flex;
  }
  .background {
    background: linear-gradient(135deg, #000 30%, #2f1350 100%);
    position: absolute;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 1000ms ease;

  }
  .typist {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1;
    position: relative;
    min-width: 80vw;
    padding: 2em;

    /* transition: background-color 1s ease-in-out; */
  }
  .typist div {
    color: var(--text-color);

  }
  .typist a {
    font-weight: 800;
  }

  .index a:hover {
    /* font-size: 3em; */
    /* transition: font-size 2000ms ease !important; */
    /* position: absolute; */
    color: black;
    cursor: url(/home/static/images/call.svg), grab;
  }
  .index .hand:hover {
    cursor: url(/home/static/images/hand.svg), pointer;
  }
  .index .github:hover {
    cursor: url(/home/static/images/lightbulb.svg), pointer;
  }
  .hand {
    fill: indigo;
    fill: var(--text-color);
  }


  .animated .typist:hover + .background {
    opacity: 1;
    transition: all 1000ms ease;
  }
  .animated .typist div:hover {
    --text-color: #ddd;
    --link-active: #fc0;
    /* --link-active: #EE000077; */
    --background: linear-gradient(135deg, #000 30%, #2f1350 100%);
  }

  .animated .typist:hover :is(a, .hand) {
    /* color: black; */
    font-weight: bold;
    fill: var(--link-active);
    transition: all 600ms ease;
  }

  /*
  .blinking {
    opacity: 1;
    animation: blink 1s linear infinite;
  }
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  } */