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

:root {
  --clr-red: rgb(234, 41, 41);
  --clr-green: rgb(53, 218, 53);
  --clr-blue: rgb(43, 43, 228);
  --clr-bg-mid-black: #0e0e0e;
  --clr-bg-light-black: #1c1c1c;
  --clr-light-cyan: #a3caeb;
  --clr-white: #f2f2f2;
  --clr-light-grey: #c3c3c3;
  /* */
  --card-bg-clr: #161616;
  --card-stroke-clr: #404040;
  /* */
  --extra-large-width-space: calc(100% - 5em);
  --large-width-space: calc(100% - 10em);
}

* {
  font-family: "Outfit";
  color: var(--clr-white);
}

a {
  cursor: pointer;
}

h1,
a,
p,
body {
  margin: 0;
  text-decoration: none;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #101010;
}

.no-select {
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-touch-select: none;
}

.link {
  color: var(--clr-light-cyan);
  text-decoration: underline;
}

.rgb {
  animation: rgb 1s ease infinite;
}

.sep {
  height: 0.1em;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.card {
  width: fit-content;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  border: 0.2em dashed var(--card-stroke-clr);
  border-radius: 0.3em;
  background-color: transparent;
  transition: ease 0.3s;
}

.card:hover {
  border-style: solid;
  background-color: var(--card-bg-clr);
}

.card h2 {
  margin: 0;
}

.card--mail {
  max-width: 30em;
  min-width: 12em;
  width: var(--large-width-space);
  margin: 2em;
  margin-inline: auto;
  padding: 1em;
  position: relative;
}

.card--mail__img {
  height: 7em;
  width: fit-content;
  position: absolute;
  top: -3em;
  right: -3em;
  transition: 0.5s ease;
  animation: envelope-floating 10s ease infinite;
}

/* - */

.music-player {
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-bg-light-black);
}

.music-player__buttons {
  display: none;
}

.music-player__play--icon,
.music-player__pause--icon {
  color: var(--clr-white);
  cursor: pointer;
}

.music-player__loading--icon {
  color: var(--clr-white);
  animation: r360 0.5s linear infinite;
}

.music-player__title {
  margin-left: 1em;
  font-family: monospace;
}

.navbar {
  max-width: 200em;
  width: var(--extra-large-width-space);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 3em;
}

.navbar__link {
  color: var(--clr-light-grey);
  transition: ease 0.2s;
}

.navbar__link:hover {
  color: var(--clr-white);
}

.ilovemessage--wrapper {
  width: fit-content;
  margin-inline: auto;
}

.ilovemessage {
  width: fit-content;
  height: 2.5rem;
  margin-top: 8em;
  margin-bottom: 1em;
  margin-inline: auto;
  padding: 0.5em;
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  overflow: hidden;
}

.ilovemessage__words {
  display: flex;
  flex-direction: column;
  animation: tst 10s linear infinite;
  transition: ease 10s;
}

.ilovemessage:hover .ilovemessage__words > h1 {
  animation: rgb 1s linear infinite;
}

.certs {
  max-width: 200em;
  width: var(--large-width-space);
  margin-bottom: 7em;
  margin-inline: auto;
}

/* - */

@keyframes tst {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, -10em);
  }
}

@keyframes rgb {
  0% {
    color: var(--clr-red) !important;
  }

  40% {
    color: var(--clr-green);
  }

  70% {
    color: var(--clr-blue);
  }

  100% {
    color: var(--clr-red);
  }
}

@keyframes r360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes envelope-floating {
  0% {
    transform: translate(0, -0.3em);
  }

  50% {
    transform: translate(0, 0.3em);
  }

  100% {
    transform: translate(0, -0.3em);
  }
}