@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: #161616;
  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;
  min-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: #333333;       /* 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: #323232;        /* 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 */
}

#rick-overlay {
  display: none;
  position: fixed;
  top:0; left:0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
}

#rick-close {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 2em;
  color: white;
  cursor: pointer;
}

#overlay {
  display: none; /* começa escondido */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
}

/* Centraliza o vídeo */
#overlay video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 960px;
  border: none;
}

/* Botão para fechar */
#close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2em;
  color: #fff;
  cursor: pointer;
}
#close-btn:hover {
  color: #ff4444;
}