/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 70 version
*/

@import url("./catppuccin.css");

/* reset */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* variables */
body {
  --font-sans: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI Variable",
    "Segoe UI", "Roboto Flex", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Mono",
    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  --searchbar-width: 50vw;
}

body,
body:has(#dev-border) {
  -webkit-transition: margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    all 0.35s cubic-bezier(0.25, 0, 0.75, 1) !important;
  -o-transition: margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    all 0.35s cubic-bezier(0.25, 0, 0.75, 1) !important;
  transition: margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    all 0.35s cubic-bezier(0.25, 0, 0.75, 1) !important;
}

body,
body.auto {
  --accent: #c5598f;
  --accent-light: #c686a6;
  --fg: #000;
  --bg: #fff;
  --mg: #757575;
  --err: #ff6666;
  --warn: #eebb00;
  --links: rgb(49, 60, 219);
}

@media (prefers-color-scheme: dark) {
  body,
  body.auto {
    --accent: #993366;
    --accent-light: #b43c78;
    --fg: #fff;
    --bg: #121212;
    --mg: #888;
    --err: #ff6666;
    --warn: #eebb00;
    --links: rgb(77, 88, 234);
  }
}

body.picasso {
  --bg: #040404;
  --accent: #42e1b4;
  --accent-light: #4effcc;
}

body.hackerman {
  --bg: #000;
  --fg: #0f0;
  --accent: #0f0;
  --mg: #0f0;
  --warn: #0f0;
  --err: #0f0;
  --font-sans: var(--font-mono);
  image-rendering: -webkit-optimize-contrast !important;
  -ms-interpolation-mode: nearest-neighbor !important;
      image-rendering: -moz-crisp-edges !important;
      image-rendering: -o-pixelated !important;
      image-rendering: pixelated !important;
  font-smooth: never;
  -webkit-font-smoothing: none;
}


body.uzi {
  /* HAHA reference am i funny yet??????? */
  --bg: #000;
  --fg: #fff;
  --accent: rebeccapurple;
}

body.day {
  --accent: #c5598f;
  --accent-light: #c686a6;
  --fg: #000;
  --bg: #fff;
  --err: #ff6666;
  --warn: #eebb00;
  --links: rgb(49, 60, 219);
}

body.night {
  --fg: #fff;
  --bg: #121212;
  --accent: #993366; /* actually a flipped version of rebeccapurple */
  --accent-light: #b43c78;
  --err: #fa4444;
  --warn: #e0b311;
  --links: rgb(77, 88, 234);
}

body.midnight {
  --fg: #fff;
  --bg: #000;
  --mg: #444;
  --accent: #993366; /* actually a flipped version of rebeccapurple */
  --accent-light: #b43c78;
  --err: #fa4444;
  --warn: #e0b311;
  --links: rgb(67, 77, 223);
}

body.hub {
  --fg: #fff;
  --bg: #000;
  --mg: #444;
  --accent: #ff9000;
  --accent-light: #ffb030;
  --err: #fa4444;
  --warn: #e0b311;
  --links: #ff9000;
}

body.hotdog {
  --fg: #f00;
  --bg: #ff0;
  --mg: #f00;
  --accent: #f00;
  --accent-light: #f50;
  --err: #f00;
  --warn: #fa0;
  --links: #f00;
  --font-sans: Arial, sans-serif;
  --font-mono: Consolas, "Courier New", monospace;
  image-rendering: -webkit-optimize-contrast !important;
  -ms-interpolation-mode: nearest-neighbor !important;
      image-rendering: -moz-crisp-edges !important;
      image-rendering: -o-pixelated !important;
      image-rendering: pixelated !important;
  font-smooth: never;
  -webkit-font-smoothing: none;
}

#selfpromo {
  display: none;
  color: var(--mg);
}

body.picasso #selfpromo {
  display: initial!important;
}

option[bold] {
  font-weight: 600;
}

body.flashbang {
  -webkit-filter: brightness(1.2) contrast(1.3);
  filter: brightness(1.2) contrast(1.3);
  --accent: #fb92c7;
  --accent-light: #f1b6d4;
  --fg: #707070;
  --bg: #fff;
  --mg: #888;
  --err: #ff6666;
  --warn: #ffe27a;
  --links: rebeccapurple;
}

body.flashbang #dev-border {
  border-image-source: repeating-linear-gradient(
    -9deg,
    var(--warn),
    var(--warn) 10px,
    var(--fg) 10px,
    var(--fg) 20px
  )!important;
}

body.latte {
  --fg: var(--ctp-latte-text);
  --bg: var(--ctp-latte-base);
  --mg: var(--ctp-latte-overlay1);
  --err: var(--ctp-latte-red);
  --warn: var(--ctp-latte-yellow);
  --link: var(--ctp-latte-blue);
  --accent: var(--ctp-latte-maroon);
  --accent-light: rgba(var(--ctp-latte-maroon-raw), 0.8);
}

