@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Oxygen:wght@700&family=Raleway:wght@500&family=Roboto:wght@700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Oxygen:wght@700&family=Raleway:wght@500&family=Roboto:wght@700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Oxygen:wght@700&family=Raleway:wght@500&family=Roboto:wght@700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Oxygen:wght@700&family=Raleway:wght@500&family=Roboto:wght@700&display=swap');


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


body{
  background-color: #F0EFDE;
  font-family: 'Raleway', sans-serif;
  width: 100vw;
  height: 100vh;
}


header {
  display: flex;
  position: relative;
  width: 100%;
  height: 10%;
  padding: 10px;
  background: transparent;
  justify-content: flex-end;
  background-color: #3C3240;
  opacity: 0.9;
}


.bar {
  display: flex;
  position: relative;
  width: 65%;
  height: 95%;
  background-color: transparent;
  border-radius: 40px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  float: left;
}


.logoDev {
  display: flex;
  position: relative;
  display: block;
  width: 30%;
  height: 90%;
  margin-right: 30px;
  object-fit: contain;
  justify-content:start;
  align-items: center;
  background-position: center;
  background-size:contain;
  background-repeat: no-repeat;
  background-image: url('/assets/myPortfolio-26275173.png');

}


.homeDiv {
  display: flex;
  position: relative;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('/assets/forest_midle_green-134fcbe5.jpg');
}


.homeMain {
  display: flex;
  position: relative;
  margin-top: 30px;
  width: 95%;
  height: 79%;
  padding: 10px;
  background-color: transparent;
  justify-content: center;
  align-items: center;
}


.presentationHome {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  margin: 10px;
  padding: 5px;
  font-size: 25px;
  width: 100%;
  padding-left: 60px;
  padding-right: 60px;
  color:#F0EFDE;
  font-family: 'Raleway', sans-serif;
}


footer {
  display: flex;
  position: relative;
  padding: 10px;
  width: 100%;
  height: 15%;
  justify-content: end;
}


.language {
  display: flex;
  position: relative;
  width: 40px;
  height: 40px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAzRJREFUaEPtWYmNFEEM9GUCkRxEAhcJRyRwkQCRQCaHSlqjosZfz472kW6k0UrTvd0uu/y0+8Hu/Hm4c/ntDcC1LXikBd6Z2Sczwy+/f04g8evvLzP7eQT4cwG40M87hAEYgPh6ArZjCdvtA+cIroICyHcze9kDZI8FvphZpHGnxweSEBrG98/yjef4kAOBRcbPKoAfZqab88Y8DuE/nvwB32E1PJiP71jnUcBhHMoZg5gCwObfRHgI8kTOCC1jjj8Q0h0VwgJENIa1GSCD9ACQWmQKQDUfaYnnABh4zQ9TD4K9p8HIp3ROCGICQIWPhFPtR+uqFdlCLpz6F5SA/XZbQBeMhMfioI47asVhXs99RIXTPUuf6CzwSqtXC/E8UCPjLqzwm5yZaVTRDdYK16wAsFYrPjJ9Mq2ycEzJiEaYq3RLqZQBYE1hwWyjFfo4CAZccVytxRHvn0IyAKp9jSisUQjkMR7zutCHue4vnkMyJ9W1Nw6dAQBPXagqCFxyLKRxBEBD4iWF7PbaUDkCwPSBU1ZlLzKslxbd3Ix23f94j00k7ABkcT9KPG3SIQQc67vah8uQTZSLAHCYq2K6RqAOrFrA66YOOEejEQB24FsDsHHkyAKcVbtMzf6yYoGSFoEnu0w3A2CazBxLqtRIw3dPoUmt4pqZVqHKihULnBWFuhC3Eg6zarPbowQbUUhPTlUdxEmmq2sYwEoC5LmbQJGdnLxm71L7pcc3YT0Lk1H34dLCRvtt5M0ArNBotZxmSkDIqqvHY2HGPuJAw2C7skDLj2q+tmLCqqDKtFUbRB3Sez6TVgjnmSp7j87jFQA9VmbaWjl+qlanPpjK2dU6erjJYjY7fUULTnzZPA0g1Xl81J2e9GlYsxWNmD6RYJMO4H/RqbNA1OLAN2hP+/q8eWSpqqkV9V4nLZqRBRwEbl84rGk7XK3AbZCquRu160fCQ7CJBdxk2aVG1l5nKmnbHeBUIb5PVxstU0gz4soFh9dR0wsO0LKqvTbZecUC/Ocjr5g8G48vNViQvQCUVloeTOqmXVdKuvC5ACKrTK5Zd13ojaq7iepuac6RFrgKrjcAV1E7bfoXIoURQEHv1N8AAAAASUVORK5CYII=');
  background-color: #F0EFDE;
  margin: 10px;
  border: none;
  background-size: contain;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
}


