body {
  font-size: 75%;
}

.intro-block {
  padding: 0 4em;

  max-width: 100vw;
}

.intro-block p {
  max-width: 40em;
}

.form-block {
  padding: 0 6em;

  max-width: 100vw;
}

.information-field {
  display: grid;
  grid-template-columns: 1fr;
  text-align: left;
  justify-items: start;

  row-gap: 1em;

  padding: 1em 0 1em 0;
}

.information-field input[type="text"] {
  width:33%;
  min-width: 10em;
}

.emergency-contact {
  grid-template-columns: 2/2;
}

.declaration {
  padding-right: 2em;
}

.information-field input[name="declaration"]{
  display: inline-block;;
  grid-column: 1/1;
  margin-right: .25em;

  border: none;
  border-bottom: 1px solid gray;
  outline: none;
}

.information-field input[name="declaration"]:focus {
  background-color: lightgrey;
}

label[for='signature'],
label[for='signedDate'],
input[name='signature'],
input[name='signedDate'] {
  grid-column: 1/1;
}

@media screen and (min-width: 513px) {
  body {
    font-size: 100%;
  }

  .information-field {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: left;
    justify-items: start;
  
    row-gap: 1em;
  
    margin: 1em 0 1em 0;
  }
  
  .information-field input[type="text"] {
    width:33%;
    min-width: 10em;
  }
  
  .emergency-contact {
    grid-template-columns: 2/2;
  }
  
  .declaration {
    padding-right: 2em;
  }
  
  .information-field input[name="declaration"]{
    display: inline-block;;
    grid-column: 1/1;
    margin-right: .25em;
  
    border: none;
    border-bottom: 1px solid gray;
    outline: none;
  }
  
  .information-field input[name="declaration"]:focus {
    background-color: lightgrey;
  }
  
  label[for='signature'],
  label[for='signedDate'],
  input[name='signature'],
  input[name='signedDate'] {
    grid-column: 1/1;
  }
}

.error-block {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  text-align: center;

  padding: 0 2em 0 2em;
}