/* General styles */
html {
  background-color: white;
  height: 100%;
  font-family: sans-serif;
}

body {
  height: inherit;
  background-color: red;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* UI Layout */
section {
  width: 100%;
  height: inherit;
  padding: 30px;
}

.topbar {
  height: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.topbar p,
button {
  margin: 0;
  font-size: 1.5rem;
  border: 5px solid;
  border-radius: 20px;
  padding: 10px 20px;
}

.p1,
.p2 {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.topbar .p1 {
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
  border-color: yellow;
  color: yellow;
}

.topbar .p2 {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  border-color: cyan;
  color: cyan;
}

.topbar .middlebar {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.middlebar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* Button-specific styling */
button {
  border: 0;
  padding: 12.75px 20px;
  background-color: #ddd;
  cursor: pointer;
}

button:hover,
button:focus {
  background-color: #eee;
}

button:active {
  background-color: #fff;
}

/* spinner-specific styling */
.spinner {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.spinner div {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.spinner p {
  margin: 0;
  font-size: 10rem;
}
/*# sourceMappingURL=style.css.map */