@font-face {
    font-family: "RobotoMono Nerd Font";
    src: url("fonts/RobotoMonoNerdFont.woff2") format("woff2"),
         url("fonts/RobotoMonoNerdFont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
  font-family: "Roboto Mono", "RobotoMono Nerd Font", monospace;
  display: flex;
  flex-direction: column; /* empilha conteúdo + footer */
  justify-content: center; /* centraliza verticalmente o conteúdo */
  align-items: center;
  min-height: 100vh; /* garante altura mínima da tela */
  text-align: center;
}

div {
  flex: 1; /* ocupa o espaço disponível, empurrando o footer para baixo */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-size: 3em;
  margin: 0;
}

p {
  font-size: 1.2em;
  color: #aaa;
  height: 1em;
}

footer {
  width: 100%;
  padding: 10px 0;
  background-color: #161616; /* tom levemente diferente */
  color: #888;
  font-size: 0.9em;
}

.small-link {
  font-size: 0.8em;       /* tamanho menor */
  color: #131313;       /* cor discreta */
  text-decoration: none;  /* opcional: tira o underline */
  display: inline-block;  /* necessário para aplicar margin vertical */
  margin-top: 10px;       /* espaço acima do link */
}

.small-link:hover {
  color: #ff0000;
}

.btn {
  display: inline-flex;          /* Flexbox para centralizar texto */
  justify-content: center;
  align-items: center;

  width: 8em;                  /* largura fixa */
  height: 35px;                 /* altura fixa -> quadrado */
  
  font-family: "Roboto Mono", "RobotoMono Nerd Font", monospace;
  font-size: 0.8em;
  color: #fff;                   /* texto branco */
  background-color: #1a1a1a;        /* cinza escuro */
  text-decoration: none;         /* remove sublinhado */
  transition: background 0.3s;
  cursor: pointer;               /* mostra mãozinha ao passar mouse */

  font-family: "RobotoMono Nerd Font"; /* garante que o ícone renderize */
  margin-right: 5px;                  /* espaço entre ícone e texto */
  font-size: 1em; 
}

.btn:hover {
  background-color: #444;        /* cinza mais claro ao passar o mouse */
}

.h1-dotfiles {
  font-family: "Roboto Mono", "RobotoMono Nerd Font", monospace;
  font-size: 2em;
  color: #fff;
  display: flex;
  align-items: center;   /* alinha texto e imagem verticalmente */
  gap: 10px;             /* espaço entre ícone e texto */
}

.h1-dotfiles .h1-icon {
  width: 52px;           /* tamanho da imagem */
  height: 52px;
  object-fit: contain;    /* mantém proporção */
}