/* Animation slider for the dev section */
@keyframes changedev {
  0%, 12.66%, 100% {
    transform: translateY(0);
  }
  16.66%, 29.32% {
    transform: translateY(-25%);
  }
  33.32%, 45.98% {
    transform: translateY(-50%);
  }
  49.98%, 62.64% {
    transform: translateY(-75%);
  }
  66.64%, 79.3% {
    transform: translateY(-50%);
  }
  83.3%, 95.96% {
    transform: translateY(-25%);
  }
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-family: var(--font-family);
  font-weight: 400;
  background: var(--background);
  color: var(--text);
  font-size: 1.6rem;
  min-height: 100vh;
  background-color: var(--background);
}

p {
  margin: 0.5rem 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1rem 0 2rem 0;
}

ul {
  list-style: none;
}

a {
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
}

strong {
  font-weight: 700;
}

h1,
h2 {
  background: var(--gradient-1);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1 {
  font-size: 5rem;
  line-height: 7.5rem;
  font-weight: 700;
}
@media (max-width: 1239px) {
  h1 {
    font-size: 4rem;
    line-height: 5rem;
  }
}
@media (max-width: 480px) {
  h1 {
    align: center;
    font-size: 2.8rem;
    line-height: 5rem;
  }
}

h2 {
  font-size: 3rem;
}
@media (max-width: 480px) {
  h2 {
    font-size: 2.5rem;
  }
}
h2::before {
  content: "// ";
}

a {
  text-decoration: underline dotted;
  text-underline-offset: 0.5rem;
}

.box {
  border-radius: 2rem;
  background: var(--background-box);
  opacity: 0.85;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 2rem;
  flex: 1 0 0;
  flex-wrap: wrap;
  font-size: 2.4rem;
  line-height: 3.6rem;
  font-weight: 400;
  color: var(--text);
}
@media (max-width: 480px) {
  .box {
    border-radius: 0;
    font-size: 2rem;
    line-height: 3rem;
  }
}
.box h2 {
  flex: 0 0 100%;
}
.box img {
  width: 4.8rem;
  height: 4.8rem;
  margin: 1rem;
}

.grid-container {
  display: grid;
  grid: "param param" 6rem "me dev" 16rem "about tech" 1fr "skill contact" 1fr "experience experience" auto "portfolio portfolio" auto "footer footer" auto/1fr 1fr;
  min-height: 100vh;
  gap: 4rem;
  padding: 0 5rem 0 5rem;
  background-image: url("../img/Bkg-Effect-1.png");
  background-position: center;
  background-size: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (min-width: 1200px) {
  .grid-container {
    background-size: 100vh;
    background-position: 110% 80%;
  }
}
@media (max-width: 1239px) {
  .grid-container {
    background-size: 70vh;
    background-position: 50% 75%;
  }
}
@media (max-width: 1239px) {
  .grid-container {
    grid: "param" 6rem "me" "dev" "about" "tech" "skill" "contact" "experience" "portfolio" "footer"/1fr;
    gap: 2rem;
    padding: 1rem;
  }
}
@media (max-width: 480px) {
  .grid-container {
    grid: "param" 6rem "me" "dev" "about" "tech" "skill" "contact" "experience" "portfolio" "footer"/1fr;
    gap: 2rem;
    padding: 0;
  }
}

.param {
  display: flex;
  justify-content: right;
  grid-area: param;
  align-items: center;
}
.param a {
  margin: 0 2rem;
  text-decoration: none;
}
.param a:hover {
  text-decoration: underline dotted;
}
.param .current {
  color: var(--primary-purple);
}
@media (max-width: 1239px) {
  .param {
    justify-content: center;
  }
}

.me {
  grid-area: me;
  display: flex;
  justify-content: left;
  align-items: center;
}
.me img {
  margin-right: 2rem;
  border-radius: 10rem;
  border: double 1rem transparent;
  background-image: linear-gradient(white, white), var(--gradient-1);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
@media (max-width: 1239px) {
  .me img {
    margin-right: 0;
  }
}
@media (max-width: 1239px) {
  .me {
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .me {
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
  }
}

.dev {
  grid-area: dev;
  display: flex;
  justify-content: left;
  align-items: center;
}
@media (max-width: 1239px) {
  .dev {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .dev {
    flex-direction: column;
    align-items: center;
    align-content: center;
  }
}
.dev .slider {
  font-size: 3.5rem;
  line-height: 4rem;
  color: #ecf0f1;
}
.dev .slider__container {
  overflow: hidden;
  height: 40px;
}
.dev .slider__container__text {
  margin: 0;
  font-weight: 300;
}
@media (max-width: 1239px) {
  .dev .slider__container__text {
    display: block;
  }
}
.dev .slider__container__list {
  font-weight: 700;
  animation-name: changedev;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
@media (max-width: 480px) {
  .dev .slider__container__list {
    padding-left: 0;
  }
}

.about {
  grid-area: about;
}

.tech {
  grid-area: tech;
  display: flex;
}
.tech .techitem {
  display: flex;
  align-items: center;
  align-content: space-between;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 767px) {
  .tech .techitem {
    align-items: center;
    align-content: space-between;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
.tech .tech-legend {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  flex-basis: 100%;
  font-size: 2.2rem;
  line-height: 3rem;
  font-weight: 400;
  padding: 0 2.8rem;
}
@media (max-width: 767px) {
  .tech .tech-legend {
    flex-wrap: wrap;
    flex-shrink: 1;
    flex-direction: column;
  }
  .tech .tech-legend .tech-sep {
    display: none;
  }
}
.tech .tech-top {
  box-shadow: 3px 3px 5px var(--tech-top);
}
.tech .tech-ok {
  box-shadow: 3px 3px 5px var(--tech-ok);
}
.tech .tech-basis {
  box-shadow: 3px 3px 5px var(--tech-basis);
}
.tech .tech-top-txt {
  color: var(--tech-top);
  margin: 0 1rem;
}
.tech .tech-ok-txt {
  color: var(--tech-ok);
  margin: 0 1rem;
}
.tech .tech-basis-txt {
  color: var(--tech-basis);
  margin: 0 1rem;
}
.tech img {
  transition: transform 0.5s;
  margin: 2.8rem;
  border: 1px rgba(255, 255, 255, 0.1) solid;
  background-color: var(--background-box);
  border-radius: 1rem;
  padding: 2rem;
  width: 80px;
  height: 80px;
}
@media (max-width: 480px) {
  .tech img {
    margin: 2rem;
  }
}
.tech img:hover {
  transform: scale(1.2);
}

.skill {
  grid-area: skill;
}

.contact {
  grid-area: contact;
}
.contact .contact-item {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  line-height: 5rem;
}
.contact .contact-item a {
  text-decoration: none;
}
@media (max-width: 480px) {
  .contact .contact-item {
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
  }
}
.contact .contact-item div {
  flex: 1;
}
.contact .contact-item i {
  font-size: 3.5rem;
  margin-right: 3rem;
  margin-top: 0.8rem;
  width: 4rem;
}
@media (max-width: 480px) {
  .contact .contact-item i {
    font-size: 2rem;
    margin-right: 2rem;
    width: 2rem;
  }
}

.experience {
  grid-area: experience;
  background: var(--background-box);
  margin: 0 -5rem 0 -5rem;
  padding: 2rem 7rem;
  font-size: 2.4rem;
  line-height: 3.6rem;
  font-weight: 400;
  color: var(--text);
}
@media (max-width: 1239px) {
  .experience {
    margin: 0;
    padding: 2rem;
    border-radius: 2rem;
  }
}
@media (max-width: 480px) {
  .experience {
    font-size: 2rem;
  }
}
.experience .experience-item {
  margin-top: 5rem;
  margin-bottom: 5rem;
  padding-bottom: 4rem;
  border-bottom: 1px dotted var(--text);
}
.experience .experience-item:last-child {
  border: 0;
}
.experience .experience-item .experience-item-title {
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.experience .experience-item .experience-item-period {
  font-weight: 300;
  color: var(--hint);
  margin-left: 2rem;
}
.experience .experience-item .experience-item-period a {
  color: var(--hint);
}
@media (max-width: 1239px) {
  .experience .experience-item .experience-item-period {
    display: block;
    margin-left: 0;
  }
}

.portfolio {
  grid-area: portfolio;
  display: flex;
  flex-direction: column;
}
.portfolio .portfolio-title {
  flex: 1;
  text-align: center;
  margin-top: 5rem;
}
.portfolio .portfolio-items {
  display: flex;
  flex-direction: column;
}
.portfolio .portfolio-item {
  display: flex;
  padding: 2rem;
  margin: 2rem 0;
  background-color: var(--background-box);
  border-radius: 2rem;
}
@media (max-width: 1239px) {
  .portfolio .portfolio-item {
    flex-direction: column;
    align-items: center;
  }
}
.portfolio .portfolio-item-image {
  max-width: 600px;
  object-fit: contain;
  transition: transform 1s;
  /*
  &:hover {
      -ms-transform: translate(
              2rem
          )
          scale(1.2);
      -webkit-transform: translate(
              2rem
          )
          scale(1.2);
      transform: translate(2rem)
          scale(1.2);
  }
  */
}
@media (max-width: 767px) {
  .portfolio .portfolio-item-image {
    max-width: 100%;
  }
}
.portfolio .portfolio-item-details {
  display: flex;
  flex-direction: column;
  margin: 0 2rem 0 2rem;
}
@media (max-width: 480px) {
  .portfolio .portfolio-item-details {
    margin: 0;
  }
}
.portfolio .portfolio-item-details .portfolio-item-title {
  font-size: 3rem;
  flex-basis: 3rem;
}
@media (max-width: 1239px) {
  .portfolio .portfolio-item-details .portfolio-item-title {
    margin-top: 2rem;
  }
}
@media (max-width: 480px) {
  .portfolio .portfolio-item-details .portfolio-item-title {
    font-size: 2.5rem;
  }
}
.portfolio .portfolio-item-details .portfolio-item-desc {
  flex: 1;
  font-size: 2.4rem;
  line-height: 3.6rem;
  font-weight: 400;
  color: var(--text);
  margin: 3rem 0;
}
.portfolio .portfolio-item-details .portfolio-item-desc .fictive {
  font-size: 2rem;
  color: var(--hint);
}
@media (max-width: 480px) {
  .portfolio .portfolio-item-details .portfolio-item-desc .fictive {
    font-size: 1.5rem;
  }
}
@media (max-width: 480px) {
  .portfolio .portfolio-item-details .portfolio-item-desc {
    font-size: 2rem;
  }
}
.portfolio .portfolio-item-details .portfolio-item-period {
  font-weight: 300;
  color: var(--hint);
  font-size: 2.5rem;
  margin-top: 0.5rem;
}
@media (max-width: 1239px) {
  .portfolio .portfolio-item-details .portfolio-item-period {
    display: block;
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  .portfolio .portfolio-item-details .portfolio-item-period {
    font-size: 2rem;
  }
}
.portfolio .portfolio-item-details .portfolio-item-tech {
  flex-basis: 30px;
}
.portfolio .portfolio-item-details .portfolio-item-tech .portfolio-item-tech-item {
  width: 30px;
  height: 30px;
  margin-right: 1.5rem;
}

footer {
  grid-area: footer;
  padding: 0 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  height: 5rem;
  font-size: 2rem;
  background: var(--background);
}
@media (max-width: 767px) {
  footer {
    flex-flow: column wrap;
    justify-content: space-between;
    background-image: none;
  }
}

.grid-container-bookmark {
  display: grid;
  grid: "name param" 6rem "bookmarks bookmarks" auto "footer footer" auto/1fr 1fr;
  min-height: 100vh;
  gap: 4rem;
  padding: 0 5rem 0 5rem;
  background-image: url("../img/Bkg-Effect-1.png");
  background-position: center;
  background-size: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (min-width: 1200px) {
  .grid-container-bookmark {
    background-size: 100vh;
    background-position: 110% 80%;
  }
}
@media (max-width: 1239px) {
  .grid-container-bookmark {
    background-size: 70vh;
    background-position: 50% 75%;
    grid: "param" 6rem "name" auto "bookmarks" auto "footer" auto/1fr;
    gap: 2rem;
    padding: 1rem;
  }
}
@media (max-width: 480px) {
  .grid-container-bookmark {
    background-size: 70vh;
    background-position: 50% 75%;
    grid: "param" 6rem "name" auto "bookmarks" auto "footer" auto/1fr;
    gap: 2rem;
    padding: 0;
  }
}
.grid-container-bookmark .name {
  grid-area: name;
  display: flex;
  align-items: center;
}
.grid-container-bookmark .name h2 {
  margin-top: 3rem;
}
.grid-container-bookmark .name h2::before {
  content: "";
}
@media (max-width: 1239px) {
  .grid-container-bookmark .name {
    justify-content: center;
  }
}
.grid-container-bookmark .bookmarks {
  grid-area: bookmarks;
}
.grid-container-bookmark .bookmarks .bookmarks-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
}
.grid-container-bookmark .bookmarks .bookmarks-list .bookmark-item {
  margin: 2rem;
}
.grid-container-bookmark .bookmarks .bookmarks-list .bookmark-item li {
  list-style: disc;
}
.grid-container-bookmark .bookmarks .bookmarks-list .bookmark-item li a {
  text-decoration: none;
  font-weight: 700;
}
.grid-container-bookmark .bookmarks .bookmarks-list .bookmark-item li p {
  color: var(--hint);
}

/*# sourceMappingURL=styles.css.map */