body {
  background-color: black;
  margin: 0px;
  color: red;
}

.container {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 20% auto 20%;
  grid-template-rows: auto 15rem;
  grid-template-areas:
    "gutter-left main gutter-right"
    "footer footer footer";
}

.main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gutter {
  width: 100%;
  background: url("https://media.giphy.com/media/zGGAbke6loNNe/giphy.gif");
  background-size: contain;
  background-repeat: space;
}

.gutter-left {
  grid-area: gutter-left;
}

.gutter-right {
  grid-area: gutter-right;
}

.surprise {
  font-size: 0.7rem;
}

.skull {
  cursor: pointer;
}

.footer {
  grid-area: footer;
  justify-self: stretch;
  width: 100%;
  background: url("https://media.giphy.com/media/npzD4KQ8ZPg6k/giphy.gif");
  background-size: contain;
}

p {
  text-align: center;
  font-size: 1.1rem;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0px;
}

.input-box {
  width: 100%;
  max-width: 400px;
  min-height: 100px;
  resize: none;
}

.submit-btn {
  padding: 2rem;
  background-color: red;
  color: white;
  font-weight: 900;
}

@media only screen and (max-width: 600px) {
  body {
    margin: 10px;
  }

  .gutter {
    display: none;
  }

  .container {
    grid-template-columns: 0% auto 0%;
  }

}