@import "global.css";
@import "header.css";
@import "footer.css";

.foto {
  width: 80%;
  margin: auto;
}

.foto img {
  width: 100%;
  border-radius: 5px;
  margin: 20px;
}

.info {
  margin: 20px;
  margin-top: 20px;
  background-color: var(--color-yellow);
  border-radius: 10px;
}

.contact {
  width: calc(50% - 10px);
  margin: 40px auto;
  text-align: center;
}

.title {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

.text {
  margin: 20px;
}

.skills {
  margin: 20px;
}

.badge {
  margin: 10px;
}

@media (min-width: 900px) {
  .info {
    margin-top: 105px;
  }
}

/* @media (min-width: 900px) {
  .info {
    display: flex;
    justify-content: center;
    align-items: top;
  }
} */

@media (max-width: 600px) {
  .foto {
    width: calc(35% - 10px);
  }

  .foto img {
    width: 100%;
    border-radius: 5px;
  }

  .info {
    display: flex;
    justify-content: center;
    align-items: top;
    margin: 20px;
    margin-top: 20px;
    gap: 20px;
  }

  .contact {
    width: calc(50% - 10px);
    margin-top: 40px;
    text-align: center;
  }

  .title {
    font-size: 30px;
  }

  h2 {
    font-size: 25px;
  }

  .text {
    margin: 20px;
  }

  .skills {
    margin: 20px;
  }

  .badge {
    margin: 10px;
  }
}