@import "./styles.css";

/*main*/
.main {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10%;
}

.main-div-image {
  flex: 1 0 100%;
}

.main-profile-image {
  border-radius: 1rem;
  display: block;
  height: 400px;
  margin: 0 auto;
  object-fit: contain;
  padding: 1rem;
  width: 100%;
}

.main-section {
  display: flex;
  flex-direction: column;
  flex: 1 0 100%;
  gap: 1rem;
  justify-content: center;
  padding: 1rem;
}

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

.main-paragraph {
  text-align: justify;
}

fieldset {
  padding: 1rem 0;
  width: 50%;
  align-self: center;
}

form {
  align-items: center;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  padding: 8px;
}

textarea,
input {
  width: 80%;
}

input {
  padding: 1rem;
}

textarea {
  padding: 1rem;
}

button {
  cursor: pointer;
  font-size: 1rem;
  padding: 1rem;
  width: 80%;
}


@media (width < 62.5em) {
  .main-paragraph {
    text-align: center;
  }

  fieldset {
    width: 100vw;
  }
}