@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  margin: 0;
  font-family: "Poppins";
}

body {background:#444444; color:#FFFFFF;}

svg {
  position: absolute;
  height: 700px;
  left: -600px;
  top: -600px;
  display: block;
  filter: drop-shadow(10px 20px 5px #fee100);
  transition: left 0.5s, top 0.5s;
}

.nav {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 999999;
}

svg.open {
  top: -140px;
  left: 0px;
}

.nav #links {
  display: none;
}

.nav a {
  color: #FFFFFF;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  animation-name: text;
  animation-duration: 1s;
}

@keyframes text {
  0% {
    opacity: 0%;
    transform: translateX(100px);
  }
  50% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}

.nav a:hover {
  text-decoration: underline;
}

#links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 70px;
}

#links a {
  padding-right: 20px;
}

.icon {
    position: absolute;
    right: 40px;
    top: 4px;
    width: 20px;
    height: 20px;
    font-size: 35px !important;
    color: #fee100 !important;
}