@import url("https://fonts.googleapis.com/css2?family=Ropa+Sans:ital@0;1&display=swap");
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: "Ropa Sans", sans-serif;
}

body {
  margin-bottom: 30px;
}

@media (max-width: 480px) {
  main .container .row .center .profileHeader figure img {
    aspect-ratio: 24/9 !important;
  }
  main .container .row .center .profileHeader .profile {
    right: 20px !important;
  }
  main .container .row .right {
    margin-top: 12px;
  }
}
header {
  top: 0;
  z-index: 10;
  padding: 12px 0;
  position: sticky;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .container .logo button {
  padding: 4px 10px;
  border-radius: 6px;
  background-color: transparent;
  border: 1px solid #dcdcdc;
}
header .container nav {
  gap: 12px;
  display: flex;
  align-items: center;
}
header .container nav a {
  color: inherit;
  padding: 4px 10px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid #dcdcdc;
  background-color: transparent;
}

main .container .row .center .profileHeader {
  margin-top: 12px;
  position: relative;
}
main .container .row .center .profileHeader .cover {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  aspect-ratio: 30/9;
}
main .container .row .center .profileHeader .profile {
  right: 60px;
  bottom: -60px;
  position: absolute;
  width: 130px;
  height: 130px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  background-color: #818cf8;
}
main .container .row .center .profileCaption .username {
  color: #818cf8;
}
main .container .row .center .profileCaption strong {
  font-size: 35px;
}
main .container .row .center .profileCaption p {
  color: #666687;
  font-size: 18px;
}
main .container .row .center .profileCaption a {
  color: #818cf8;
  text-decoration: none;
}
main .container .row .center .profileCaption a:hover {
  text-decoration: underline;
}
main .container .row .center .profileCaption ul {
  padding: 0;
}
main .container .row .center .profileCaption ul li {
  font-size: 18px;
  list-style: none;
  color: #666687;
  margin-bottom: 6px;
}
main .container .row .center .profileCaption ul li:last-child {
  margin-bottom: 0px;
}
main .container .row .center .socialMedia {
  gap: 12px;
  display: grid;
  padding-bottom: 16px;
  grid-template-columns: repeat(2, 1fr);
}
main .container .row .center .socialMedia a {
  width: 100%;
  color: #fff;
  border: none;
  padding: 8px 0;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
}
main .container .row .center .socialMedia a:nth-child(1) {
  background-color: #818cf8;
}
main .container .row .center .socialMedia a:nth-child(2) {
  background-color: #0D1117;
}
main .container .row .center .developedSkills {
  padding: 20px;
  border-radius: 8px;
  background-color: #F8FAFC;
}
main .container .row .center .developedSkills p {
  color: #666687;
}
main .container .row .center .developedSkills strong {
  gap: 12px;
  display: flex;
  flex-wrap: wrap;
  font-size: 18px;
}
main .container .row .center .tittle {
  margin: 16px 0;
}
main .container .row .center .tittle strong {
  font-size: 26px;
}
main .container .row .center .projects .projectCard {
  margin-bottom: 26px;
}
main .container .row .center .projects .projectCard:last-child {
  margin-bottom: 0;
}
main .container .row .center .projects .projectCard .projectHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main .container .row .center .projects .projectCard .projectHeader figure {
  gap: 12px;
  margin: 0;
  display: flex;
  align-content: center;
}
main .container .row .center .projects .projectCard .projectHeader figure img {
  width: 50px;
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  background-color: #818cf8;
}
main .container .row .center .projects .projectCard .projectHeader figure figcaption a {
  color: inherit;
  text-decoration: none;
}
main .container .row .center .projects .projectCard .projectHeader figure figcaption a:hover {
  color: #818cf8;
}
main .container .row .center .projects .projectCard .projectHeader figure figcaption a strong {
  font-size: 18px;
}
main .container .row .center .projects .projectCard .projectHeader figure figcaption a strong i {
  color: green;
}
main .container .row .center .projects .projectCard .projectHeader figure figcaption p {
  margin: 0;
  color: #666687;
}
main .container .row .center .projects .projectCard .projectHeader .projectStatus p {
  margin: 0;
  color: #666687;
  text-align: right;
}
main .container .row .center .projects .projectCard .projectNote {
  padding: 20px;
  margin-top: 12px;
  border-radius: 8px;
  background-color: #F8FAFC;
}
main .container .row .center .projects .projectCard .projectNote a {
  color: #818cf8;
  text-decoration: none;
}
main .container .row .center .projects .projectCard .projectNote a:hover {
  text-decoration: underline;
}
main .container .row .center .projects .projectCard .projectNote p {
  margin-bottom: 6px;
  font-size: 18px;
}
main .container .row .center .projects .projectCard .projectNote strong {
  gap: 12px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
  color: #0D1117;
}
main .container .row .center .projects .projectCard .projectNote ul {
  margin: 0;
}
main .container .row .center .projects .projectCard .projectNote ul li {
  color: #666687;
}
main .container .row .center .projects .projectCard .projectNote ul li::marker {
  color: #818cf8;
}
main .container .row .right {
  top: 50px;
  height: 100%;
  position: sticky;
  padding: 12px;
}
main .container .row .right strong {
  font-size: 26px;
}
main .container .row .right p {
  margin-bottom: 6px;
  font-size: 18px;
  color: #666687;
}
main .container .row .right a {
  color: #000;
  border: none;
  padding: 8px 0;
  font-size: 18px;
  border-radius: 8px;
  text-decoration: none;
  background-color: #ffdd00;
  display: flex;
  align-items: center;
  justify-content: center;
}/*# sourceMappingURL=style.css.map */