/* COLORS */

:root {
  /* COLORS */
  --white: #ffffff;
  --dark: #1e1e1e;
  --reddark: #862600;
  --red1: #d14009;
  --orange1: #fc9601;
  --yellow1: #ffcc33;
  --beige: #ffe484;

  /* FONTS */
  --fontName: "Syne", sans-serif;
  --fontHeaders1: "Orbitron", sans-serif;
  --fontBody1: "Rajdhani", sans-serif;
  --fontHeaders2: "Fira Sans", sans-serif;
  --fontJapanese: "Noto Sans JP", sans-serif;
}

/* SNIPPETS  */

html {
  font-size: 62.5%;
  box-sizing: border-box; /* mandatory y proximity*/
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* GLOBALS */

h1 {
  font-size: 3.5rem;
  font-family: var(--fontHeaders1);
  margin: 2rem 0;
}

h2 {
  font-family: var(--fontHeaders1);
}

img {
  max-width: 100%;
  margin-bottom: 0;
}

/* UTILITIES */

.text-center {
  text-align: center;
}

.line-space-body {
  line-height: 2.5rem;
}

.title-margin{
  margin: 5rem auto 2.5rem auto;
}

.section-title{
  font-size: 3rem;
}

@media (min-width: 768px) {
    .section-title{
      font-size: 5rem;
    }
}

.body-p{
  font-family: var(--fontBody1);
  font-size: 1.6rem;
}

@media (min-width: 768px) {
    .body-p{
      font-size: 2rem;
    }
}

/* HEADER x NAV BAR */

.container-header {
  margin: 0;
  background: linear-gradient(
    to right bottom,
    #1e1e1e 15%,
    #d14009 60%,
    #fc9601 75%,
    #ffcc33,
    #ffe484,
    #ffffff
  );
  height: 40rem;
}

.container-header.back-header-development {
  background: linear-gradient(
    to right bottom,
    #1e1e1e 15%,
    #F5AD5C 40%,
    #047969 60%,
    #91C141,
    #E71C62,
    #ffffff
  );
  height: 40rem;
}

.container-header.back-header-art {
  background: linear-gradient(
    to right bottom,
    #1e1e1e 15%,
    #4B9DB0 40%,
    #CF1B2A 60%,
    #F9F1D9 70%,
    #EEDB10 90%,
    #1e1e1e
  );
  height: 40rem;
}

.container-header.back-header-contact {
  background: linear-gradient(
    to right bottom,
    #9C4B2D 15%,
    #5E6462 40%,
    #4CAEB1 60%,
    #B9D359 70%,
    #E727C7 90%,
    #1e1e1e
  );
  height: 40rem;
}


.titulo.bar-nav-el {
  text-align: center;
  padding: 2rem 0;
  margin: 0;
}

.titulo.bar-nav-el a {
  font-size: 5rem;
  text-decoration: none;
  font-family: var(--fontName);
  color: var(--white);
  transition: color 1s ease-out;
}

.titulo.bar-nav-el a:hover {
  color: #d14009;
}

.bar-nav-menu {
  text-align: center;
  margin-bottom: 3rem;
}

.bar-nav-el {
  margin: 0.5rem 0;
}

.bar-nav-el a {
  text-decoration: none;
  font-family: var(--fontHeaders1);
  font-weight: 500;
  color: var(--white);
  padding: 0 1rem;
  font-size: 2rem;
}

.bar-nav-options .bar-nav-el a {
  transition: background-color 1s ease-out;
}

.bar-nav-options .bar-nav-el a:hover {
  background-color: #1e1e1e;
}

@media (min-width: 768px) {
  .container-header,
  .container-header.back-header-development,
  .container-header.back-header-art,
  .container-header.back-header-contact {
    height: 56rem;
  }

  .bar-nav {
    display: grid;
    grid-template-columns: 6fr 6fr;
    padding: 5rem 1rem 2rem 10rem;
    align-items: center;
  }

  .titulo.bar-nav-el {
    text-align: left;
    padding: 0 0;
  }

  .titulo.bar-nav-el a {
    font-size: 5.5rem;
  }

  .bar-nav-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
  }

  .bar-nav-menu {
    align-items: center;
    margin: 0 0;
  }

  .bar-nav-el {
    margin: 0 0;
  }

  .bar-nav-options .bar-nav-el a {
    padding: 1rem 0.3rem;
  }
  .bar-nav-el a {
    font-size: 1.6rem;
  }
}

