/* .___         ,__   .           .   
 * /   \   ___  /  `  |     ___  _/_  
 * |__-' .'   ` |__   |   .'   `  |   
 * |  \  |----' |     |   |----'  |   
 * /   \ `.___, |    /\__ `.___,  \__/
 * —————————————/—————————————————————
 * Feuille de style
 */

/*
 *  ~ Style général de la page ~
 */

* {
  margin: 0;
  padding: 0;
}


body {
  /* ↓ Everything is better with a transition! (trans joke) */
  transition: all 1s;
  --bg-col: white;
  --fg-col: black;
  font-family: 'Fira Code', monospace;
  color: var(--fg-col);
  background-color: var(--bg-col);
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

/*
 *  ~ Style des éléments ZorkDown ~
 */

.zorkdown-content {
  font-family: inherit;
  font-size: 12pt;
  border: 3px solid var(--fg-col);
  box-sizing: border-box;
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  max-height: 600px;
  /* ↓ Wierd ass centering, but meh I love it. */
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
}

.zorkdown-terminal {
  cursor: none;
  user-select: none;
  padding: 1em;
  height: 90%;
  box-sizing: border-box;
  overflow-y: auto;
}

  .zorkdown-terminal ul li {
    list-style-type: none;
    text-indent: 1.5em;
  }

  .zorkdown-terminal ul li::before { content: "– "; }

p {
  margin: 0;
  margin-bottom: 1em;
  padding: 0;
}

/*
 *  ~ Style de l'Input ~
 */

#zorkdown-input-container {
  box-sizing: border-box;
  border-top: 3px solid var(--fg-col);
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 10%;
  overflow-y: hidden;
}

  #zorkdown-input-container span {
    flex-grow: 1;
    text-align: center;
  }

.zorkdown-user-input {
  flex-grow: 9;
  outline: none;
  border: none;
  font: inherit;
  color: inherit;
  resize: none;
  overflow: hidden;
  background: none;
}

/*
 *  ~ Responsive shit… ~
 * NB : à cause du format carré du jeu, l'affichage reste assez mauvais sur un téléphone
 * (fuck phones)
 */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .zorkdown-content {
    font-size: 9pt;
    border: 2px solid var(--fg-col);
    width: 85vw;
    height: 85vw;
    /*top: 20%;
    transform: translate(-50%, -20%);*/
    /*background-color: yellow;*/
  }
} 

/* Small devices (portrait tablets and large phones, up to 768px) */
@media only screen and (min-width: 600px) {
  .zorkdown-content {
    font-size: 10pt;
    /*background-color: blue;*/
    width: 60vw;
    height: 60vw;
    border: 2px solid var(--fg-col);
  }
}

@media only screen and (min-width: 768px) {
  .zorkdown-content {
    /*background-color: green;*/
    font-size: 11pt;
    width: 50vw;
    height: 50vw;
    border: 3px solid var(--fg-col);
  }
}

@media only screen and (min-width: 992px) {
  .zorkdown-content {
    /*background-color: red;*/
    font-size: 13pt;
  }
}