body {
    background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/geometric-leaves.png");
}

#title{
    font-family: "RansomNote", "Trattatello", "Times New Roman";
}

#container{
    width: 40%;
    margin: auto;
    text-align: left;
}

a{
    color: black;
    text-decoration: none;
    font-size: 2em;
    transition: color 1s ease;
}

#btnContainer{
    text-align: center;
}

a.effect-shine:hover {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
    -webkit-mask-size: 200%;
    animation: shine 2s infinite;
  }
  
  @-webkit-keyframes shine {
    from {
      -webkit-mask-position: 150%;
    }
    
    to {
      -webkit-mask-position: -50%;
    }
}

#duplexity:hover{
  background: -webkit-linear-gradient(#f50057, #ff1744);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#hush:hover{
    background: -webkit-linear-gradient(#3f76a3, #2e50c9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#nocturne:hover{
    background: -webkit-linear-gradient(#4e2f76, #521d6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#knight:hover{
  background: -webkit-linear-gradient(#d5df1a, #d89e0c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#rainstorm:hover{
  background: -webkit-linear-gradient(#4a6583, #ffd740);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#ineffectual:hover{
  background: -webkit-linear-gradient(#183a23, #0c0d49);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#undeniable:hover{
  background: -webkit-linear-gradient(#90AACB, #FFB085);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}