@font-face {
  font-family: DinaBlack;
  src: url(../font/DinaChaumont-DisplayBlack.otf);
}

@font-face {
  font-family: DinaExtraBold;
  src: url(../font/DinaChaumont-DisplayExtraBold.otf);
}

@font-face {
  font-family: DinaBold;
  src: url(../font/DinaChaumont-DisplayBold.otf);
}

@font-face {
  font-family: DinaRegular;
  src: url(../font/DinaChaumont-DisplayRegular.otf);
}

@font-face {
  font-family: DinaLight;
  src: url(../font/DinaChaumont-DisplayLight.otf);
}

@font-face {
  font-family: DinaExtraLight;
  src: url(../font/DinaChaumont-DisplayExtraLight.otf);
}

:root {
  --font-size: min(calc(0.6rem + 1.2vw + 1.2vh), 3.6rem);
  --font-size-mid: calc(var(--font-size) * 1.6);
}

::-webkit-scrollbar {
  width: 0.6rem;
}

::-webkit-scrollbar-track {
  background: #fff;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
}

* {
  scrollbar-color: #ccc #fff;
  scrollbar-width: thin;
}

input:focus,
input:focus-visible {
  border: 0;
  outline: 0;
}

html {
  background-color: #ccc;
  overflow: hidden;
}

body {
  font-family: "DinaRegular";
  color: #000;
  overflow: hidden;
}

h1,
body,
input,
p {
  margin: 0;
  padding: 0;
}

a {
  position: relative;
  color: #000;
  text-decoration: none;
  border-bottom: calc(var(--font-size) / 9) solid #fff;
  box-shadow: 0 calc(var(--font-size) / 9) 0 #000;
}

a:hover {
  box-shadow: 0 calc(var(--font-size) / 10) 0 #ccc;
}

a:hover,
.glyph:hover,
input:not([type="text"]):hover {
  color: #ccc;
}

input,
p {
  font-family: "DinaRegular";
  line-height: var(--font-size);
  font-size: var(--font-size);
}

input,
#mainContainer p {
  background-color: #fff;
  border: 0;
  text-align: left;
  white-space: normal;
  width: min-content;
  margin-right: calc(var(--font-size) / 2.2);
}

.font,
h1,
p {
  pointer-events: none;
  user-select: none;
}

a {
  pointer-events: all;
}

* {
  font-weight: 100;
}

::selection {
  color: #fff;
  background-color: #000;
}

::placeholder {
  color: #ccc;
  font-family: "DinaRegular" !important;
  opacity: 1;
}

#animContainer,
.glyph,
input[type="button"] {
  cursor: pointer;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 80%;
  height: calc(var(--font-size) - var(--font-size) / 8);
  padding: 0;
}

input[type="range"]:focus {
  outline: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: #ccc;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type="range"]::-moz-range-track {
  height: 1px;
  background: #ccc;
}

input[type="range"]::-webkit-slider-thumb {
  cursor: pointer;
  -webkit-appearance: none;
  height: calc(var(--font-size) / 2.8);
  width: calc(var(--font-size) / 1.6);
  border-radius: 40%;
  background: #000;
  margin-top: calc(var(--font-size) / -6);
  outline: 5px solid #fff;
}

input[type="range"]::-moz-range-thumb {
  cursor: pointer;
  height: calc(var(--font-size) / 2.8);
  width: calc(var(--font-size) / 1.6);
  border-radius: 40%;
  background: #000;
  border: 0;
  outline: 5px solid #fff;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #ccc;
}

input[type="range"]::-moz-range-thumb:hover {
  background: #ccc;
}

.glyph:hover,
.textInfo {
  color: #ccc;
}

#glyphsContainer {
  font-size: var(--font-size);
}

#globalContainer {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  transform: translateY(-100%);
  transition: transform 0.8s cubic-bezier(0.1, 0.8, 0.2, 1) 0.2s;
}

#mainContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

input[value~="black"] {
  font-family: "DinaBlack";
}

input[value~="extrabold"] {
  font-family: "DinaExtraBold";
}

input[value~="bold"] {
  font-family: "DinaBold";
}

input[value~="regular"] {
  font-family: "DinaRegular";
}

input[value~="light"] {
  font-family: "DinaLight";
}

input[value~="extralight"] {
  font-family: "DinaExtraLight";
}

#animContainer,
#animContainerPlacement {
  transform-origin: left top;
}

#animContainerPlacement {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
}

#animContainer {
  overflow: hidden;
  pointer-events: auto;
}

