* {
  font-family: Times New Roman, serif;
}

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: #222222;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin: 20px 0;
  color: #C1C7C1;
  font-size: 3vw;
  text-align: center;
}

.content {
  width: 60vw;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content > input {
  display: block;
  margin-left: auto;
}

.buttonRow {
  height: 75px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 5px;
}

.buttonRow img {
  height: 100%;
  width: auto;
  cursor: pointer;
}

.buttonRow input {
  height: 80%;
  font-size: 18px;
  padding: 0 18px;
  color: #3A413A;
  background-color: #C1C7C1;
  border-color: #3A413A;
  cursor: pointer;
}

#haikuContainer {
  width: 100%;
  aspect-ratio: 2 / 1 auto;
  background: #C1C7C1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#haikuOutput {
  max-width: 80%;
  max-height: 80%;
  color: #222222;
  font-size: 3vw;
  line-height: 1.1;
  text-align: left;
}

@media (max-width: 960px), (max-height: 540px) {
  .content {
    width: 100vw;
  }

  #haikuOutput {
    font-size: 6vw;
  }
}