.overlayLeftBtn {
  padding: 12px 24px;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  z-index: -1; }

.overlayLeftBtn span {
  color: #b15f8c;
  position: relative;
  z-index: -1;
  transition: color 0.25s cubic-bezier(0.7, 0, 0.9, 1); }

.overlayLeftBtn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-101%, -50%);
  width: 100%;
  height: 100%;
  background-color: #b15f8c;
  transition: transform 0.25s cubic-bezier(0.7, 0, 0.9, 1);
  z-index: -1; }

.overlayLeftBtn:hover span {
  color: #e6edff; }

.overlayLeftBtn:hover::before {
  transform: translate(0, -50%); }

img {
  border-radius: 8px; }

html {
  font-family: "Futura", "SF Pro Display", sans-serif;
  color: #b15f8c;
  overflow-y: scroll; }

h1 {
  margin-top: 0.5vh;
  font-size: 2.5rem; }

@font-face {
  font-family: "SF Pro Display";
  src: url("../css/webfonts/sf-pro-display-black-webfont.woff2") format("woff2"), url("../css/webfonts/sf-pro-display-black-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "SF Pro Display Italic";
  src: url("../css/webfonts/sf-pro-display-blackitalic-webfont.woff2") format("woff2"), url("../css/webfonts/sf-pro-display-blackitalic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic; }

@media screen and (max-width: 790px) {
  html {
    overflow-y: scroll; } }

header {
  text-align: center; }

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(auto, 1fr);
  align-items: baseline;
  justify-items: center; }

.style {
  grid-column: 3 / span 2;
  grid-row: 1 / span 2; }
  @media screen and (max-width: 790px) {
    .style {
      grid-column: 3 / span 2;
      grid-row: 2 / span 2; } }

.input {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
  text-align: center; }
  @media screen and (max-width: 790px) {
    .input {
      grid-column: 3 / span 2;
      grid-row: 1 / span 1; } }

.output {
  grid-column: 5 / span 2;
  grid-row: 1 / span 1;
  text-align: center; }
  @media screen and (max-width: 790px) {
    .output {
      grid-column: 3 / span 2;
      grid-row: 7 / span 1; } }

.input {
  display: flex;
  flex-flow: column;
  margin-bottom: 1rem;
  color: black; }

.input__upload {
  font-family: "Futura", sans-serif;
  color: #b15f8c;
  background-color: none;
  border: none;
  border-radius: 8px; }

.output {
  margin-top: -6rem;
  display: flex;
  flex-flow: column;
  margin-bottom: 1rem;
  margin-top: 1rem;
  color: black; }
  .output__download {
    background-color: none;
    border: 0.2rem solid black;
    font-weight: bold;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    color: #b15f8c; }

.style {
  display: flex;
  flex-flow: column;
  margin-bottom: 1rem; }

.style__button {
  position: relative;
  z-index: 10;
  font-family: "Futura", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #b15f8c;
  border: 0.2rem solid black;
  padding: 0.6rem;
  margin-bottom: 0.2rem;
  margin-top: 0.5rem;
  cursor: pointer; }
  .style__button:hover {
    display: inline-block;
    color: white; }

.style__image {
  width: 250px;
  height: auto;
  border-radius: 8px; }