@font-face {
  font-family: "New Font style sets";
  src: url("./nf-w-ss1-9.woff2") format("woff2");
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 200vh;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.container {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

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

/**
 * CSS for New Font Regular
 * Generated by Wakamai Fondue - https://wakamaifondue.com
 * by Roel Nieskens/PixelAmbacht - https://pixelambacht.nl
 */

/* Set custom properties for each layout feature */
:root {
  --new-font-regular-ss01: "ss01" off;
  --new-font-regular-ss02: "ss02" off;
  --new-font-regular-ss03: "ss03" off;
  --new-font-regular-ss04: "ss04" off;
  --new-font-regular-ss05: "ss05" off;
  --new-font-regular-ss06: "ss06" off;
  --new-font-regular-ss07: "ss07" off;
  --new-font-regular-ss08: "ss08" off;
  --new-font-regular-ss09: "ss09" off;
}

/* If class is applied, update custom property and
   apply modern font-variant-* when supported */
.new-font-regular-ss01 {
  --new-font-regular-ss01: "ss01" on;
}

.new-font-regular-ss02 {
  --new-font-regular-ss02: "ss02" on;
}

.new-font-regular-ss03 {
  --new-font-regular-ss03: "ss03" on;
}

.new-font-regular-ss04 {
  --new-font-regular-ss04: "ss04" on;
}

.new-font-regular-ss05 {
  --new-font-regular-ss05: "ss05" on;
}

.new-font-regular-ss06 {
  --new-font-regular-ss06: "ss06" on;
}

.new-font-regular-ss07 {
  --new-font-regular-ss07: "ss07" on;
}

.new-font-regular-ss08 {
  --new-font-regular-ss08: "ss08" on;
}

.new-font-regular-ss09 {
  --new-font-regular-ss09: "ss09" on;
}

/* Apply current state of all custom properties
   whenever a class is being applied */
.new-font-regular-ss01,
.new-font-regular-ss02,
.new-font-regular-ss03,
.new-font-regular-ss04,
.new-font-regular-ss05,
.new-font-regular-ss06,
.new-font-regular-ss07,
.new-font-regular-ss08,
.new-font-regular-ss09 {
  font-feature-settings:
    var(--new-font-regular-ss01), var(--new-font-regular-ss02),
    var(--new-font-regular-ss03), var(--new-font-regular-ss04),
    var(--new-font-regular-ss05), var(--new-font-regular-ss06),
    var(--new-font-regular-ss07), var(--new-font-regular-ss08),
    var(--new-font-regular-ss09);
}

.details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
}

.popup {
  border-width: 1px;
  max-width: 800px;
  width: calc(100% - 10px);
}

dialog::backdrop {
  backdrop-filter: blur(5px);
}

a {
  color: black;
}

.open-popup {
  cursor: pointer;
}

.close-popup:focus-visible {
  outline: none;
}

.text-wrapper {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#text {
  font-family: "New Font style sets";
  user-select: none;
  font-size: min(9vw, 150px);
}