style.css

body {
  background-color: black;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
}
header {
  height: 44px;
  color: palevioletred;
  font-size: 30px;
  border-bottom: 1px solid #ededed;
  text-align: center;
}
.details {
  border-radius: 10px;
  margin: 0 5%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.details > div {
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.details > div > p {
  color: white;

  font-size: 28px;
  font-family: "Striper", sans-serif;
  color: rgb(166, 219, 21);
}
.details > div > input {
  background-color: transparent;
  text-align: center;

  width: 80%;
  border: 1px solid #ededed;
  height: 36px;
  color: palevioletred;
}
.mint {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5%;
}
.mint_btn {
  background-color: transparent;
  border: 1px solid #ededed;
  width: 40vw;
  height: 60px;
  color: palevioletred;
  font-size: 28px;
}
.mint_btn:hover {
  background-color: palevioletred;
  color: #ededed;
  cursor: pointer;
}
@media (min-width: 769px) {
  header {
    height: 64px;

    font-size: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .details {
    height: 50%;
    flex-direction: row;
  }
  .details > div > p {
    font-size: 36px;
  }
  .details > div > input {
    width: 80%;
    height: 60px;
  }
  .mint_btn {
    width: 10vw;
  }
}