@font-face {
  font-family: 'Garature';
  src: url('fonts/Garature-Regular_v3.otf');
}

@font-face {
  font-family: 'gribouille_a';
  src: url('fonts/gribouille_a1.otf');
}

@font-face {
  font-family: 'gribouille_b';
  src: url('fonts/gribouille_b1.otf');
}

@font-face {
  font-family: 'taches_a';
  src: url('fonts/taches_a1.otf');
}

@font-face {
  font-family: 'taches_b';
  src: url('fonts/taches_b1.otf');
}

@font-face {
  font-family: 'marker';
  src: url('fonts/marker1.otf');
}

@font-face {
  font-family: 'mini';
  src: url('fonts/mini1.otf');
}

@font-face {
  font-family: 'barre';
  src: url('fonts/Garabarre_v6.otf');
}

:root {
  --background: white;
  --color: black;
  --set: "ss01";
}

html {
  background: var(--background);
  font-family: 'Garature', sans-serif;
  font-size: calc(1vw + 8pt);
  color: var(--color);
}

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

::selection {
  color: var(--background);
  background: var(--color);
}

#écriture {
  position: absolute;
  background: var(--background);
  font-size: 2rem;
  padding: 2rem;
  padding-bottom: 3rem;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.texte {
  position: absolute;
  width: calc(100vw - 4rem);
  height: 100%;
}

#texte-tapé {
  cursor: cell;
  font-family: monospace;
  font-size: 1rem;
  opacity: .5;
  resize: none;
  top: 1rem;
  height: calc(100vh - 6rem);
}

#texte-affiché {
  height: auto;
  padding: 0 2rem;
  width: 100%;
}

.visu {
  /* background: red; */
  position: absolute;
  top: 2rem;
  font-size: 2rem;
  overflow-y: auto;
  height: calc(100% - 4rem); width: 100%;
}

.visu article {
  height: 100px;
  width: 100%;
}

#texte-tapé::selection {
  background: var(--background);
}

nav {
  display: flex;
  align-items: flex-end;
  position: fixed;
  inset: auto 1rem .75rem auto ;
  gap: 1rem;
  isolation: isolate;
}

.encadré {
  background: var(--background);
  border: solid var(--color) .115em;
  color: var(--color);
  font-family: 'Garature';
  font-size: .8em;
  font-weight: bold;
  padding: .3em .5em .1em .5em;
}

.encadré:hover {
  color: var(--background);
  cursor: pointer;
  background: var(--color);
}

.encadré:active {
  transform: scale(95%);
}

input {
  display: none;
}

a {
  text-decoration: none;
  vertical-align: bottom;
}

select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  font-family: inherit;
  font-size: .8em;
  font-weight: bold;
  padding: .4em .5em .1em 1em;
  width: 100%;
  /* height: 1.5em; */
  line-height: inherit;
  outline: none;
  background: var(--background);
  color: var(--color);
  border: solid .115em var(--color);
  cursor: pointer;
}

select:hover {
  background: var(--color);
  color: var(--background);
}

#select::before {
  content: '↴';
  position: absolute;
  margin-left: .2em;
  transform: rotate(180deg) translateY(-.1em);
}

/* RATURES */
.rature {
  /* color: red; */
  -moz-font-feature-settings: var(--set);
  -webkit-font-feature-settings: var(--set);
  font-feature-settings: var(--set);
}

.ss01 {
   -moz-font-feature-settings: "ss01";
   -webkit-font-feature-settings: "ss01";
   font-feature-settings: "ss01";
}

.ss02 {
   -moz-font-feature-settings: "ss02";
   -webkit-font-feature-settings: "ss02";
   font-feature-settings: "ss02";
}

.ss03 {
   -moz-font-feature-settings: "ss03";
   -webkit-font-feature-settings: "ss03";
   font-feature-settings: "ss03";
}

.ss04 {
   -moz-font-feature-settings: "ss04";
   -webkit-font-feature-settings: "ss04";
   font-feature-settings: "ss04";
}

.ss01 {
   -moz-font-feature-settings: "ss01";
   -webkit-font-feature-settings: "ss01";
   font-feature-settings: "ss01";
}

.ss05 {
   -moz-font-feature-settings: "ss05";
   -webkit-font-feature-settings: "ss05";
   font-feature-settings: "ss05";
}

.ss06 {
   -moz-font-feature-settings: "ss06";
   -webkit-font-feature-settings: "ss06";
   font-feature-settings: "ss06";
}

.ss07 {
   -moz-font-feature-settings: "ss07";
   -webkit-font-feature-settings: "ss07";
   font-feature-settings: "ss07";
}