@media (min-width: 1024px) {
  .container-header,
  .container-header.back-header-development,
  .container-header.back-header-art,
  .container-header.back-header-contact {
    height: 80rem;
  }
  .titulo.bar-nav-el a {
    font-size: 7rem;
  }

  .bar-nav-el {
    margin: 0 0;
  }

  .bar-nav-el a {
    font-size: 2.6rem;
  }

  .bar-nav-options .bar-nav-el a {
    padding: 1rem 1rem;
  }
}

/* INFO SQUARE */

.info-square {
  padding: 1rem 0;
  border: 3px solid var(--white);
  border-radius: 1rem;
  width: 35%;
  margin: 0 auto;
}

.info-square h2 {
  color: var(--white);
  font-size: 1rem;
}

.info-nav {
  margin: 0.5rem 0;
}

@media (min-width: 768px) {
  .info-square {
    display: flex;
    flex-direction: column;
    width: 30rem;
    border: 5px solid var(--white);
    border-radius: 2rem;
    padding: 3rem 0;
    margin: 15rem auto 0 auto;
  }

  .info-square h2 {
    font-size: 2rem;
    margin: 0.5rem 0;
  }
}

@media (min-width: 1024px) {
  .info-square {
    width: 50rem;
    margin: 20rem auto 0 auto;
  }

  .info-square h2 {
    font-size: 3rem;
  }
}

/* HEADER BUTTONS */

.header-btns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 2rem auto 2rem auto;
  font-family: var(--fontBody1);
  font-weight: 700;
  font-size: 1rem;
  column-gap: 1rem;
  max-width: 20rem;
}

.social-btns {
  text-decoration: none;
  color: black;
  background-color: var(--white);
  border-radius: 5rem;
  border: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 8.2rem;
  padding: 0 0.4rem;
  transition: background-color 0.5s ease-in;
}

.social-btns p{
  font-size: 1.6rem;
  padding: 0 1rem;
}

.social-btns:hover {
  background-color: var(--reddark);
}

.social-btns svg {
  scale: 0;
}

@media (min-width: 768px) {
  .header-btns {
    margin: 4rem auto 4rem auto;
    font-family: var(--fontBody1);
    font-weight: 700;
    font-size: 2rem;
    column-gap: 4rem;
  }

  .social-btns {
    padding: 0 1rem;
    border-radius: 3rem;
    column-gap: 0.5rem;
    align-items: center;
    width: 14rem;
    justify-content: center;
  }

  .social-btns svg {
    scale: 0.7;
  }
}

@media (min-width: 1024px) {
  .header-btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 12rem auto 10rem auto;
    font-family: var(--fontBody1);
    font-weight: 700;
    font-size: 3rem;
    column-gap: 6rem;
  }

  .social-btns {
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 5rem;
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    align-items: center;
    width: 25rem;
    justify-content: center;
  }

  .social-btns p{
    font-size: 2rem;
  }

  .social-btns svg {
    scale: 1;
  }
}

/* SECTIONS */

.sections {
  display: flex;
  justify-content: space-between;
  background-color: #1e1e1e;
  -webkit-box-shadow: 0px 2px 6px 0px #1e1e1e;
  -moz-box-shadow: 0px 2px 6px 0px #1e1e1e;
  box-shadow: 0px 2px 6px 0px #1e1e1e;
}

.sections {
  padding: 3rem 2rem;
  justify-content: center;
}

.sections-options {
  margin: 0 1rem;
}

.sections-options a {
  text-decoration: none;
  color: var(--white);
  font-family: var(--fontBody1);
  font-weight: 300;
  font-size: 1.6rem;
  padding: 1rem 0.5rem;
  transition: color 0.2s ease-in;
  transition: background-color 0.5s ease-in;
}

.sections-options a:hover {
  background-color: #d14009;
  color: #1e1e1e;
}