body.frappe {
  --fg: var(--ctp-frappe-text);
  --bg: var(--ctp-frappe-base);
  --mg: var(--ctp-frappe-overlay1);
  --err: var(--ctp-frappe-red);
  --warn: var(--ctp-frappe-yellow);
  --link: var(--ctp-frappe-blue);
  --accent: var(--ctp-frappe-maroon);
  --accent-light: rgba(var(--ctp-frappe-maroon-raw), 0.8);
}

body.macchiato {
  --fg: var(--ctp-macchiato-text);
  --bg: var(--ctp-macchiato-base);
  --mg: var(--ctp-macchiato-overlay1);
  --err: var(--ctp-macchiato-red);
  --warn: var(--ctp-macchiato-yellow);
  --link: var(--ctp-macchiato-blue);
  --accent: var(--ctp-macchiato-maroon);
  --accent-light: rgba(var(--ctp-macchiato-maroon-raw), 0.8);
}

body.mocha {
  --fg: var(--ctp-mocha-text);
  --bg: var(--ctp-mocha-base);
  --mg: var(--ctp-mocha-overlay1);
  --err: var(--ctp-mocha-red);
  --warn: var(--ctp-mocha-yellow);
  --link: var(--ctp-mocha-blue);
  --accent: var(--ctp-mocha-maroon);
  --accent-light: rgba(var(--ctp-mocha-maroon-raw), 0.8);
}

/* body styles */
body {
  margin: 0 2rem;
  color: var(--fg);
  background: var(--bg);
}

body.hackerman img,
body.hotdog img {
  image-rendering: -webkit-optimize-contrast !important;
  -ms-interpolation-mode: nearest-neighbor !important;
      image-rendering: -moz-crisp-edges !important;
      image-rendering: -o-pixelated !important;
      image-rendering: pixelated !important;
  background-color: var(--accent);
  background-blend-mode: multiply;
}

body.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  font-size: 1.05em;
}

body,
button,
input {
  font-family: var(--font-sans);
}

/* devborder */
#dev-border {
  opacity: 0;
  -webkit-transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  border-top: 0px solid var(--warn);
  border-image-slice: 1;
  border-image-source: repeating-linear-gradient(
    -9deg,
    var(--warn),
    var(--warn) 10px,
    black 10px,
    black 20px
  );
  margin: 0;
}

#dev-border.shown {
  border-width: 12px;
  -webkit-transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 1;
}

#dev-border::after {
  display: block;
  border-bottom: 1px solid var(--fg);
}

body:has(#dev-border.shown) {
  margin-top: 12px;
}

/* disabled */
*:disabled {
  cursor: not-allowed;
}

/* codeblocks */
pre {
  font-family: var(--font-mono);
  font-size: 0.8em;
}

/* unused */
.fa-magnifying-glass {
  color: var(--fg);
}

/* center a div challenge (impossible) */
.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.header-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  margin-top: 10%;
}

.left-margin {
  margin: 0px 16px;
}

/* uv logs */
#uv-error {
  color: var(--err) !important;
  white-space: pre-wrap;
}

#uv-error-code {
  font-size: 12px;
  color: var(--fg);
  font-family: var(--font-mono);
}

#uv-register-sw {
  color: var(--fg);
  background: var(--mg);
  cursor: pointer;
  outline: none;
  border: none;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding: 16px 20px;
  line-height: 16px;
  display: none;
}

#uv-register-sw:active {
  background: var(--mg);
}

#uv-register-sw.show {
  display: block;
}

/* logo */
.logo {
  width: 60px;
  font-size: 60px;
  text-align: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  -webkit-align-self: center;
  align-self: center;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  height: 120px;
  margin-top: 0rem;
  margin-right: 6%
}

.logo > svg {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
.logo > svg > g > g {
  fill: var(--fg) !important;
}

.logo-wrapper .text {
  font-size: 75px;
  color: var(--fg);
}

.logo-wrapper h1 {
  color: var(--fg);
}

/* tabs */
.tab {
  display: none;
}

.tab.shown {
  display: initial;
}

/* header */
h1 {
  font-size: 2.1em;
  font-weight: 750;
}

/* footers */
footer {
  position: absolute;
  bottom: 0;
  width: auto;
  line-height: 1.5em;
  text-align: left;
  padding: 1em;
}

footer .left {
  float: left;
}

footer .right {
  float: right;
  text-align: right;
}

/* make links not shit */
a {
  /* text-decoration: none; */
  cursor: pointer;
  color: var(--links) !important;
  font-weight: 500;
}

/* subtitles */
span:has(.subtitle),
.subtitle {
  font-size: 0.9rem;
  margin: 2px;
  padding: 5px;
  margin-bottom: 0.8rem;
  color: var(--mg);
  text-align: center;
}

.desc p {
  width: 560px;
  color: var(--mg);
}

/* address bar */
#uv-address {
  background: none;
  border: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: var(--font-sans);
  color: var(--fg);
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-size: 0.9em;
  height: 5vh;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  -webkit-align-self: center;
  align-self: center;
  justify-self: flex-end;
}

