* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: font-1;
}
html,
body {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  background-color: var(--theme-color-1);
}
:root {
  --theme-color-1: #3f51b5;
  --color-1: #00000080;
  --color-2: #ff4081;
  --color-3: rgba(255, 255, 255, 0.3);
  --color-4: #ffffff;
  --color-5: #202746;
  --color-6: #22a2c9;
  --color-7: lightskyblue;
  --color-8: darkorange;
  --color-9: #0e0f34;
  --color-10: #6679cc;
  --color-11: #979db4;
  --color-12: #ffffff99;
  --color-13: deepskyblue;
  --font-3: monospace;
}
@font-face {
  font-family: font-1;
  src: url(./Fonts/Helvetica.ttf);
}

@font-face {
  font-family: font-2;
  src: url(./Fonts/TAHOMA_0.TTF);
}

main {
  overflow: hidden;
}
.main-bg {
  position: relative;

  width: 100%;
  height: 100%;
  background-image: url(./Images/Background.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  z-index: 1;
}
.main-bg:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: var(--theme-color-1);
  z-index: -1;
  opacity: 0.8;
}

.nav-logo {
  width: 80px;
  height: 100%;
  cursor: pointer;
}
.main-h1 {
  color: var(--color-1);
  font-family: font-1;
  font-weight: 900;
}
.main-p {
  letter-spacing: -0.4px;
  font-family: font-1;
  justify-self: end;
}

.scroll-icon {
  transition: all 0.3s linear;
  color: var(--color-2);
  animation-name: scrollicon;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes scrollicon {
  0% {
    transition: all 0.3s linear;
    transform: translateY(0);
  }
  50% {
    transition: all 0.3s linear;
    transform: translateY(10px);
  }
  to {
    transition: all 0.3s linear;
    transform: translateY(0);
  }
}
.section-home {
  height: 90vh;
}
.section-anima {
  height: 100%;
}
.row-anima {
  border-top: 1px solid var(--color-3);
  border-bottom: 1px solid var(--color-3);
}
.anima-h1 {
  letter-spacing: -0.5px;
  font-family: font-1;
}

.card-anima,
.card-anima-2 {
  width: 400px;
  height: 180px;
  border: 10px solid var(--color-4);
  background-color: var(--color-5);
  border-radius: 5px;
}
.card-anima-2 {
  width: 600px;
  height: 200px;
}
.code {
  font-family: monospace;
}
.code > span {
  font-size: 14px;
  font-weight: 700;
  font-family: monospace;
}
.code > div > span {
  font-size: 14px;
  font-weight: 700;
  font-family: monospace;
}
.tag {
  color: var(--color-6);
}
.attribute {
  font-size: 12px;
  color: var(--color-7);
}
.value {
  font-size: 12px;
  color: var(--color-8);
}
.container-footer {
  height: 100%;
  background-color: var(--color-9);
}
.row-footer {
  background-color: var(--color-9);
  border-bottom: 1px solid var(--color-3);
}
.footer-h4 {
  font-family: font-2;
  font-weight: 600;
  letter-spacing: 1px;
}
.download-btn,
.github-btn {
  transition: all 0.1s linear;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid var(--color-2);
  color: var(--color-2);
  font-family: font-2;
  z-index: 1;
}
.download-btn:hover,
.github-btn:hover {
  color: var(--color-4);
}
.download-btn:before,
.github-btn:before {
  transition: all 0.1s linear;
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-2);
  z-index: -1;
}
.download-btn:hover:before,
.github-btn:hover:before {
  transition: all 0.1s linear;
  width: 100%;
}
.yarn,
.npm,
.brower,
.link-code {
  background-color: var(--color-5);
  color: var(--color-11);
}
.yarn-span {
  color: var(--color-6);
}
.npm-span {
  color: var(--color-10);
}
.brower-span {
  color: var(--color-10);
}
.footer-h6 {
  color: var(--color-12);
}
.link-code {
  font-family: monospace;
  color: var(--color-11);
}
.link-link {
  font-family: monospace;
  color: var(--color-10);
}
.link-a {
  font-family: monospace;
  color: var(--color-13);
}
.link-value {
  font-family: monospace;
  color: var(--color-8);
}
.script-link {
  color: var(--color-13);
  font-family: monospace;
}
.aos-link {
  color: var(--color-13);
  opacity: 0.4;
  font-family: monospace;
}
@media (max-width: 500px) {
  .code > span {
    font-size: 12px;
  }
  .code > div > span {
    font-size: 12px;
  }
  .card-anima {
    width: 100%;
    height: 200px;
  }
  .card-anima-2 {
    width: 100%;
    height: 230px;
  }
  .link-code {
    width: 100%;
  }
  .link-link {
    width: 100%;
  }
  .link-value {
    width: 100%;
  }
}