@media (min-width: 768px) {
  .sections {
    padding: 4rem 10rem;
    justify-content: center;
  }

  .sections-options {
    margin: 0 2rem;
  }

  .sections-options a {
    font-size: 2.6rem;
    padding: 1.5rem 1rem;
  }
}

@media (min-width: 1024px) {
  .sections {
    padding: 5rem 0;
    justify-content: center;
  }
  .sections-options {
    margin: 0 5rem;
  }
  .sections-options a {
    font-size: 2.6rem;
    padding: 5rem 1rem;
  }
}

/* MAIN CONTAINER */
/* MAIN CONTAINER INDEX */

.title-index{
  font-family: var(--fontHeaders1);
  font-weight: 700;
  font-size: 4rem;
}

/* CONTAINER WHO */

.container-who {
  /* max-width: 120rem; */
  margin: 0 auto;
}

.title-who {
  font-weight: 700;
  font-size: 3rem;
}

.grid-who {
  background-color: var(--dark);
  margin: 5rem 0 5rem 0;
}

.img-who img {
  height: 40rem; 
  width: 100%; 
  object-fit: cover;
  /* object-position: center; Select position of the image */
}

.text-who {
  font-family: var(--fontBody1);
  color: var(--white);
  padding: 0 2rem 2rem 2rem;
  font-size: 1.6rem;
}

@media (min-width: 768px) {
  .title-who{
    margin: 5rem 0;
  }
}

@media (min-width: 1024px) {

  .title-who{
    font-size: 4rem;
    margin: 10rem 0;
  }

  .grid-who-background{
    background-color: var(--dark);
  }
  
  .grid-who {
    max-width: 120rem;
    background-color: transparent;
    /* border-radius: 0 10rem 10rem 0; Top left, Top right, Bottom left, Bottom right */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5rem;
    margin: 5rem auto;
  }

  .img-who img {
    height: 60rem;
    width: 100%;
  }
  .text-who {
    font-size: 2rem;
    text-indent: 2rem;
    padding: 1rem 3rem 0 0;
  }
}

/* CONTAINER-EDUCATION */

.title-index{
  font-size: 3rem;
}

.container-education{
  /* max-width: 120rem;  */
  margin: 0 auto;
}

.text-education{
  font-family: var(--fontBody1);
  font-size: 2rem;
}

.subtitle-index{
  font-family: var(--fontBody1);
  font-weight: 300;
  font-size: 3rem;
}

.grid-skills{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  justify-items: center;
  align-items: center;
  row-gap: 1rem;
}

.container-education{
  margin-bottom: 5rem;
  padding: 0 5rem;
}

.grid-university{
  display: grid;
  grid-template-columns: repeat(2,1fr);
}

.university{
  text-align: center;
}

.bachelor,
.specialty{
  text-align: center;
}

.skill-logos:hover{
  transition: transform 0.5s ease-out;
}

.skill-logos:hover{
  transform: scale(1.5);
}

@media (min-width: 768px) {
    
}

@media (min-width: 1024px) {
    .title-education{
      margin: 10rem 0; 
    }
    .subtitle-index{
      font-size: 3rem;
    }

    .container-education{
      margin-bottom: 5rem;
      padding: 0 15rem;
    }

    .education-content{
      max-width: 120rem;
      margin: 0 auto;
    }

    .skills-grid-container{
      margin: 15rem 0;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      column-gap: 25rem;
      justify-content: center;
    }

    .grid-skills{
      row-gap: 3rem;
      column-gap: 5rem;
    }

}

/* CONTAINER EXPERIENCE */
.container-experience{
  margin: 0;
  padding: 5rem 0;
  /* background: linear-gradient(
    to left top,
    #3b0808 15%,
    #d8521d 60%,
    #fc9601 75%,
    #ffcc33,
    #ffe484,
    #ffffff
  ); */
}
.title-experience{
  margin: 5rem 0;
  background-color: var(--dark);
  color: var(--white);
  padding: 2rem 0;
  transition: transform 0.3s ease-in;
}

.title-experience:hover{
  transform: scale(1.1);
}

.subtitle-index-experience{
  height: 7rem;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--dark);
  border-radius: 2rem;
  margin: 5rem auto;
  transition: all 0.3s ease-in;
}