#uv-search-engine-wrapper {
  position: relative;
  width: auto;
  height: 3rem;
  float: left;
  margin: 0px;
  padding: 0px;
  padding-right: 1rem;
}

/* select */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: var(--font-sans);
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  z-index: 1;
  outline: none;

  color: var(--fg);
}
select::-ms-expand {
  display: none;
}
.select {
  display: -ms-inline-grid;
  display: inline-grid;
      grid-template-areas: "select";
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid var(--fg);
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
  padding: 0.25em 0.5em;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1.1;
  background-color: transparent;
}
.select select,
.select::after {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-row: 1;
  grid-column: 1;
  grid-area: select;
}
.select:not(.select--multiple)::after {
  content: "";
  -ms-grid-column-align: end;
  justify-self: end;
  width: 0.8em;
  height: 0.5em;
  background-color: var(--fg) !important;
  scale: 0.9;
  -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}
select:focus + .focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--select-focus);
  -webkit-border-radius: inherit;
  border-radius: inherit;
}

option {
  background: var(--bg);
}

/* settings */
.setting-row {
  margin-bottom: 1rem;
}

#bottom-buttons {
  margin-top: 0.25rem;
}

.setting-option {
  position: absolute;
  right: 60%;
}

#ir-custom-server-warning {
  display: none;
  color: var(--warn);
  font-size: 0.9em;
  font-weight: 600;
}

#ir-custom-server-warning.shown {
  display: initial;
}

/* forms */
form {
  margin-top: 1rem;
}

/* ignore 💀 */
/* *{ 
  outline: 1px solid red;
 } */

#form-container {
  border: 2px solid var(--accent);
  box-shadow: 0px 0px 8px 0px transparent;
  -webkit-box-shadow: 0px 0px 8px 0px transparent;
  -moz-box-shadow: 0px 0px 8px 0px transparent;

  color: var(--text-color);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  outline: none;
  width: var(--searchbar-width);
  margin-top: 5px;
  -webkit-border-radius: 3rem;
  border-radius: 3rem;
  color: var(--fg);
  padding: 0px 17px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.2s linear !important;
  -o-transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.2s linear !important;
  -webkit-transition: -webkit-box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-border-radius 0.2s linear !important;
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.2s linear, -webkit-border-radius 0.2s linear !important;
}

#form-container:has(:focus) {
  /* border-width: 1.5px; */
  box-shadow: 0px 0px 8px 0px var(--accent);
  -webkit-box-shadow: 0px 0px 8px 0px var(--accent);
  -moz-box-shadow: 0px 0px 8px 0px var(--accent);
  -webkit-border-radius: 100vw;
  border-radius: 100vw;

  -webkit-transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -webkit-transition: -webkit-box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: -webkit-box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;

  -webkit-animation: border-pulse 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation: border-pulse 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  -webkit-transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* credits */

.credit:hover {
  border-color: var(--accent);
}

