@font-face {
  font-family: "Eymen";
  src: url(../font/EymenPro-Light.otf);
}
:root {
  --black: #1C222B;
  --blue: #5E72B6;
  --pink: #FFD7DB;
  --background: #ffffff;
  --font: "Eymen" ;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--background);
  color: var(--black);
  font-family: var(--font);
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
body .background {
  margin-top: 100px;
  position: fixed;
  z-index: -2;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: blur(6rem);
}
body .background .circle1 {
  width: 400px;
  height: 400px;
  z-index: -10;
  top: 0;
  right: 0;
  background: var(--blue);
  border-radius: 50%;
  -webkit-animation: move1 10s linear infinite;
          animation: move1 10s linear infinite;
}
@-webkit-keyframes move1 {
  0%, 100% {
    transform: translate(-20px);
  }
  50% {
    transform: translate(100px);
  }
}
@keyframes move1 {
  0%, 100% {
    transform: translate(-20px);
  }
  50% {
    transform: translate(100px);
  }
}
body .background .circle2 {
  width: 250px;
  height: 250px;
  z-index: -1;
  background: var(--pink);
  border-radius: 50%;
  -webkit-animation: move2 10s linear infinite;
          animation: move2 10s linear infinite;
}
@-webkit-keyframes move2 {
  0%, 100% {
    transform: translate(20px);
  }
  50% {
    transform: translate(300px);
  }
}
@keyframes move2 {
  0%, 100% {
    transform: translate(20px);
  }
  50% {
    transform: translate(300px);
  }
}
body .background .circle3 {
  width: 250px;
  height: 250px;
  z-index: -5;
  background: var(--pink);
  border-radius: 50%;
  -webkit-animation: move3 10s linear infinite;
          animation: move3 10s linear infinite;
}
@-webkit-keyframes move3 {
  0%, 100% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(200px);
  }
}
@keyframes move3 {
  0%, 100% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(200px);
  }
}
body .background .circle4 {
  width: 250px;
  height: 250px;
  z-index: -10;
  background: var(--blue);
  border-radius: 50%;
  -webkit-animation: move4 10s linear infinite;
          animation: move4 10s linear infinite;
}
@-webkit-keyframes move4 {
  0%, 100% {
    transform: translate(0px);
  }
  50% {
    transform: translate(-100px);
  }
}
@keyframes move4 {
  0%, 100% {
    transform: translate(0px);
  }
  50% {
    transform: translate(-100px);
  }
}
body .background .circle5 {
  width: 150px;
  height: 150px;
  z-index: -2;
  background: var(--pink);
  border-radius: 50%;
  -webkit-animation: move5 10s linear infinite;
          animation: move5 10s linear infinite;
}
@-webkit-keyframes move5 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-100px);
  }
}
@keyframes move5 {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-100px);
  }
}
body .container {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body .container .text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body .container .text .portfolio-links {
  margin-top: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
body .container .text .portfolio-links .p-link {
  border: 2px solid #5E72B6;
  background-color: transparent;
  border-radius: 20px;
  padding: 15px 20px;
  margin: 0 20px;
  transition: all 0.3s ease-in-out;
  color: #1C222B;
}
body .container .text .portfolio-links .p-link p {
  font-size: 1.2rem;
  font-weight: bolder;
}
body .container .text .portfolio-links .p-link:hover {
  background-color: var(--blue);
  color: var(--pink);
  transition: all 0.5s ease-in-out;
}
body .container .text .resume {
  margin-top: 30px;
  padding-top: 10px;
  width: 30%;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}
body .container .text .resume .download-icon {
  width: 50px;
}
body .container .text .resume h3 {
  margin-top: 10px;
  padding: 5px 5px;
  background-color: transparent;
}
body .container .text .resume:hover {
  background-color: #5E72B6;
  color: #FFD7DB;
}
body .container .icons {
  position: fixed;
  top: 200px;
  right: 30px;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
}
body .container .icons .link {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
body .container .icons .link a {
  z-index: 20;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
}
body .container .icons .link a img {
  width: 80%;
  padding: 4px;
  border-bottom: 2px solid rgba(137, 43, 226, 0);
}
body .container .icons .link a img:hover {
  border-bottom: 2px solid var(--blue);
  transition: border 1s ease;
}

@media (max-width: 750px) {
  body .container .icons {
    position: unset;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
    top: unset;
    right: unset;
    height: auto;
  }
  body .container .icons .link {
    display: flex;
  }
  body .container .icons .link a {
    margin: 10px;
  }
  body .container .icons .link a img {
    width: 80%;
    padding: 4px;
    border-bottom: 2px solid rgba(137, 43, 226, 0);
  }
  body .container .icons .link a img:hover {
    display: none;
  }
}
a {
  color: var(--color);
  text-decoration: none;
}/*# sourceMappingURL=style.css.map */