/* Versão 12:11, 21 Fev */

/* 
  Todas as regras de CSS são o mais simples
  possível, mas se tiveres alguma dúvida é
  só dizer!
  Não te esqueças que podes alterar o código
  como quiseres, incluindo acrescentar IDs nos
  elementos de HTML se achares que dá jeito,
  mas cuidado para não partir o site ahah
  Podes sempre falar comigo.
  Vou deixar comentários nas partes importantes
  para tentar orientar-te!
  O light mode ainda não está implementado (ver
  abaixo).
  Nota: por defeito, todos os breakpoints para
  ajustar a tamnhos de ecrã diferentes funcionam
  para o seu tamanho e todos acima; ou seja,
  um estilo metido pata telemóvel, afeta também
  portáteis, a não ser que vás ao portátil e mudes
  explicitamente (isto chama-se mobile-first).
  PS: não sei exatamente quando sabes de CSS e HTML
  por isso estou a partir de algumas assunções sobre
  o que sabes. 
*/

@font-face {
  font-family: 'ia-writer';
  /* Esta fonte está guardada no servidor */
  src: url('/ia-writer-mono-latin-400-normal.woff2');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'ia-writer';
  /* Esta fonte está guardada no servidor */
  src: url('/ia-writer-mono-latin-400-italic.woff2');
  font-style: italic;
  font-weight: normal;
}

/*
  Lista de cores para o modo escuro
  (o modo que está ligado por defeito)
*/
:root {
  --accent-colors: #A8FFE6 #D2D175 #FF9969 #EAA5FF;
  --accent: #A8FFE6;
}

* {
  margin: 0;
}

body {
  font-family: 'ia-writer', monospace;
  font-variation-settings: 'wght' 400;
  font-weight: normal;
  background-color: #111111;
  padding-inline: 50px;
  padding-top: 65px;
  color: white;
  font-size: 12px;
  padding-bottom: 100px;
  overflow-x: hidden;
}

h1 {
  margin-bottom: 25px;
}

h1,
h3 span {
  color: var(--accent);
}

h1,
h2,
h4 {
  font-style: italic;
}

main {
  animation: fade-in 2s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#skip-to-content-link {
  height: 1px;
  left: -999px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 1px;
  z-index: -999;
}

main {
  max-width: 542px;
}

#signature {
  position: fixed;
  z-index: -100;
  height: 650px;
  left: -600px;
  top: -50px;
}

#signature path {
  stroke-dasharray: 4000;
  animation: signature-animation 1s ease-in;
  stroke: black;
}

@keyframes signature-animation {
  from {
    stroke-dashoffset: 4000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

a {
  color: white;
}

ul {
  padding: 0;
  list-style-position: outside;
}


h2 {
  margin-top: 150px;
}

h3 {
  margin-top: 75px;
}

h3:first-of-type {
  margin-top: 25px;
}

h4 {
  margin-bottom: 25px;
}

#nav-list {
  margin-top: 25px;
}

#nav-list>li {
  margin-bottom: 25px;
}

#nav-list>li::marker {
  content: '✶ ';
}

section>p {
  margin-bottom: 25px;
}

.ref-list {
  list-style-position: outside;
}

.ref-list>li {
  margin-bottom: 7px;
}

.ref-list>li::marker {
  content: '➝ ';
}

#made-by {
  font-size: smaller;
  font-style: italic;
  margin-top: 150px;
}

#made-by,
#made-by a {
  color: #555555;
}

/* Tablets pequenos */
@media only screen and (min-width: 576px) {}

/* Tablets grandes */
@media only screen and (min-width: 768px) {
  body {
    padding-inline-start: 100px;
    padding-inline-end: 50px;
    padding-top: 125px;
  }

  #signature {
    top: -20px;
    height: 700px;
    left: -120px;
  }
}

/* Portáteis e monitores pequenos */
@media only screen and (min-width: 992px) {
  body {
    font-size: 16px;
  }
}

/* Portáteis e monitores grandes */
@media only screen and (min-width: 1200px) {}

/* Retina (Apple) e monitores enormes */
@media only screen and (min-width: 1400px) {}

/*
  Tudo o que estiver dentro disto, vai ser
  ativado se a pessoa escolher ativamente
  modo claro.
*/
@media (prefers-color-scheme: light) {
  :root {
    /* Lista de cores para o modo claro */
    --accent-colors: #0037FF #00AA4D #D64B00 #A500D7;
    --accent: #0037FF;
  }

  #signature path {
    stroke: #FFFFFF;
  }

  body {
    background-color: whitesmoke;
  }

  body,
  a {
    color: black;
  }

  #made-by,
  #made-by a {
    color: #AAAAAA;
  }
}