@import url(common.css);

/* keterangan */
main article {
  /* width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto; */
  margin-top: 40px;
  margin-bottom: 60px;
  text-align: left;
  padding-top: 20px;
  background-color: #EBE3D9;
}
main article h1 {
  text-align: center;
  font-weight: bold;
  font-size: 23px;
  margin-bottom: 60px;
}
main article > p {
  padding-bottom: 10px;
  line-height: 1.5;
  font-weight: bold;
}

main aside ul {
  font-size: 18px;
  line-height: 1.8;
  list-style: disc;
  margin-left: 1.5em;
  padding-bottom: 20px;
}
main li span {
  font-size: 20px;
  padding-left: 5px;
  color: red;
}
/* form general*/
main form {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
}
main dl div {
  display: flex;
  padding-bottom: 20px;
  align-items: baseline;
}
main dt {
  font-weight: bold;
  flex-basis: 12em;
}
main dt span {
  font-size: 15px;
  padding-left: 5px;
  color: red;
}

main dd {
  flex: 1;
}

/* dd one to one */
main dd.flexname {
  display: flex;
  gap: 20px;
}
main dd.flexname input {
  width: 100%;
  padding-left: 10px;
}

main dd.flexorder {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
main dd.flexorder input {
  padding: 1px;
}
main dd.flexorder label:nth-child(odd) {
  flex-basis: 75%;
}

/* label up and color */

main dd.flexorder label,main dd.up {
  display: flex;
  align-items: center;
  gap: 10px;
}

main dd.flexorder label span, main dd.up span{
  white-space: nowrap;
  color: rgba(213, 153, 81, 0.836);
}

/* form inside example word */
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main textarea {
  width: 50%;
  padding: 8px;
  font: inherit;
}

main input[type="date"],
main input[type="time"] {
  width: 40%;
  padding: 8px;
  font: inherit;
}

main input[type="number"],
main dd select {
  padding: 8px;
  font: inherit;
}

/* text area colomn */
main textarea {
  height: 12em;
  line-height: 1.5;
  vertical-align: -10.2em;
  width: 100%;
}
.flexname .up {
  margin-bottom: 30px;
}
/* send button */
main form p {
  border-top: 1px solid #666;
  padding-top: 20px;
  text-align: center;
}
main form button {
  font: inherit;
  padding: 10px 22px 10px 30px;
  border: 1px solid #666;
  background-color: #fff;
  border-radius: 30px;
}

@media screen and (max-width: 1100px) {
  main article {
    margin: 20px;
    padding-top: 20px;
    background-color: antiquewhite;
  }
  main dd.flexname {
    display: block;
  }
  main dd.flexorder {
    display: block;
  }
  /* label up and color */
  main dd.flexorder label {
    flex-direction: column-reverse;
    gap: 5px;
    align-items: unset;
  }
  main input[type="number"] {
    width: 20%;
  }
}

@media screen and (max-width: 750px) {
  main dl div {
    display: block;
  }
  main dt {
    font-weight: bold;
    flex-basis: 12em;
    margin-bottom: 10px;
  }
}
/* main dt {
    margin-bottom: 15px;
  }
  main dd.flexname {
    display: block;
  }

  main dd.flexorder label {
    display: block;
    align-items: center;
    gap: 10px;
  }
  main dd.flexorder label {
    flex-direction: column-reverse;
    gap: 5px;
    align-items: unset;
  } */