.bHome, .bAbout, .bProject, .bContact {
  display: flex;
  position: relative;
  height: 90%;
  width: 25%;
  justify-content: center;
  align-items: center;
  border: none;
  font-size: 25px;
  margin: 5px;
  font-family: 'Raleway', sans-serif;
  background-color: transparent;
  color: #F0EFDE;
}


.bHome:hover , .bAbout:hover , .bProject:hover , .bContact:hover {
  color: #ED413E;
}


.homeImg {
  display: grid;
  position: relative;
  flex-direction: column;
  width: 50%;
  height: 600px;
  grid-template-columns: 50% 50%;
}


.firstPicture {
  display: flex;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
  border-radius: 20px 0 0 0;
  background-image: url('/assets/other_code_v2-1a71ee1e.png');
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


.secondPicture {
  display: flex;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
  border-radius: 0 20px 0 0;
  background-image: url('/assets/other_flowers-b8739642.png');
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


.thirdPicture {
  display: flex;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
  border-radius: 0 0 0 20px; 
  background-image: url('/assets/lego_modified_v2-35f6e9be.png');
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


.fourPicture {
  display: flex;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
  border-radius: 0 0 20px 0; 
  background-image: url('/assets/other_hands-ef8ad320.png');
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


.content {
  display: flex;
  position: relative;
  width: 100%;
  justify-content: center;
  align-items: center;
}


.texto {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 50%;
  height: 90%;
  justify-content: center;
  align-items: center;
}


.in {
  display: flex;
  position: relative;
  width: 70px;
  height: 70px;
  margin: 10px;
  object-fit: cover;
  background-size: contain;
  background-repeat: no-repeat;
}


.gitHub {
  display: flex;
  position: relative;
  width: 70px;
  height: 70px;
  object-fit: cover;
  margin: 10px;
  background-size: contain;
  background-repeat: no-repeat;
}


.titleUno {
  display: flex;
  position: relative;
  font-size: 50px;
  padding: 5px;
  color:#F0EFDE;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  justify-content: center;
}


.titleTres {
  display: flex;
  position: relative;
  font-size: 50px;
  padding: 5px;
  color:#F0EFDE;
  margin-bottom: 20px;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  justify-content: center;
}


.titleDos {
  display: flex;
  position: relative;
  font-size: 50px;
  padding: 5px;
  color: #ED413E;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  width: 100%;
}


.footRed {
  display: flex;
  position: relative;
  flex-direction: row; 
  margin-right: 20px;
}


@media(max-width: 480px) {

  body{
    background-color: #F0EFDE;
    font-family: 'Raleway', sans-serif;
    width: 100vw;
    height: 100vh;
  }

  header {
    display: flex;
    position: relative;
    width: 100%;
    height: 10%;
    padding: 10px;
    background: transparent;
    justify-content: flex-end;
    background-color: #3C3240;
    opacity: 0.9;
  }

  .logoDev {
    display: flex;
    position: relative;
    display: block;
    width: 25%;
    height: 90%;
    margin-right: 0;
    object-fit: contain;
    justify-content:start;
    align-items: center;
    background-position: center;
    background-size:contain;
    background-repeat: no-repeat;  
  }

  .bar {
    display: flex;
    position: relative;
    width: 75%;
    height: 95%;
    background-color: transparent;
    border-radius: 40px;
    padding: 5px;
    justify-content: center;
    align-items: center;
    float: left;
  }

  .homeMain {
    display: flex;
    position: relative;
    width: 100%;
    margin-top: 0;
    height: 80%;
    padding: 10px;
    background-color: transparent;
    justify-content: center;
    align-items: center;
  }

  footer {
    display: flex;
    position: relative;
    padding: 10px;
    width: 100%;
    height: 10%;
    justify-content: end;
  }

  .homeDiv {
    display: flex;
    position: relative;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .bHome, .bAbout, .bProject, .bContact {
    display: flex;
    position: relative;
    height: 90%;
    width: 25%;
    justify-content: center;
    align-items: center;
    border: none;
    font-size: 13px;
    margin: 3px;
    font-family: 'Raleway', sans-serif;
    background-color: transparent;
    color: #F0EFDE;
  }

  .titleUno, .titleTres {
    display: flex;
    position: relative;
    font-size: 20px;
    padding: 5px;
    color:#F0EFDE;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    justify-content: center;
  }

  .titleDos {
    display: flex;
    position: relative;
    font-size: 20px;
    padding: 5px;
    color: #ED413E;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    width: 100%;
  }

  .content {
    display: flex;
    position: relative;
    width: 100%;
    height: 90%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .presentationHome {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 10px;
    font-size: 15px;
    width: 100%;
    padding-left: 45px;
    padding-right: 45px;
    color:#F0EFDE;
    font-family: 'Raleway', sans-serif;
  }

  .texto {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
    height: 80%;
  } 

  .homeImg {
    display: grid;
    position: relative;
    flex-direction: column;
    width: 80%;
    height: 600px;
    grid-template-columns: 50% 50%;
  }



}

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

body {
  background-color: #F0EFDE;
  font-family: 'Raleway', sans-serif;
  width: 100vw;
  height: 100vh;
}

header {
    display: flex;
    position: relative;
    width: 100%;
    height: 10%;
    padding: 10px;
    background: transparent;
    justify-content: flex-end;
    background-color: #3C3240;
    opacity: 0.9;
  }

.barProject {
    display: flex;
  position: relative;
  width: 65%;
  height: 95%;
  background-color: transparent;
  border-radius: 40px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  float: left;
  }

.projectDiv {
    display: flex;
    position: relative;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('/assets/forest_midle_green-134fcbe5.jpg');
  }

.projectMain {
    display: flex;
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: 10px;
    background-color: #3C3240;
    justify-content: center;
    align-items: center;
    opacity: 0.95;
}

.proDescription {
    display: flex;
    position: relative;
    font-size: 18px;
    color: #F0EFDE;
    font-size: 15px;
    margin-top: 10px;
    width: 80%;
}

.proTitle {
    display: flex;
    position: relative;
    margin: 10px;
    font-size: 20px;
    color: #F0EFDE;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
}

.searchDiv {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    justify-content: start;
    margin-top: 10px;
    width: 25%;
    height: 85%;
}

.search {
    display: flex;
    position: relative;
    border-color: #483948;
    background-color: #F0EFDE;
    border-radius: 40px;
    padding: 5px;
    margin: 5px;
    width: 85%;
    height: 60%;
}

.search {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAh1JREFUaEPtmIFNxTAMRI9JgEmASYBJgEmASYBJYBPQSbVkmTZxYkdNpUb6EuLnJ36+s9P0AgcfFwePHyfA3gqeChxZgVsANwAeAFwpkJ/l7zcAXwA+R0L2WOhpJehSjAR5HwXSAsAsvwJg5lsHVSHIS+sPa/O9AGvBS1DcQ6zCefIRe+kYnrMhvAAfJvP09V0tO8tvqJqukVQID4ANvjUABn8PgL+T8bhYypGD8pQaADsMMxjd2FqQ9rsORw9UHyW+lfxe22zFRQiuJ4NFTSVCo6SAzT4zJj2+d1O9ZooKJQBahxtypGRrUVOrwEYQOuhKANo+aUUHQDeF8LpegAz7iO00QGtH+2fdEsCvml3rVi01wUcRaalDAbSFwl5VhLq2hgJoqUcBDK2BVK8qBbSy4dryngPRQ0zit4dZuLZKC9jNwn41LTTlbKllQBccT07WQu9prLsPFant7epstUWsCr1WsuuEi1foagCcZ5+JqAAD8D4C2MynZb9lIRuE54pYuoKm+L8FgHPXMsn/E0Z/eGdeuzdzjr6ZpUB4LKSLiQHwfNCB1IpN1OKbCXszC0O0AjBYuSJuZVqA1my2dr0MQfQAWEXELpfLF7WXWakQUYCafba+T4PYC0BbUb+taLbTngApEHsDhCFmAAhBzALQDTETQBfEbADNEDMCrEFs3slnBdAQxZN9ZgDXKX8CuNI0cNKpwMDkupY+vAJ/63SAMe1mtLQAAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    padding-left: 45px;
    background-position: 5px center;
    box-shadow: 3px 3px 3px 2px rgba(0, 0, 0, 0.2);
    font-size: 19px;
    background-size: 30px;
}

.logo {
    display: flex;
    position: relative;
    width: 20px;
}

.aboutProject {
    display: grid;
    position: relative;
    background-color: #3C3240;
    justify-content: center;
    align-items: center;
    overflow: scroll;
    width: 100%;
    height: 100%;
    margin-top: 10px;
    grid-template-columns: 33% 33% 33%;
}

.divProject {
    display: flex;
    position: relative;
    margin: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.divProject .card-oneFront {
    display: flex;
    position: relative;
    display: block;
    width: 85%;
    height: 200px;
    object-fit: contain;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-image: url('/assets/cipher_other-54d246eb.png');
    background-position: center;
    background-size: contain;
    background-color: #e0dab8;
    background-repeat: no-repeat;
}

.divProject .card-oneBack {
    display: flex;
    position: relative;
    display: none;
    width: 85%;
    height: 200px;
    object-fit: contain;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-position: center;
    background-size: contain;
    background-color: #bdbdbd;
    background-repeat: no-repeat;
}

.divProject:hover .card-oneFront {
    display: none;
}

.divProject:hover .card-oneBack {
    display: block;
}

.card-oneBack {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.reverse {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    margin: 10px;
    padding: 10px;
    height: 50%;
    width: 90%;
}

.buttonDiv {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: 50%;
    width: 90%;
}

.goDemo, .goCode {
    display: flex;
    position: relative;
    width: 30%;
    height: 40%;
    margin: 10px;
    font-family: 'Fredoka', sans-serif;
}

button {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color: #483948;
    border: none;
    border-radius: 10px;
}

a {
    color: #F0EFDE;
    text-decoration: none;
    font-family: 'Fredoka', sans-serif;
    font-size: 17px;
}

a:hover {
    color: #ED413E;
}

.divProject .card-twoFront {
    display: flex;
    position: relative;
    display: block;
    width: 85%;
    height: 200px;
    object-fit: contain;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-image: url('/assets/ghibli1-4f9cf95e.png');
    background-position: center;
    background-size: contain;
    background-color: #c8dfe2;
    background-repeat: no-repeat;
}

.divProject .card-twoBack {
    display: flex;
    position: relative;
    display: none;
    width: 85%;
    height: 200px;
    object-fit: contain;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-position: center;
    background-size: contain;
    background-color: #bdbdbd;
    background-repeat: no-repeat;
}

.divProject:hover .card-twoFront {
    display: none;
}

.divProject:hover .card-twoBack {
    display: block;
}

.divProject .card-threeFront {
    display: flex;
    position: relative;
    display: block;
    width: 85%;
    height: 200px;
    object-fit: contain;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-image: url('/assets/markdown-8458d83a.png');
    background-position: center;
    background-size: contain;
    background-color: #e0dab8;
    background-repeat: no-repeat;
}

.divProject .card-threeBack {
    display: flex;
    position: relative;
    display: none;
    width: 85%;
    height: 200px;
    object-fit: contain;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-position: center;
    background-size: contain;
    background-color: #bdbdbd;
    background-repeat: no-repeat;
}

.divProject:hover .card-threeFront {
    display: none;
}

.divProject:hover .card-threeBack {
    display: block;
}

.divProject .card-fourFront {
    display: flex;
    position: relative;
    display: block;
    width: 85%;
    height: 200px;
    object-fit: contain;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-image: url('/assets/recipes-848295c7.jpg');
    background-position: center;
    background-size: contain;
    background-color: #c8dfe2;
    background-repeat: no-repeat;
}

.divProject .card-fourBack {
    display: flex;
    position: relative;
    display: none;
    width: 85%;
    height: 200px;
    object-fit: contain;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-position: center;
    background-size: contain;
    background-color: #bdbdbd;
    background-repeat: no-repeat;
}

.divProject:hover .card-fourFront {
    display: none;
}

.divProject:hover .card-fourBack {
    display: block;
}

.divProject .card-fiveFront {
    display: flex;
    position: relative;
    display: block;
    width: 85%;
    height: 200px;
    object-fit: contain;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-image: url('/assets/Burger-Download-03e2e8d1.png');
    background-position: center;
    background-size: contain;
    background-color: #e0dab8;
    background-repeat: no-repeat;
}

.divProject .card-fiveBack {
    display: flex;
    position: relative;
    display: none;
    width: 85%;
    height: 200px;
    object-fit: contain;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-position: center;
    background-size: contain;
    background-color: #bdbdbd;
    background-repeat: no-repeat;
}

.divProject:hover .card-fiveFront {
    display: none;
}

.divProject:hover .card-fiveBack {
    display: block;
}

@media(max-width: 480px) {

    body {
        background-color: #F0EFDE;
        font-family: 'Raleway', sans-serif;
        width: 100vw;
        height: 100vh;
      }

    header {
        display: flex;
        position: relative;
        width: 100%;
        height: 10%;
        padding: 10px;
        background: transparent;
        justify-content: flex-end;
        background-color: #3C3240;
        opacity: 0.9;
      }

      .barProject {
        display: flex;
      position: relative;
      width: 75%;
      height: 95%;
      background-color: transparent;
      border-radius: 40px;
      padding: 5px;
      justify-content: center;
      align-items: center;
      float: left;
      }

    .searchDiv {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
        width: 25%;
        height: 85%;
    }

    .search {
        display: flex;
        position: relative;
        border-color: #483948;
        background-color: #F0EFDE;
        border-radius: 40px;
        padding-left: 34px;
        font-size: 15px;
        margin: 0;
        width: 100%;
        height: 60%;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAh1JREFUaEPtmIFNxTAMRI9JgEmASYBJgEmASYBJYBPQSbVkmTZxYkdNpUb6EuLnJ36+s9P0AgcfFwePHyfA3gqeChxZgVsANwAeAFwpkJ/l7zcAXwA+R0L2WOhpJehSjAR5HwXSAsAsvwJg5lsHVSHIS+sPa/O9AGvBS1DcQ6zCefIRe+kYnrMhvAAfJvP09V0tO8tvqJqukVQID4ANvjUABn8PgL+T8bhYypGD8pQaADsMMxjd2FqQ9rsORw9UHyW+lfxe22zFRQiuJ4NFTSVCo6SAzT4zJj2+d1O9ZooKJQBahxtypGRrUVOrwEYQOuhKANo+aUUHQDeF8LpegAz7iO00QGtH+2fdEsCvml3rVi01wUcRaalDAbSFwl5VhLq2hgJoqUcBDK2BVK8qBbSy4dryngPRQ0zit4dZuLZKC9jNwn41LTTlbKllQBccT07WQu9prLsPFant7epstUWsCr1WsuuEi1foagCcZ5+JqAAD8D4C2MynZb9lIRuE54pYuoKm+L8FgHPXMsn/E0Z/eGdeuzdzjr6ZpUB4LKSLiQHwfNCB1IpN1OKbCXszC0O0AjBYuSJuZVqA1my2dr0MQfQAWEXELpfLF7WXWakQUYCafba+T4PYC0BbUb+taLbTngApEHsDhCFmAAhBzALQDTETQBfEbADNEDMCrEFs3slnBdAQxZN9ZgDXKX8CuNI0cNKpwMDkupY+vAJ/63SAMe1mtLQAAAAASUVORK5CYII=');
        background-size: contain;
    }

      .projectDiv {
        display: flex;
        position: relative;
        width: 100vw;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .projectMain {
        display: flex;
        position: relative;
        width: 100%;
        height: 90%;
        padding: 10px;
        background-color: #3C3240;
        justify-content: center;
        align-items: center;
        opacity: 0.95;
    }

    .bHome, .bAbout, .bProject, .bContact {
        display: flex;
        position: relative;
        height: 90%;
        width: 25%;
        justify-content: center;
        align-items: center;
        border: none;
        font-size: 13px;
        margin: 3px;
        font-family: 'Raleway', sans-serif;
        background-color: transparent;
        color: #F0EFDE;
      }

      .proTitle {
        display: flex;
        position: relative;
        margin: 10px;
        font-size: 15px;
        color: #F0EFDE;
        justify-content: center;
        align-items: center;
        font-family: 'Roboto', sans-serif;
    }

    .aboutProject {
        display: grid;
        position: relative;
        background-color: #3C3240;
        align-items: center;
        overflow: scroll;
        width: 100%;
        height: 100%;
        margin-top: 10px;
        grid-template-columns: 33% 33% 33%;
    }

    .aboutProject {
        display: grid;
        position: relative;
        background-color: #3C3240;
        justify-content: center;
        align-items: center;
        overflow: scroll;
        width: 100%;
        height: 100%;
        margin-top: 10px;
        grid-template-columns: 50% 50%;
    }
    
    .divProject {
        display: flex;
        position: relative;
        margin: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
    } 

    .card-oneFront, .card-oneBack, .card-twoFront, .card-twoBack, 
    .card-threeFront, .card-threeBack, .card-fourFront, .card-fourBack, 
    .card-fiveFront .card-fiveBack {
        display: flex;
        position: relative;
        display: block;
        width: 90%;
        height: 70%;
        padding-top: 10px;
        object-fit: contain;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        margin-right: 0;
        background-position: center;
        background-size: contain;
        background-color: #e0dab8;
        background-repeat: no-repeat;
    }

    .reverse {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        padding: 5px;
        height: 100px;
        width: 95%;
    }

    .buttonDiv {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        height: 30%;
        width: 100%;
    }

    .goDemo, .goCode {
        display: flex;
        position: relative;
        width: 80%;
        height: 60%;
        margin: 5px;
        padding: 5px;
    }

    .textButton {
        font-family: 'Raleway', sans-serif;
        font-size: 12px;
    }

    .proDescription {
        display: flex;
        position: relative;
        font-size: 18px;
        color: #F0EFDE;
        font-size: 11px;
        margin-top: 10px;
        width: 90%;
        height: 50px;
    }
    
}










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

body {
  background-color: #F0EFDE;
  font-family: 'Raleway', sans-serif;
  width: 100vw;
  height: 100vh;
}

header {
    display: flex;
    position: relative;
    width: 100%;
    height: 10%;
    padding: 10px;
    justify-content: flex-end;
  }

.barContact {
  display: flex;
  position: relative;
  width: 65%;
  height: 95%;
  background-color: transparent;
  border-radius: 40px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  float: left;
  }

.contactDiv {
    display: flex;
    position: relative;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('/assets/forest_midle_green-134fcbe5.jpg');
  }

.contactMain {
    display: flex;
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: 10px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #3C3240;
    opacity: 0.95;
}

.dContact {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    flex-direction: row;
}

.divInfo {
    display: flex;
    position: relative;
    width: 60%;
    height: 80%;
    margin-left: 40px;
    padding: 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contactImg {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    width: 40%;
    height: 80%;
    padding: 10px;
    margin-right: 40px;
}

.request {
    display: flex;
    position: relative;
    padding: 10px;
    height: 35%;
    width: 100%;
    font-size: 22px;
    color:#F0EFDE;
    font-family: 'Raleway', sans-serif;
}

.correo {
  display: flex;
    position: relative;
    padding: 10px;
    height: 10%;
    width: 100%;
    font-size: 22px;
    color: #ED413E;
    align-items: center;
    justify-content: center;
}

.ancorLink, .ancorGit {
  display: flex;
  position: relative;
  font-size: 25px;
  padding: 10px;
  width: 50%;
  background-color: #ED413E;
  margin: 10px;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  border-radius: 20px;
}

.ancorLink:hover , .ancorGit:hover {
  color: #3C3240;
}

.contactImg {
  display: flex;
  position: relative;
  width: 40%;
  height: 60%;
  margin-top: 40px;
  margin-left: 40px;
  border-radius: 50px;
  align-items: center;
  justify-content: center;
}

.imgForest {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit:fill;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('/assets/work_space_purpleTres-8c1da1c6.png');
  border-radius: 30px;
}

@media(max-width: 480px) {
  body {
    background-color: #F0EFDE;
    font-family: 'Raleway', sans-serif;
    width: 100vw;
    height: 100vh;
  }

  header {
    display: flex;
    position: relative;
    width: 100%;
    height: 10%;
    padding: 10px;
    background: transparent;
    justify-content: flex-end;
    background-color: #3C3240;
    opacity: 0.9;
  }

  .barContact {
    display: flex;
  position: relative;
  width: 75%;
  height: 95%;
  background-color: transparent;
  border-radius: 40px;
  padding: 5px;
  justify-content: center;
  align-items: center;
  float: left;
  }

  .contactMain {
    display: flex;
    position: relative;
    width: 100vw;
    height: 90%;
    padding: 10px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-color: #3C3240;
    opacity: 0.95;
}

  .contactDiv {
    display: flex;
    position: relative;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dContact {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.divInfo {
  display: flex;
  position: relative;
  width: 100%;
  height: 80%;
  margin-left: 0;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.request {
  display: flex;
  position: relative;
  padding: 10px;
  margin: 10px;
  height: 50%;
  width: 100%;
  font-size: 15px;
  color:#F0EFDE;
  font-family: 'Raleway', sans-serif;
  align-items: center;
  justify-content: center;
}

.correo {
  display: flex;
    position: relative;
    padding: 10px;
    margin: 10px;
    height: 10%;
    width: 100%;
    font-size: 18px;
    color: #ED413E;
    align-items: center;
    justify-content: center;
}

.ancorLink, .ancorGit {
  display: flex;
  position: relative;
  font-size: 15px;
  padding: 10px;
  width: 50%;
  background-color: #ED413E;
  margin: 8px;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  border-radius: 20px;
}

.contactImg {
  display: flex;
  position: relative;
  width: 90%;
  height: 60%;
  margin-top: 0;
  margin-left: 40px;
  align-items: center;
  justify-content: center;
}

.imgForest {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit:fill;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 20px;
}

}



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

body{
  background-color: #F0EFDE;
  font-family: 'Raleway', sans-serif;
  width: 100vw;
  height: 100vh;
}

header {
  display: flex;
  position: relative;
  width: 100%;
  height: 10%;
  padding: 10px;
  justify-content: flex-end;
}

.barAbout {
  display: flex;
  position: relative;
  width: 65%;
  height: 95%;
  background-color: transparent;
  border-radius: 40px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  float: left;
}

.aboutDiv {
  display: flex;
  position: relative;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('/assets/forest_midle_green-134fcbe5.jpg');
}

.aboutMain {
  display: flex;
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 10px;
  background-color: #3C3240;
  opacity: 0.95;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dAbout {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.pDescription {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    width: 100%;
    color: #F0EFDE;
    padding: 10px;
  }

.pExperiencia {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    width: 100%;
    color: #483948;
  }

.skillDes {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    width: 100%;
    color: #F0EFDE;
    margin: 10px;
    padding: 10px;
  }

.firstTitle, .titleSkill {
    display: flex;
    position: relative;
    margin-bottom: 10px;
    color: #ED413E;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
  }

.firstAbout {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 45%;
  padding: 10px;
}

.secundExpe {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 33%;
  padding: 10px;
}

.skillBar {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 90%;
  height: 45%;
  padding: 10px;
}

.dimg {
  display: flex;
  position: relative;
  width: 40%;
  height: 65%;
  padding: 10px;
  justify-content: center;
  align-items: center;
  object-fit: cover;
  margin-left: 15px;
}

.imgDiv {
  display: flex;
  position: relative;
  width: 90%;
  height: 100%;
  background-color: #F0EFDE; 
  border-top-right-radius: 10px;
  border-top-left-radius: 70px;
  border-bottom-right-radius: 70px;
  align-items: center;
  justify-content: center;
}

.dimagen {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 90%;
  padding: 15px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('/assets/Jackeline_García-remove_v3-bf53657d.jpg');
  border-top-right-radius: 20px;
  border-top-left-radius: 70px;
  border-bottom-right-radius: 70px;
}

.allSkills {
  display: grid;
  position: relative;
  flex-direction:row;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  margin-top: 10px;
  grid-template-columns: 25% 25% 25% 25%;
}

.aboutDescription {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  margin-top: 40px;
  width: 60%;
  height: 90%;
  margin-left: 10px;
}

.skillDesOne {
  display: flex;
  position: relative;
  background-image: url('/assets/JavaScript-logo-84f32517.png');
  width: 90%;
  height: 80%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

.skillDesTwo {
  display: flex;
  position: relative;
  background-image: url('/assets/HTML5-56c2e8ad.png');
  width: 90%;
  height: 80%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

.skillDesThree {
  display: flex;
  position: relative;
  background-image: url('/assets/CSS3-661f91b0.png');
  width: 90%;
  height: 80%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

.skillDesFour {
  display: flex;
  position: relative;
  background-image: url('/assets/angular-97c84d77.png');
  width: 90%;
  height: 80%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

.skillDesFive {
  display: flex;
  position: relative;
  background-image: url('/assets/typescript_logov2-3ff4a59f.png');
  width: 90%;
  height: 80%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

.skillDesSix {
  display: flex;
  position: relative;
  background-image: url('/assets/sass_logo-b312546f.png');
  width: 90%;
  height: 80%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

.skillDesSeven {
  display: flex;
  position: relative;
  background-image: url('/assets/git-bash-logo-c14742ac.png');
  width: 90%;
  height: 80%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

.skillDesEight {
  display: flex;
  position: relative;
  background-image: url('/assets/github-d83ddf4e.png');
  width: 90%;
  height: 80%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

.skillDesNine {
  display: flex;
  position: relative;
  background-image: url('/assets/r-free-Download-b14d1137.png');
  width: 90%;
  height: 80%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

.skillDesTen {
  display: flex;
  position: relative;
  background-image: url('/assets/firebase-ad8ba1bf.png');
  width: 90%;
  height: 80%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

.skillDesEleven {
  display: flex;
  position: relative;
  background-image: url('/assets/figma-logo-d9fad4a5.png');
  width: 90%;
  height: 80%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}

.skillDesTwelve {
  display: flex;
  position: relative;
  background-image: url('/assets/nodejs-logo-vector-9e3e9bce.svg');
  width: 90%;
  height: 70%;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #FFFF;
}

@media(max-width: 480px) {

  body {
    background-color: #F0EFDE;
    font-family: 'Raleway', sans-serif;
    width: 100vw;
    height: 100vh;
  }

  header {
    display: flex;
    position: relative;
    width: 100%;
    height: 10%;
    padding: 10px;
    background: transparent;
    justify-content: flex-end;
    background-color: #3C3240;
    opacity: 0.9;
  }

  .barAbout {
    display: flex;
    position: relative;
    width: 75%;
    height: 95%;
    background-color: transparent;
    border-radius: 40px;
    padding: 5px;
    justify-content: center;
    align-items: center;
    float: left;
  }

  .aboutMain {
    display: flex;
    position: relative;
    width: 100%;
    height: 90%;
    padding: 10px;
    background-color: #3C3240;
    opacity: 0.95;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .bHome, .bAbout, .bProject, .bContact {
    display: flex;
    position: relative;
    height: 90%;
    width: 25%;
    justify-content: center;
    align-items: center;
    border: none;
    font-size: 13px;
    margin: 3px;
    font-family: 'Raleway', sans-serif;
    background-color: transparent;
    color: #F0EFDE;
  }

  .dimg {
    display: flex;
    position: relative;
    width: 70%;
    height: 65%;
    padding: 10px;
    justify-content: center;
    align-items: center;
    object-fit: cover;
    margin-left: 0;
  }

  .firstAbout {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
    padding: 10px;
  }

  .dAbout {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .pDescription {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    width: 100%;
    color: #F0EFDE;
    padding: 10px;
    height: 90%;
  }

  .aboutDescription {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-top: 10px;
    width: 100%;
    height: 90%;
    margin-left: 0;
  }

  .firstTitle, .titleSkill {
    display: flex;
    position: relative;
    margin-bottom: 10px;
    color: #ED413E;
    width: 100%;
    font-size: 17px;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
  }

  .skillBar {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 90%;
    height: 50%;
    padding: 10px;
  }
  
}