html, body {
  margin:0;
  padding:0;
  cursor:none;
}

.nav-wrapper{
  width:100%;
  height:100vh;
  background: black;
}

nav{
  width: 100%;
  margin: 0 auto;
  text-align:center;
  position:absolute;
  top: 50%;
}

.hover-this{
  transition: all 0.3s ease;
}

span{
  display: inline-block;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: 300;
  color: whitesmoke;
  font-size: 36px;
  text-transform: uppercase;
  pointer-events: none;
  transition: transform 0.1 linear;
}

.cursor{
  pointer-events: none;
  position: fixed;
  padding: 0.3rem;
  background-color: whitesmoke;
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: transform 0.3s ease;
}

.hover-this:hover~.cursor {
  transform: translate(-50%, -50%) scale(8);
}

@media(min-width: 900px) {
  nav {
    display: flex;
    justify-content: space-around;
  }
}

@media(max-width: 900px){
  nav {
    top: 30%;
  }

  .hover-this{
    width: 100%;
    padding: 20px 0;
    display: inline-block;

  }
}

.logo {
  position: absolute;
  align-items: center;
  top: 10px;
  right: 43%;
  height: 15.5em;
}

@font-face {

  font-family: "Font Name";
  
  src: url("https://file.garden/filecode/FontName");
  
  }