body {
  font-family: "Comfortaa", cursive;
  background-color: #000;
  margin: 0;
}
#particles-js {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 5;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.name {
  margin-top: 50px;
  margin-bottom: 40px;
  background-image: linear-gradient(
    to right,
    #e0aac8,
    #d789c0,
    #c768bd,
    #b048be,
    #9029c2,
    #7941d5,
    #5853e6,
    #0063f5,
    #0089ff,
    #00a4f0,
    #00b8d5,
    #40c8be
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 6;
}

.name h1 {
  font-size: 64px;
  font-weight: lighter;
}

.name p {
  font-size: 28px;
}

#typed {
  color: antiquewhite;
  font-weight: 300;
  font-size: 45px;
  background-image: linear-gradient(
    to right,
    #e0aac8,
    #d789c0,
    #c768bd,
    #b048be,
    #9029c2,
    #7941d5,
    #5853e6,
    #0063f5,
    #0089ff,
    #00a4f0,
    #00b8d5,
    #40c8be
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.typed-cursor {
  color: antiquewhite;
  opacity: 1;
  animation: blink 0.7s infinite;
  font-size: 48px;
  background-image: linear-gradient(
    to right,
    #e0aac8,
    #d789c0,
    #c768bd,
    #b048be,
    #9029c2,
    #7941d5,
    #5853e6,
    #0063f5,
    #0089ff,
    #00a4f0,
    #00b8d5,
    #40c8be
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.social {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  margin-top: 50px;
  z-index: 6;
  max-width: 400px;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 0;
}

li {
  font-size: 20px;
  display: inline-block;
  width: 25%;
  text-align: center;
}

.linkedin {
  padding: 15px 17.5px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: 0.5s;
}

.linkedin:hover {
  color: #1178b3;
  border: 1px solid #1178b3;
  transition: 0.5s;
}

.twitter {
  padding: 15px 17.5px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: 0.5s;
}

.twitter:hover {
  color: #2aa3ef;
  border: 1px solid #2aa3ef;
  transition: 0.5s;
}

.github {
  padding: 15px 17.5px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: 0.5s;
}

.github:hover {
  color: #444343;
  border: 1px solid #444343;
  transition: 0.5s;
}

.instagram {
  padding: 15px 17.5px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  transition: 0.5s;
}

.instagram:hover {
  color: #903cb1;
  border: 1px solid #903cb1;
  transition: 0.5s;
}

.blog {
  margin-top: 30px;
  z-index: 6;
}

.blog a {
  text-decoration: none;
}

.blog h1 {
  font-weight: lighter;
  padding: 7px 10px;
  color: #000;
  border: 1px solid #fff;
  background-color: #fff;
  border-radius: 10%;
  transition: 0.5s;
}

.blog h1:hover {
  color: #000;
  border: 1px solid #6254de;
  background-color: #6254de;
  transition: 0.5s;
}

.slogan {
  color: #fff;
  background-image: linear-gradient(
    to right,
    #e0aac8,
    #d789c0,
    #c768bd,
    #b048be,
    #9029c2,
    #7941d5,
    #5853e6,
    #0063f5,
    #0089ff,
    #00a4f0,
    #00b8d5,
    #40c8be
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 6;
}