@keyframes pop {
  50% {
    transform: scale(1.05); } }

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-5rem); }
  100% {
    opacity: 1;
    transform: 0; } }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }

body {
  box-sizing: border-box;
  position: relative; }

body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 1.7; }

.header {
  background-image: linear-gradient(to right, #ff7675, #d63031);
  -webkit-background-clip: text;
  color: white;
  font-size: 6rem;
  font-weight: 400; }
  .header::after {
    content: 'by Wilson Hou';
    color: white;
    font-size: 1.5rem; }

.u-center-text {
  text-align: center; }

.u-margin-top-small {
  margin-top: 1.5rem; }

.u-margin-top-medium {
  margin-top: 4rem; }

.u-margin-bottom-small {
  margin-bottom: 1.5rem; }

.u-margin-bottom-medium {
  margin-bottom: 4rem; }

.u-margin-bottom-big {
  margin-bottom: 8rem; }

.sorter {
  margin: 0 auto;
  width: 60vw;
  height: 60vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  backface-visibility: hidden; }

.sortItem {
  background-color: #a29bfe;
  display: inline-block;
  border-radius: .1rem .1rem 0 0;
  margin: 0 .1rem; }
  .sortItem-current {
    background-color: #ff7675; }
  .sortItem-target {
    background-color: #ffeaa7; }
  .sortItem-sorted {
    background-color: #55efc4; }

.btn {
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  border-style: none;
  padding: 1rem 3rem;
  font-size: 1.6rem;
  width: 100%;
  height: calc(100% / 6);
  cursor: pointer;
  background-color: #e17055;
  color: white;
  transition: transform .2s; }
  .btn:hover:not([disabled]) {
    background-color: #d94c2a; }
  .btn--disabled {
    background-color: #636e72;
    cursor: not-allowed; }
  .btn:last-child {
    background-color: #f0932b; }
    .btn:last-child:hover:not([disabled]) {
      background-color: #d97a0f; }
    .btn:last-child.btn--disabled {
      background-color: #636e72;
      cursor: not-allowed; }

.btn-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation: fadeInLeft 1s; }

.row {
  max-width: 100vw;
  margin: 0 auto; }
  .row:not(:last-child) {
    margin-bottom: 0rem; }
  .row::after {
    content: "";
    display: table;
    clear: both; }
  .row [class^="col-"] {
    float: left; }
    .row [class^="col-"]:not(:last-child) {
      margin-right: 0rem; }
  .row .col-1-of-2 {
    width: calc((100% - 0rem) / 2); }
  .row .col-1-of-3 {
    width: calc((100% - 0rem * 2) / 3); }
  .row .col-1-of-4 {
    width: calc((100% - 3 * 0rem) / 4); }
  .row .col-2-of-3 {
    width: calc((100% - 0rem) * 2 / 3 + 0rem); }
  .row .col-2-of-4 {
    width: calc((100% - 3 * 0rem) * 2 / 4 + 0rem); }
  .row .col-3-of-4 {
    width: calc((100% - 3 * 0rem) * 3 / 4 + 2 * 0rem); }
  .row .col-1-of-6 {
    width: calc((100% - 5 * 0rem) / 6); }
  .row .col-5-of-6 {
    width: calc((100% - 5 * 0rem) * 5 / 6); }

body {
  background-color: #2d3436; }

#root {
  margin: 0 auto;
  transition: animation .3s;
  animation: pop .5s;
  animation-delay: 1s; }

.main-text-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; }

.header {
  display: inline-block;
  position: relative;
  bottom: 3rem;
  margin: 0 auto;
  transition: all .3s;
  animation: fadeInLeft .5s;
  animation-delay: .5s;
  animation-fill-mode: backwards; }
  .header:hover {
    transform: scale(1.03); }
    .header:hover::after {
      transform: translateY(1rem);
      opacity: 1; }
  .header:after {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transition: all .3s;
    opacity: 0; }