/*color palette*/
:root {
  --background-color: #001b2e;
  --background-secondary-color: #2a1a1f;
  --primary-color: #bccad1;
  --secondary-color: #294c60;
  --tertiary-color: #8da9c4;
  --important-color: #b76d68;
  --info-color: #5e8c61;
  --gold-color: rgb(255, 251, 0);
}

/*override default*/
a,
a:hover,
a:visited,
a:active {
  color: inherit;
  text-decoration: none;
}
.nav-item {
  color: inherit;
  &:hover {
    color: inherit;
  }
}
.nav-link {
  color: inherit;
  &:hover {
    color: inherit;
  }
}

/*predefined classes fonts*/
.h2-font {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: x-large;
  font-style: normal;
}

.caveat-default {
  font-family: 'Caveat', cursive;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

/*animation*/
.animate-hover-enlarge {
  transition-duration: 0.3s;
  &:hover {
    transform: scale(1.2);
    font-weight: bolder;
    color: inherit;
  }
}

.animate-hover-flip-fill-icon {
  /*put on the anchor <a> with icon <i> inside*/
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 45px;
  font-size: 30px;
  margin: 0 10px;
  display: inline-block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--primary-color);
  z-index: 1;
  i {
    position: relative;
    color: var(--primary-color);
    transition-duration: 1s;
    z-index: 3;
  }
  i:hover {
    transform: rotateY(360deg);
  }
  &:hover:before {
    top: 0;
  }
  &:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-secondary-color);
    transition: 0.3s;
    z-index: -1;
  }
}

.btn-links {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  animation-delay: 1s;
  font-size: 20px;
  margin: 20px 10px;
}
.animate-button-flash {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  &:before,
  &:after {
    transition-duration: 0.3s;
    background-color: var(--important-color);
    position: absolute;
    display: inline-block;
  }
  &:before {
    content: '\2665';
    top: -100%;
    left: 0px;
    width: 100%;
    height: 100%;
    color: #2191d3;
  }
  &:hover:before {
    top: 0px;
  }
}
.animate-enlarge-shadow {
  transition-duration: 0.3s;
  &:hover {
    transform: translateX(15px) translateY(-15px);
    box-shadow: -10px 5px 5px var(--important-color);
  }
}
/*core*/
body {
  background: var(--background-color);
  background: linear-gradient(
    154deg,
    rgba(2, 0, 36, 1) 0%,
    rgb(13, 52, 77) 70%,
    rgba(41, 76, 96, 1) 100%
  );
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--primary-color);
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}
.navbar {
  .nav-item {
    margin: 10px 0px;
    text-align: center;
    .nav-link {
      color: var(--primary-color);
    }
    .nav-link.active {
      text-decoration: underline;
      color: white;
    }
    .nav-link.disabled {
      color: #5f646b;
    }
    .nav-link.show {
      color: inherit;
    }
    span.navbar-toggler-icon {
      color: var(--primary-color);
    }
  }
  #navbarSupportedContent > form > button {
    border-color: var(--info-color);
  }
  .navbar-title {
    margin: 10px 5px;
  }
}

