* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: "Playfair Display", serif;
  background: #ede6d6;
  color: #694d36;
  transition: background-color 1s, color 1s;

}

body::before {
  content: "";
  position: absolute;
  top: 2rem;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
  border: 1px solid #694d36;
  pointer-events: none;
  transition: border-color 1s;
  
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 5rem;
}

.heading-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 5rem;
  overflow: visible;
}

.heading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  font-size: 5rem;
  line-height: 1;    
  font-weight: 300;
  text-transform: capitalize;
  transition: transform 0.5s;
  white-space: nowrap;
}


#heading2 {
  visibility: hidden;
  transform: translate(-50%, 150%);
}

.shift-up {
  transform: translate(-50%, -450%) !important;
}

.shift-in {
  visibility: visible !important;
  transform: translate(-50%, -50%) !important;
}

body.inverted {
  background-color: #694d36
}

body.inverted .heading {
  color: #ede6d6;
}

body.inverted::before {
  border-color: #ede6d6;
}