web-wallet/src/style/main.css
@import url("./dusk/colors.css");
@import url("./dusk/language.css");
@import url("./dusk-components/agreement.css");
@import url("./dusk-components/anchor.css");
@import url("./dusk-components/badge.css");
@import url("./dusk-components/button.css");
@import url("./dusk-components/card.css");
@import url("./dusk-components/checkbox.css");
@import url("./dusk-components/error-alert.css");
@import url("./dusk-components/error-details.css");
@import url("./dusk-components/exclusive-choice.css");
@import url("./dusk-components/mnemonic.css");
@import url("./dusk-components/icon.css");
@import url("./dusk-components/progress-bar.css");
@import url("./dusk-components/select.css");
@import url("./dusk-components/stepper.css");
@import url("./dusk-components/suspense.css");
@import url("./dusk-components/switch.css");
@import url("./dusk-components/tabs.css");
@import url("./dusk-components/textbox.css");
@import url("./dusk-components/throbber.css");
@import url("./dusk-components/toast.css");
@import url("./dusk-components/tooltip.css");
@import url("./dusk-components/wizard.css");
@import url("./dusk-components/words.css");
@import url("./app-components/headings.css");
@import url("./app-components/marks.css");
@import url("./app-components/horizontal-rules.css");

@font-face {
  font-family: "Soehne";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/soehne-buch.woff2") format("woff2");
}

@font-face {
  font-family: "Soehne";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/soehne-kraftig.woff2") format("woff2");
}

@font-face {
  font-family: "Soehne Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/soehne-mono-buch.woff2") format("woff2");
}

@font-face {
  font-family: "Soehne Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/soehne-mono-kraftig.woff2") format("woff2");
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  background-color: var(--page-background-color);
  color: var(--on-background-color);
  font-family: var(--main-font-family);
  font-size: var(--main-font-size);
  letter-spacing: 0.06125rem;
}

body {
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  fill: currentColor;
}

fieldset {
  border: none;
}

#outer-container {
  background-color: var(--background-color);
  width: 60%;
  max-width: 40rem;
  max-height: 60rem;
  height: 80%;
  border-radius: 2rem;
  transition: all 0.2s ease-in-out 0s;
  position: relative;
  overflow: hidden;
}

:is(
    .dusk-anchor-button:not(.dusk-anchor-button__disabled),
    .dusk-button:enabled,
    .dusk-select:enabled,
    .dusk-switch[aria-disabled="false"],
    .dusk-textbox:read-write:enabled,
    *[role="menuitem"]
  ):focus,
.dusk-exclusive-choice:focus-within {
  border-color: var(--secondary-color-variant-dark);
  box-shadow: inset 0 0 0 var(--control-border-size)
    var(--secondary-color-variant-dark);
  outline: 0 none;
}

.dusk-checkbox:enabled:focus {
  border-color: var(--secondary-color-variant-dark);
  outline: 0 none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 500px), (max-height: 500px) {
  body {
    padding: 0;
    background-color: var(--background-color);
  }

  #outer-container {
    border-radius: 0;
  }
}

@media (max-width: 1024px) {
  #outer-container {
    width: 100%;
  }
}

@media (max-height: 1200px) {
  #outer-container {
    height: 100%;
  }
}

@media (max-height: 800px) {
  #outer-container {
    gap: 1rem;
    border-radius: 1.5rem;
  }
}