#interfaceContainer {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(2, 50%);
  grid-template-columns: repeat(2, 50%);
  overflow: hidden;
}

#glyphsContainerPlacement {
  grid-area: 2/1/3/2;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 1px solid #ccc;
}

#inputsContainerPlacement {
  grid-area: 1/2/3/3;
  border-left: 1px solid #ccc;
  height: 100%;
}

#inputTitle {
  font-size: min(max(var(--font-size), 2.8vw + 2.4vh), var(--font-size) * 2);
  line-height: min(max(var(--font-size), 2.2vw + 2vh), var(--font-size-mid));
  padding-inline: calc(var(--font-size) / 3);
  font-family: "DinaBold";
  padding-bottom: var(--font-size);
}

#inputsContainer {
  position: absolute;
  bottom: 0;
  display: grid;
  row-gap: var(--font-size);
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: calc(var(--font-size) * 2);
  padding-left: calc(var(--font-size) / 3);
  padding-right: calc(var(--font-size) / 6);
  font-size: 0;
}

#fontInput {
  grid-area: 1/2/3/3;
}

#animSelectorInput {
  grid-area: 1/1/2/3;
}

#textInput {
  grid-area: 4/1/5/3;
}

#textString {
  width: 100%;
  border-top: 1px solid #ccc;
  height: var(--font-size);
}

#glyphsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--font-size-mid));
  user-select: none;
}

#glyphsPopup,
.glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--font-size-mid);
}

.glyph {
  width: var(--font-size-mid);
}

#glyphsPopup {
  font-size: var(--font-size);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  padding-right: calc(var(--font-size) / 4);
  background-color: #fff;
  pointer-events: none;
}

#animContainer {
  background-color: #ccc;
  height: 100%;
  width: 100%;
}

.poster_A,
.poster_A span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.poster_A {
  position: absolute;
  overflow: hidden;
}

.poster_A span {
  width: 0;
  height: 0;
}

.poster_A:nth-child(even) .font {
  text-transform: uppercase;
}

.poster_A:nth-child(odd) .font {
  text-transform: lowercase;
}

.posterRow_B,
.poster_B {
  display: flex;
}

.poster_B {
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#infoButton {
  position: absolute;
  z-index: 40;
  left: calc(100dvw - var(--font-size) - var(--font-size) / 2);
  top: calc(100dvh - var(--font-size-mid) - var(--font-size) / 2);
}

#toggleInfo {
  width: var(--font-size);
  height: var(--font-size-mid);
  border-radius: calc(40% + 0.04em);
  text-align: center;
  border: 1px solid #ccc;
}

#infoContainerPlacement {
  position: absolute;
  z-index: 20;
  background-color: #fff;
  height: 100%;
  width: 100%;
  transform: translateY(-100%);
  transition: transform 0.8s cubic-bezier(0.1, 0.8, 0.2, 1);
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}

#infoContainer {
  padding: calc(var(--font-size) / 3);
  height: calc(100% - var(--font-size) / 1.5);
  font-family: "DinaRegular";
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-transform: lowercase;
}

#infoContainer {
  width: 70%;
}

#infoContainer h1,
#infoContainer p {
  font-size: var(--font-size);
  line-height: var(--font-size);
}

#infoTitle {
  margin-bottom: var(--font-size);
}

#intro {
  position: relative;
}

#credit {
  width: calc(100% - var(--font-size) * 2);
}

.highScreen #interfaceContainer {
  height: 50%;
  display: block;
}

.highScreen #glyphsContainerPlacement {
  display: none;
}

.highScreen #inputsContainerPlacement {
  border-top: 1px solid #ccc;
  border-left: 0px;
}

.highScreen #inputsContainer {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: calc(var(--font-size) * 3);
  row-gap: var(--font-size);
  padding-inline: calc(var(--font-size) / 6);
}

.highScreen #inputTitle {
  margin-top: calc(var(--font-size) / 3);
  padding-inline: calc(var(--font-size) / 6);
}

.highScreen #animSelectorInput {
  grid-area: 1/1/2/2;
}

.highScreen #colorInput {
  grid-area: 1/2/2/3;
  margin-top: 0;
}

.highScreen #fontInput {
  grid-area: 1/3/3/4;
}

.highScreen #controlInput {
  grid-area: 2/1/3/2;
}

.highScreen #controlAltGlyphs {
  grid-area: 2/2/3/3;
}

.highScreen #textInput {
  grid-area: 3/1/4/4;
}

.highScreen #infoContainer {
  width: 90%;
}