html {
    font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Freeman", sans-serif;
  background: #000033;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

h1, h3, p {
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin: 0;
    padding: 0;
    color: #339933;
    text-transform: uppercase;
}

a {
    outline: none;
    text-decoration: none;
    padding: 2px 1px 0;
    color: #339933; /* Añadido color aquí */
}

.mail a {
    color: #339933;
}

.mail a:link {
    color: #339933;
}

.mail a:visited {
    color: #339933;
}

.mail a:hover {
    color: #339933;
    border-bottom: 1px solid;
    background: #000033;
}

.mail a:active {
    color: #339933;
}

h1 {
    margin: 4rem 0 1rem; /* Reduced from 20rem */
    font-size: 4rem;
}

h3 {
    font-size: 2.4rem;
    color: #666699;
}

p {
    font-weight: normal;
    font-size: 1.2rem;
    color: #000FFF;
}

.main-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Center vertically */
  padding: 24px;
  box-sizing: border-box;
  margin-top: 0; /* Remove extra space from the top */
}

.image {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image img {
  max-width: 100%;
  height: auto;
}

.textos {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    margin-top: 0; /* Bring text closer to logo */
    text-align: center;
}

.textos h1, .textos h3, .mail {
  text-align: center;
}

/* Responsive styles for smartphones */
@media (max-width: 600px) {
  .main-container {
    padding: 12px;
    margin-top: 2vh; /* Less top margin on mobile */
  }
  .image {
    max-width: 320px;
  }
  .image img {
    width: 100%;
    max-width: 320px;
  }
  .textos {
    max-width: 100%;
    margin-top: 0; /* No extra space on mobile */
  }
  .textos h1 {
    font-size: 5rem;
  }
  .textos h3, .mail {
    font-size: 2rem;
  }
}