@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap');
@import url(about.css);
@import url(projects.css);
@import url(contact.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0px;
    cursor:crosshair;
    background-image: linear-gradient(#ffffff, #ffffff, #76a5b1ab, #76a5b1ab, #ffffff);
}

.clippath-shadow {
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.7));
}

.landing {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: auto;
    height: 100vh;
    background-image: url('images/back-img.jpg');
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 71% 90%, 50% 100%, 30% 90%, 0 90%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* SECTION LANDING */

.about {
    display: flex;
    animation-name: moveUp;
    animation-duration: 3s;
}

.projects {
    display: flex;
}

.contact {
    display: flex;
    animation-name: moveDown;
    animation-duration: 3s;
}


.my-links {
    font-family: 'Rubik Glitch';
    font-size: 3rem;
    text-decoration: none;
}

.my-links .first-shown {
    color: #2a3a40;
}

.my-links .second-shown {
    display: none;
}

.my-links:hover .first-shown {
    display: none;
    cursor:crosshair;
}

.my-links:hover .second-shown {
    display: inline;
    color: #ffffff;
    text-transform: uppercase;
    cursor:crosshair;
}

.glitch .second-shown {
    font-size: inherit;
    text-shadow:
        0.1em 0 0 rgba(39, 86, 160, 0.75),
        0 -.05em 0 rgba(255, 25, 0, 0.628),
        0.1em 0 0 rgba(7, 254, 123, 0.985);
}

.glitch .first-shown {
    font-size: inherit;
    text-shadow:
        0.1em 0 0 rgb(255, 255, 255),
        0 -.05em 0 rgba(255, 255, 255, 0.9) ,
        0.1em 0.06em 0 #4ea9c1dc;
}

@keyframes moveDown {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    50% {
        opacity: 0;
    }

    100%{
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes moveUp {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    50% {
        opacity: 0;
    }

    100%{
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes float-text {
  0% { transform: translate(0,  0); }
  50%  { transform: translate(0, 30px); }
  100%   { transform: translate(0, -0px); }
}

@keyframes turn-around {
  0% { transform: translate(0,  0); }
  50%  { transform: translate(0, 0); }
  100%   { transform: rotateY(180deg); }
}

@media (max-width: 600px)
{
  .facet_sidebar
  {
    display: none;
  }
}

@media only screen and (min-width: 667px) and (max-width: 959px) {

  /* ABOUT */
  .about-me {
    display: flex;
    flex-direction: column;
    justify-content: start;
  }

  .about-title, .projects-title {
    font-size: 1.5rem;
  }

  .container-about {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }

  .turn-around, .turn-around-side {
    height: 15rem;
    width: 15rem;
    border-radius: 50%;
    margin-bottom: 3rem;
  }

  .description-about h3 {
    font-size: 0.9rem;
    text-align: justify;
  }
  .container-habilities {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
}

  /* SKILLS */

  .container-habilities {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 20rem;
    width: 30rem;
    flex-wrap: wrap;
    align-content: center;
  }

  .permanent, .tools-side {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .permanent img, .tools-side-front img, .tools-side-back img {
    height: 2rem;
    width: 2rem;

  }

  .description-about h2 {
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .description-about h3 {
    width: 30rem;
  }

  /* PROJECTS */

  .global-projects {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    flex-direction: column;
  }

  .text-front {
    font-size: 1.3rem;
  }

  .text-back {
    font-size: 0.9rem;
  }

  .card, .card-side {
    height: 15rem;
    width: 15rem;
  }

  .row-projects-1, .row-projects-2 {
    margin: 1rem;
  }

}

@media only screen and (max-width: 666px) {

  /* ABOUT */
  .about-me {
    display: flex;
    flex-direction: column;
    justify-content: start;
  }

  .about-title, .projects-title {
    font-size: 1rem;
  }

  .container-about {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }

  .container-title {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .turn-around, .turn-around-side {
    height: 15rem;
    width: 15rem;
    border-radius: 50%;
    margin-bottom: 3rem;
  }

  /* SKILLS */

  .container-habilities {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 20rem;
    width: 30rem;
    flex-wrap: wrap;
    align-content: center;
  }


  .tools, .permanent, .tools-side {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 20rem;
  }

  .permanent img, .tools-side-front img, .tools-side-back img {
    height: 2rem;
    width: 2rem;

  }

  .description-about h2 {
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .description-about h3 {
    font-size: 0.9rem;
    text-align: justify;
    width: 20rem;
  }

  /* PROJECTS */

  .global-projects {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    flex-direction: column;
  }

  .text-front {
    font-size: 1.3rem;
  }

  .text-back {
    font-size: 0.9rem;
    width: 20rem;
  }

  .card, .card-side {
    height: 15rem;
    width: 15rem;
  }

  .row-projects-1, .row-projects-2 {
    margin: 1rem;
  }

  .permanent figcaption, .tools-side figcaption {
    display: none;
  }
  .permanent figure, .tools-side figure {
    margin: 0.5rem;
  }

}