.subtitle-index-experience:hover{
  background-color: var(--white);
  border: 2px solid var(--white);
  color: var(--red1);
}

.kam-jr{
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--white);
  background-color: var(--dark);
}

.pd-stellantis{
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--white);
  background-color: var(--dark);
}

.ux-intellab{
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--white);
  background-color: var(--dark);
  margin-bottom: 5rem;
}

@media (min-width: 1024px) {

    .professional-content{
      max-width: 120rem;
      margin: 0 auto 10rem auto;
    }

    .title-experience-parent{
      text-align: center;
    }

    .title-experience{
      display: inline-block;
      padding: 2rem 2rem;
    }

    .subtitle-index-experience{
      border-radius: unset;
      padding: 5rem 0;
    }

    .grid-experience{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      column-gap: 4rem;
    }
    .kam-jr{
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: var(--dark);
      text-align: center;
      margin: auto 0;
      border-radius: 5rem;
      height: 45rem;
    }
    .pd-stellantis{
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: var(--dark);
      padding: 3rem;
      text-align: center;
      margin: auto 0;
      border-radius: 5rem;
      height: 45rem;
    }
    .ux-intellab{
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: var(--dark);
      padding: 3rem;
      text-align: center;
      margin: auto 0;
      border-radius: 5rem;
      height: 45rem;
    }

    
}

.experience-activities{
  transition: transform 0.3s ease-in;
}

.experience-activities:hover{
  transform: scale(1.1);
}
/* FOOTER */

.footer-grid {
  background-color: #1e1e1e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0 1rem 0;
}

.site-footer-contact p{
  text-decoration: none;
  font-family: var(--fontBody1);
  font-weight: 500;
  color: var(--white);
  font-size: 2rem;
}

.site-footer-social a{
  font-size: 2rem;
}

.socials-center {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
  margin-bottom: 2rem;
}

.socials svg {
  scale: 1;
}

.socials:hover {
  cursor: pointer;
}

.socials a {
  text-decoration: none;
  font-family: var(--fontBody1);
  font-weight: 500;
  color: var(--white);
}

@media (min-width: 768px) {
  .footer-grid {
    padding: 5rem 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 10rem;
  }

  .socials-center {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.5rem;
    transition: transform 0.5s ease-out;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    padding: 3rem 0 2rem 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 30rem;
  }

  /* FOOTER CONTACT */

  .site-footer-contact {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease-in;
  }

  .site-footer-contact:hover {
    transform: scale(1.5);
    cursor: pointer;
  }

  /* FOOTER SOCIALS */

  .socials {
    display: flex;
    flex-direction: column;
    gap: 2rem 0;
  }

  .socials-center {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 2rem;
    transition: transform 0.5s ease-out;
    margin-bottom: 0;
    row-gap: 1rem;
  }

  .socials-center:hover {
    transform: scale(1.5);
  }

  .socials svg {
    scale: 1;
  }

  .socials a {
    margin: 1rem 0;
  }
}

/* DEVELOPMENT */

.dev-title{
  text-align: center;
  padding: 3rem;
  margin: 0;
  font-family: var(--fontHeaders1);
  font-weight: 700;
  font-size: 3rem;
  text-decoration: none;
  color: black;
}

/* FIGMA PROJECTS */


.container-figma-projects{
  max-width: 120rem;
  margin: 0 auto;
}

.figma-project{
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 5rem;
}

.figma-project-title{
  transition: background-color 0.5s ease-in;
}

.figma-project-title:hover{
  background-color: var(--orange1);
}

.figma-project img{
  width: 100%;
  object-fit: cover;
}

.figma-project p{
  text-align: center;
  background-color: var(--dark);
  color: var(--white);
  margin: 0;
  padding: 3rem;
  border: none;
}

@media (min-width: 768px) {
  .container-figma-projects{
    max-width: 120rem;
    margin: 0 auto;
  }

  .figma-project-title.dev-title{
    padding: 3rem;
    font-size: 4rem;
  }
  
  .figma-project img{
    height: 60rem;
    margin: 0;
  }
  
  .figma-project p{
    text-align: center;
    background-color: var(--dark);
    color: var(--white);
    font-size: 2.6rem;
  }
}

/* HTML PROJECTS */
.container-html{

}

