_res/_custom.css

@import url("https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400..800&display=swap");

@font-face {
  font-family: "Geist Mono";
  src: url("file=_res/assets/webfonts/GeistMono-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("file=_res/assets/webfonts/GeistMono-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("file=_res/assets/webfonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("file=_res/assets/webfonts/GeistMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("file=_res/assets/webfonts/GeistMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Qartella-Light";
  src: url("file=_res/assets/webfonts/Qartella-Light.woff2") format("woff2"), url("file=_res/assets/webfonts/Qartella-Light.woff") format("woff");
  font-weight: normal;
  font-style: light;
}

@font-face {
  font-family: "Qartella-Bold";
  src: url("file=_res/assets/webfonts/Qartella-Bold.woff2") format("woff2"), url("file=_res/assets/webfonts/Qartella-Bold.woff") format("woff");
  font-weight: normal;
  font-style: bold;
}

::-webkit-scrollbar {
  width: 0px;
}

body {
  background: var(--background-fill-primary);
  background: linear-gradient(180deg, var(--primary-800) 355px, var(--background-fill-primary) 355px);
}

.gradio-container-5-29-0 {
  padding-top: 30px !important;
  transition: opacity 0.4s linear;
  position: relative;
  font-family: "Geist Mono", sans-serif !important;
  font-weight: 400;
}

.md-header-wrapper,
.md-header > span > div {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  background-position: 70% bottom;
  background-repeat: no-repeat;
  padding: 0 10px;

  h1, h3 {
    --sc: rgb(2, 44, 32);
    display: inline;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 2.3rem;
    text-transform: uppercase;
    padding: 0 8px;
    margin-bottom: 0;
    color: var(--primary-950);
    /* text-shadow: 2px 2px 2px var(--sc), -2px 2px 2px var(--sc), -2px -2px 0 var(--sc), 2px -2px 0 var(--sc); */

    & span {
      font-weight: 400;
      font-size: 1.4rem;
      margin-top: -20px;
      text-transform: uppercase;
      filter: invert(1);
      color: var(--text-color-by-luminance);
    }
  }

  h3 {
    font-weight: 400;
    font-size: 1.6rem;
  }

  p {
    color: var(--text-color-by-luminance);
    margin-top: var(--spacing-xs);
    padding: 0 8px;
    font-size: 1rem;

    span {
      font-weight: 400;
      filter: invert(1);
      color: var(--text-color-by-luminance);
    }

    #wink,
    #heart {
      display: inline;
      width: 26px;
      margin-bottom: 8px;
    }

    #wink {
      animation: wink 3s ease-in-out infinite;
    }

    #heart {
      animation: beat 2s ease-in-out infinite;
    }
  }
}

.row-main {
  padding: 16px;
  background-color: var(--neutral-900) !important;
  border-right-width: 0px !important;
  border-bottom-width: 0px !important;
  border-left-width: 0px !important;
  border-top: 8px solid var(--primary-600) !important;
  border-radius: var(--container-radius) !important;
}

.md-header,
.primary.svelte-1ixn6qd,
span.svelte-g2oxp3,
.wrap.svelte-12ioyct,
label.svelte-1to105q.svelte-1to105q,
label.selected.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav,
label.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav:hover,
.md-header > span > div p {
  color: var(--text-color-by-luminance, #fff);
  transition: color 0.4s ease-in-out;
}

label.svelte-1bx8sav > .svelte-1bx8sav + .svelte-1bx8sav,
label.svelte-1e02hys>.svelte-1e02hys+.svelte-1e02hys {
  margin-left: 0;
}

.wrap.svelte-1e02hys.svelte-1e02hys.svelte-1e02hys {
  flex-direction: column;
}

div.svelte-j9uq24 {
    margin: var(--spacing-md) 0;
}

.app.svelte-1y320eu.svelte-1y320eu {
  position: relative;
  margin: auto;
  padding: var(--size-4) var(--size-8);
  width: 100%;
  height: 100%;
}

@media (min-width: 640px) {
  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
    max-width: 1536px;
  }
}

@media (min-width: 1920px) {
  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
    max-width: 1536px !important;
  }
}

.info.svelte-1y320eu.svelte-1y320eu {
  display: flex;
  position: absolute;
  bottom: 0;
  justify-content: flex-start;
  border-top: 1px solid var(--button-secondary-border-color);
  padding: var(--size-1) var(--size-5);
  width: 100%;
  color: var(--body-text-color-subdued);
  font-size: var(--text-md);
  white-space: nowrap;
}

.app.svelte-1y320eu.svelte-1y320eu {
  max-width: 1536px !important;
  position: relative;
  margin: auto;
  padding: var(--size-4) var(--size-8);
  width: 100%;
  height: 100%;
}

.input-image,
.output-slider {
  height: 800px;
}

.hidethis,
input.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav,
input.svelte-1e02hys.svelte-1e02hys.svelte-1e02hys {
  display: none;
}

/* Keyframes */

@keyframes wink {
  0%,
  60%,
  100% {
    transform: rotate(0deg);
  }
  10%,
  30%,
  70%,
  90% {
    transform: rotate(14deg);
  }
  20%,
  80% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(0.75);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.75);
  }
  50% {
    transform: scale(1);
  }
  55% {
    transform: scale(0.75);
  }
  70% {
    transform: scale(1);
  }
}