body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #97351C;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  display: flex;
  flex-direction: column;
  background-color: #97351C;
  border: 3px solid #C55637;
  max-width: 400px;
  margin: 20px;
  padding: 15px;
}

header {
    display: flex;
    align-items: center; /* Vertically align to the center, so the icon is inline with the text*/
    justify-content: flex-start;
    gap: 10px;
    color: #CAC589;
    margin-top: 10px;
}

header > h1 {
    margin: 0; 
    font-size: 1em; 
    font-weight: bold;
}

header > i {
    font-size: 3em; 
}

.image-section img {
  width: 100%;
}

.unordered-list {
  display: flex;
  color: #CAC589;
  text-align: left;
  justify-content: flex-start;
}

.video-section {
  width: 100%;
}

.video-section > h2 {
  background-color: #C55637;
  padding: 3px;
  font-size: small;
  text-align: left;
  color: #CAC589;
  margin-bottom: 0.25px; /* This is to override the default margin for h2, so there is only a 1px gap between the the text padding and iframe.*/
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

form {
    display: flex;
    flex-direction: column;
    width: 100%; 
    color: #CAC589;
    margin: 10px 0;
}

form > label {
    margin-top: 5px;
}

form input:not(#destinationField),
form select {
    margin-top: 5px;
    padding: 5px;
    border: none;
}

form > button {
    background-color: #A6A86F;
    color: #97351C;
    font-weight: bold;
    margin-top: 10px;
    cursor: pointer;
    padding: 10px;
    border: none;
    width: 100%; 
}

form > p {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

form a {
  color: #CAC589;
  text-decoration: none;
}

form a:hover,
form a:visited,
form a:active {
  color: #CAC589;
  text-decoration: none;
}

form > a:hover {
    text-decoration: underline;
}

form > #destinationField {
    width: 50%;
    margin-right: auto;
    margin-left: 0;
}

form > #returnBox {
    margin-right: auto; 
    margin-left: 0;
}