.container-html-projects{
  display: block;
}

@media (min-width: 768px) {
  .container-html-projects{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 5rem;
  }
}

.html-project{
  display: flex;
  flex-direction: column;
  margin-bottom: 5rem;
}

.html-project img{
  width: 100%;
  height: 55rem;
  object-fit: cover;
  margin: 0;
}

.p-html-background{
  background-color: var(--dark);
  display: flex;
  align-items: center;
  padding: 5rem;
  height: 15rem;
  margin: 0;
}

.html-project p{
  text-align: center;
  color: var(--white);
  margin: 0;
}

.html-project-title{
  transition: background-color 0.5s ease-in;
}

.html-project-title:hover{
  background-color: var(--orange1);
}

@media (min-width:768px) {
  .html-project-title.dev-title{
    font-size: 4rem;
  }
}

/* ART */

/* 2D IMAGES */

.images-2d-container{
  max-width: 120rem;
  margin: 0 auto;
  list-style: none;
}

.art-title{
  margin: 5rem 0; 
}

.grid-2d-images{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-2d-images img{
  width: 40rem;
  height: 40rem;
  object-fit: cover;
}

@media (min-width: 768px) {

  .grid-2d-images{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(5,1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    max-width: 80rem;
  }

  .grid-2d-images img{
    width: 40rem;
    height: 40rem;
    object-fit: cover;
  }
  
  .art-2d-img1{
    grid-row: 1/2;
    grid-column: 1/2;
  }
  .art-2d-img2{
    grid-row: 1/2;
    grid-column: 2/3;
  }
  .art-2d-img3{
    grid-row: 2/3;
    grid-column: 1/2;
  }
  .art-2d-img4{
    grid-row: 2/3;
    grid-column: 2/3;
  }
  .art-2d-img5{
    grid-row: 3/4;
    grid-column: 1/2;
  }
  .art-2d-img6{
    grid-row: 3/4;
    grid-column: 2/3;
  }
  .art-2d-img7{
    grid-row: 4/5;
    grid-column: 1/2;
  }
  .art-2d-img8{
    grid-row: 4/5;
    grid-column: 2/3;
  }
  .art-2d-img9{
    grid-row: 5/6;
    grid-column: 1/2;
  }
  .hover-img img{
    transition: transform 0.3s ease-in;
  } 
  .hover-img img:hover{
    transform: scale(0.85);
  }
}

@media (min-width: 1024px) {
  .grid-2d-images img{
    width: 40rem;
    height: 40rem;
    object-fit: cover;
  }
  .grid-2d-images{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    max-width: 120rem;
  }
  .art-2d-img1{
    grid-row: 1/2;
    grid-column: 1/2;
  }
  .art-2d-img2{
    grid-row: 1/2;
    grid-column: 2/3;
  }
  .art-2d-img3{
    grid-row: 1/2;
    grid-column: 3/4;
  }
  .art-2d-img4{
    grid-row: 2/3;
    grid-column: 1/2;
  }
  .art-2d-img5{
    grid-row: 2/3;
    grid-column: 2/3;
  }
  .art-2d-img6{
    grid-row: 2/3;
    grid-column: 3/4;
  }
  .art-2d-img7{
    grid-row: 3/4;
    grid-column: 1/2;
  }
  .art-2d-img8{
    grid-row: 3/4;
    grid-column: 2/3;
  }
  .art-2d-img9{
    grid-row: 3/4;
    grid-column: 3/4;
  }
  .hover-img img{
    transition: transform 0.3s ease-in;
  }
  
  .hover-img img:hover{
    transform: scale(0.85);
  }
}

/* 3D IMAGES */
.images-3d-container{
  max-width: 120rem;
  margin: 0 auto;
  list-style: none;
}
.art-title{
  margin: 5rem 0; 
}
.grid-3d-images{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grid-3d-images img{
  width: 40rem;
  height: 40rem;
  object-fit: cover;
}
@media (min-width: 768px) {
  .grid-3d-images{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(5,1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    max-width: 80rem;
  }
  .grid-3d-images img{
    width: 40rem;
    height: 40rem;
    object-fit: cover;
  }
  .art-3d-img1{
    grid-row: 1/2;
    grid-column: 1/2;
  }
  .art-3d-img2{
    grid-row: 1/2;
    grid-column: 2/3;
  }
  .art-3d-img3{
    grid-row: 2/3;
    grid-column: 1/2;
  }
  .art-3d-img4{
    grid-row: 2/3;
    grid-column: 2/3;
  }
  .art-3d-img5{
    grid-row: 3/4;
    grid-column: 1/2;
  }
  .art-3d-img6{
    grid-row: 3/4;
    grid-column: 2/3;
  }
  .art-3d-img7{
    grid-row: 4/5;
    grid-column: 1/2;
  }
  .art-3d-img8{
    grid-row: 4/5;
    grid-column: 2/3;
  }
  .art-3d-img9{
    grid-row: 5/6;
    grid-column: 1/2;
  }
  .hover-img img{
    transition: transform 0.3s ease-in;

  } 
  .hover-img img:hover{
    transform: scale(0.85);
  }
}

@media (min-width: 1024px) {
  .grid-3d-images img{
    width: 40rem;
    height: 40rem;
    object-fit: cover;
  }
  .grid-3d-images{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    max-width: 120rem;
  }
  .art-3d-img1{
    grid-row: 1/2;
    grid-column: 1/2;
  }
  .art-3d-img2{
    grid-row: 1/2;
    grid-column: 2/3;
  }
  .art-3d-img3{
    grid-row: 1/2;
    grid-column: 3/4;
  }
  .art-3d-img4{
    grid-row: 2/3;
    grid-column: 1/2;
  }
  .art-3d-img5{
    grid-row: 2/3;
    grid-column: 2/3;
  }
  .art-3d-img6{
    grid-row: 2/3;
    grid-column: 3/4;
  }
  .art-3d-img7{
    grid-row: 3/4;
    grid-column: 1/2;
  }
  .art-3d-img8{
    grid-row: 3/4;
    grid-column: 2/3;
  }
  .art-3d-img9{
    grid-row: 3/4;
    grid-column: 3/4;
  }
  .hover-img img{
    transition: transform 0.3s ease-in;
  }
  
  .hover-img img:hover{
    transform: scale(0.85);
  }
}
/* CONTACT */


.work-progress{
  font-size: 5rem;
}

.contact-info{
  text-align: center;
  border: 2px solid var(--dark);
  margin: 0 5rem;
}

@media (min-width: 768px) {
    .contact-info{
      width: 30%;
      margin: 0 auto;
    }
}

.contact-info p{
  font-family: var(--fontBody1);
  font-size: 2.6rem;
  transition: transform 0.3s;
}

.contact-info p:hover{
  transform: scale(1.2);
  cursor: pointer;
  font-weight: 700;
}

/* WORK IN PROGRESS CUBE */

.container-cube{
  background-color: var(--dark);
  margin: 10rem 0;
}

.cubo{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.cube-container{
  width: 20%;
  height: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.cubo{
  height: 60%;
  transform-style: preserve-3d;
  animation: rotate 8s linear infinite;
}

.cubo> span{
  position: absolute;
  width: 10rem;
  height: 10rem;
  border: 0.2rem solid white;
  box-shadow: inset 0 0 1.5rem 0.5rem rgba(67, 195, 255, .2), 0 0 4rem 0.1rem rgba(67, 195, 255, .15);
  border-radius: 0.4rem;
}

.cubo > span:nth-child(1){
  transform: rotateY(90deg)translateZ(2rem);
}

.cubo > span:nth-child(2){
  transform: rotateY(90deg)translateZ(-2rem);
}

.cubo > span:nth-child(3){
  transform: rotateY(90deg)translateZ(-2rem);
}

.cubo > span:nth-child(4){
  transform: rotateY(90deg)translateZ(2rem);
}

.cubo > span:nth-child(5){
  transform: translateZ(-2rem);
}
.cubo > span:nth-child(6){
  transform: translateZ(2rem);
}

@keyframes rotate{
  0%{
    transform: rotateY(0deg)rotateX(0deg);
  }
  50%{
    transform: rotateY(360deg)rotateX(360deg);
  }
  100%{
    transform: rotateY(0deg)rotateX(0deg);
  }
}