body {
  padding: 1rem;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  align-content: center;
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  max-height: 80vh;
}

section {
  display: flex;
  min-height: 40vh;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  margin: 1em;
  padding: 3em;
  align-items: center;
  flex-direction: column;
  min-width: 50%;
  justify-content: space-between;
}

section:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

#result {
  flex-grow: 2;
  max-height: 25em;
}

/** All Model Related Styles */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #474e5d;
  padding-top: 50px;
}

/* Add padding and center-align text to the container */
.modalContainer {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* Style the horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* The Modal Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

.modalHeader {
  font-family: menlo, consolas, monospace;
  font-size: 1.25em;
  background: #f1f6fd;
  align-self: center;
  font-weight: bold;
}

/** Button Stuff To be Deleted */
* {
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color: #04aa6d;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity: 1;
}