.social-media-icons {
  text-align: center;
  align-self: center;
  align-content: center;
  align-items: center;
}
#instagram-media-icon {
  &::before {
    background-color: deeppink;
  }
}
.render-3D {
  align-self: center;
  transition: all 0.3s ease;
  transform: rotateX(40deg) rotateZ(1deg);
  font-weight: 700;
  font-size: 12em;
  color: #f5f5f5;
  text-shadow: white 0.006em 0.006em 0.007em, #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px, #9c9c9c 1px 3px 1px, #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px, #9c9c9c 1px 6px 1px, #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px, #9c9c9c 1px 9px 1px, #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px, #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 18px 6px, rgba(16, 16, 16, 0.2) 1px 22px 10px,
    rgba(16, 16, 16, 0.2) 1px 26px 35px, rgba(16, 16, 16, 0.4) 1px 30px 65px,
    white -0.15em -0.1em 100px;
  &:hover {
    margin-top: -20px;
    text-shadow: white 0.006em 0.006em 0.007em, #9c9c9c 1px 1px 1px,
      #9c9c9c 1px 2px 1px, #9c9c9c 1px 3px 1px, #9c9c9c 1px 4px 1px,
      #9c9c9c 1px 5px 1px, #9c9c9c 1px 6px 1px, #9c9c9c 1px 7px 1px,
      #9c9c9c 1px 8px 1px, #9c9c9c 1px 9px 1px, #9c9c9c 1px 10px 1px,
      #9c9c9c 1px 11px 1px, #9c9c9c 1px 12px 1px,
      rgba(16, 16, 16, 0.4) 1px 38px 26px, rgba(16, 16, 16, 0.2) 1px 42px 30px,
      rgba(16, 16, 16, 0.2) 1px 46px 65px, rgba(16, 16, 16, 0.4) 1px 50px 95px,
      white -0.15em -0.1em 100px;
  }
}
#keypoints-list {
  padding: 5% 5% 10px 5%;
}
.trapezoid {
  border-bottom: 50px solid #555;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 125px;
}
.content-container {
  margin: 0px 10%;
}
#title-image {
  width: 60%;
  transform: rotate(12deg);
  display: block;
  margin-left: 20%;
  z-index: -1;
  position: absolute;
}
#intro-container {
  h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 3rem;
    line-height: 1.5;
    animation-delay: 0.5s;
  }
  padding-top: 10%;
  padding-bottom: 20%;
  padding-left: 10%;
  padding-right: 10%;
  background-color: var(--background-color);
}
#self-intro {
  font-family: 'lato', sans-serif;
  font-size: large;
  font-weight: 500;
  padding-top: 10%;
}
#keypoints-list {
  padding: 10% 0px;
  white-space: nowrap;
  #ring-center-text {
    display: inline-block;
    position: relative;
    margin-top: 175px;
    font-weight: 1000;
    font-size: 3rem;
    margin-right: 10px;
    margin-left: 30%;
    width: 150px;
    margin-bottom: 20px;
  }

  .list-group-item {
    background-color: var(--background-color);
    padding: 20px 29px;
    font-size: 2rem;
    border: 0px;
    text-align: justify;
    color: var(--primary-color);
  }
  .keypoints-desc {
    font-size: 1rem;
    text-wrap: wrap;
  }
}

/*accessibility*/
@media (max-width: 1028px) {
  #title {
    text-align: center;
  }
  #title-image {
    position: static;
    transform: rotate(0);
  }
}
#projects-container {
  padding-left: 10%;
  padding-right: 10%;
  padding-bottom: 10%;
  h2 {
    margin-bottom: 3rem;
    text-decoration: underline;
  }
  #project-container-title {
    text-align: center;
    line-height: 2rem;
    font-weight: 1000;
    font-size: 3rem;
  }
}
.project-card {
  background: rgb(0, 127, 175);
  background: linear-gradient(
    60deg,
    rgba(0, 127, 175, 1) 0%,
    rgba(247, 252, 17, 1) 100%
  );
  color: var(--primary-color);
  border: 3px var(--info-color);
  margin: 5% 3%;
  .card-img {
    height: 50%;
    width: 70%;
    object-fit: cover;
    text-align: center;
    align-self: center;
    margin-top: 10px;
    margin-left: 10%;
    margin-right: 10%;
  }
  .list-group {
    background-color: transparent;
  }
  .list-group-item {
    background-color: transparent;
    color: #212227;
  }
  .card-title {
    text-align: center;
    padding: 0% 5%;
    color: #212227;
  }
}

#roadmap-container {
  background-color: var(--tertiary-color);
  padding: 10% 10%;
  .timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem;
    color: var(--background-color);
  }

  @media (min-width: 768px) {
    .timeline-steps .timeline-step:not(:last-child):after {
      content: '';
      display: block;
      border-top: 0.25rem dashed var(--gold-color);
      width: 3.46rem;
      position: absolute;
      left: 7.5rem;
      top: 0.3125rem;
    }
    .timeline-steps .timeline-step:not(:first-child):before {
      content: '';
      display: block;
      border-top: 0.25rem dashed var(--gold-color);
      width: 3.8125rem;
      position: absolute;
      right: 7.5rem;
      top: 0.3125rem;
    }
  }

  .timeline-steps .timeline-content {
    width: 10rem;
    text-align: center;
  }

  .timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gold-color);
  }

  .timeline-steps .timeline-content .inner-circle:before {
    content: '';
    background-color: var(--gold-color);
    display: inline-block;
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    border-radius: 6.25rem;
    opacity: 0.5;
  }
}

#skills-container {
  white-space: nowrap;
  padding: 10% 5%;
  background-color: var(--secondary-color);
  border-width: 0;
  #skill-box {
    background: linear-gradient(
      147deg,
      var(--background-color) 0%,
      var(--secondary-color) 100%
    );
    color: var(--primary-color);
    border-width: 0;
  }
  #lang-box {
    background: linear-gradient(
      213deg,
      var(--background-color) 0%,
      var(--secondary-color) 100%
    );
    color: var(--primary-color);
    border-width: 0;
  }
  .progress-bar {
    background-color: var(--important-color);
  }
}