.credit a {
  color: var(--fg) !important;
  -webkit-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.credit a:hover {
  color: var(--links) !important;
}

.credit {
  -webkit-border-radius: 24px;
  border-radius: 24px;
  padding: 0.6em 1.1em;
  display: block;
  border: var(--fg) 1px solid;
  margin-block: 1em;
  color: var(--fg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  max-height: 2em;
  -webkit-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* margin-bottom: 15px; */
}

.credit:has(:checked) {
  max-height: 640em;
  -webkit-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.credit label {
  margin-left: auto;
  margin-right: 15px;
}

.credit a,
.credit label {
  color: var(--fg);
  text-decoration: underline;
  text-align: right;
}

.credit pre {
  display: none;
  width: 100%;
}

.credit label::after {
  content: "show license";
  cursor: pointer;
}

.credit input:checked + label::after {
  content: "hide license";
}

.credit input:checked ~ pre {
  display: block;
}

/* animation */
@-webkit-keyframes border-pulse {
  0% {
    border-color: var(--accent);
  }
  50% {
    border-color: var(--accent-light);
  }
  90% {
    border-color: var(--accent);
  }
}
@keyframes border-pulse {
  0% {
    border-color: var(--accent);
  }
  50% {
    border-color: var(--accent-light);
  }
  90% {
    border-color: var(--accent);
  }
}

/* tab buttons */
.tabButton {
  text-align: left;
  float: left;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: 0.4em;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 1.1rem;
  border-bottom: 0px solid transparent;
  -webkit-transition: border 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: border 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: border 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tabButton > .svgWrapper > svg {
  scale: 1.2;
  fill: var(--fg);
}

.tabButton.active {
  border-bottom: 4px solid var(--accent);
}

.tabButton:hover:not(.active) {
  border-bottom: 4px solid var(--mg);
}

nav {
  margin-top: 0.8rem;
}

/* extra styles */
.portrait-only {
  display: none;
}

/* more buttons */
button.btn.primary {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid var(--fg);
  color: var(--bg);
  padding: 0.5em 1em;
  font-size: 1rem;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  outline: none;
  background: var(--fg);
  -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button.btn.primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg);
  -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button.btn.primary:active {
  -webkit-filter: brightness(0.9);
  filter: brightness(0.9);
}

/* quicklinks */

.quicklink > img {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  -webkit-border-radius: 0.4rem;
  border-radius: 0.4rem;
}

.quicklink > button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-size: 1rem;
}

.quicklink {
  display: -webkit-flex;
  display: -moz-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* textbox */
.textbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  border: none;
  color: var(--fg);
  font-size: 1rem;
  -webkit-transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-bottom: var(--mg) 2px solid;
}

.textbox:focus {
  border-bottom: var(--accent) 2px solid;
  -webkit-transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* suggestions */
#suggestions-container {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center;
  display: none;
  -ms-grid-column-align: center;
      justify-self: center;
  width: var(--searchbar-width);
  border: 2px solid var(--accent);
  -webkit-border-radius: 0 0 1.5rem 1.5rem;
          border-radius: 0 0 1.5rem 1.5rem;
  padding: 0 0;
  padding-bottom: 0.75rem;
}

#suggestions-container.shown {
  display: initial;
}

.flex-center.logo-wrapper.header-center:has(#suggestions-container.shown) > #uv-form > #form-container /* css selector voodoo magic */ {
  -webkit-border-radius: 1.5rem 1.5rem 0 0;
          border-radius: 1.5rem 1.5rem 0 0;
  -webkit-transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.2s linear !important;
  -o-transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.2s linear !important;
  -webkit-transition: -webkit-box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-border-radius 0.2s linear !important;
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.2s linear, -webkit-border-radius 0.2s linear !important;
}

.suggestion {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
  background: none;
  border: none;
  width: var(--searchbar-width);
  color: var(--fg);
  padding-left: 1rem;
  /* padding: 0 0.5rem; */
  font-size: 1.1rem;
  font-weight: 500;
  border-top: 1px solid var(--mg);
  cursor: pointer;
}

.suggestion:nth-child(1) {
  font-weight: 700;
}

/* tos */
/* #terms_body {
  margin: 0 2.1rem;
} */

/* about */
#ir-about-icon,
#icon-wrapper,
.about-icon-portion {
  width: 150px;
  height: 150px;
  /* -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2); */
}
/* 
#icon-wrapper {
  margin-bottom: 75px;
}

#icon-wrapper:not(:hover) {
  -webkit-transform: scale(2)!important;
  -ms-transform: scale(2)!important;
  transform: scale(2)!important;
} */

#ir-about-icon {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(-100px) perspective(1000px);
          transform: translateZ(-100px) perspective(1000px);
}

#ir-about-logomark {
  -webkit-transform: translateZ(100px);
          transform: translateZ(100px);
  position: absolute;
  top: 0;
  left: 0;
}

#icon-wrapper > #ir-about-logomark,
#icon-wrapper:hover > #ir-about-logomark {
  -webkit-transition: -webkit-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#icon-wrapper > #ir-about-logomark {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.25));
          filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.25));
}

#icon-wrapper:hover > #ir-about-logomark {
  -webkit-filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.25));
          filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.25));
}

/* #icon-wrapper,
#icon-wrapper:hover {
  -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -o-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
} */

@media screen and (orientation: portrait) {
  body {
    --searchbar-width: 80vw;
  }

  footer .left {
    display: none;
    visibility: hidden;
  }

  .portrait-only {
    display: initial;
  }

  .landscape-only {
    display: none;
  }

  .setting-option {
    position: absolute;
    right: 20%;
  }
}

#ir-reddit-suggestion {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

#ir-reddit-suggestion-icon {
  fill: var(--accent);
}

#ir-reddit-suggestion-text {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--accent);
}

#ir-reddit-suggestion-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

body.sanfrancisco #ir-reddit-suggestion-icon {
  -webkit-transform: scale(0.25);
      -ms-transform: scale(0.25);
          transform: scale(0.25);
    width: 50px;
  height: 50px;
}

body.sanfrancisco #ir-reddit-suggestion-text {
  padding-top: 20px
}