body {
    margin: 0;
    background-color: #000000;
    color: #ffffff;
    font-family: "helvetica neue", helvetica, arial, sans-serif;
    -webkit-font-smoothing: antialiased; /* Safari, Chrome */
    -moz-osx-font-smoothing: grayscale;  /* Firefox no macOS */
    text-align: center;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-repeat: repeat;
    background-size: auto;
    opacity: 0.11; 
    pointer-events: none;
    z-index: -1;
}

@font-face {
    font-family: 'voxel'; /* voxel */
    src: url('fonts/voxel.otf') format('opentype'); /*caminho da fonte*/
    font-weight: normal; 
    font-style: normal;
}

.voxel {
    font-family: 'voxel', serif; /*aplicar voxel*/
}


.frame {
    max-width: 900px; /* largura do site */
    margin: 55px auto 0px; /* centraliza horizontalmente e define margem superior e inferior */
}


header {
    padding: 0px; /*padding interno*/
    display: flex; /*flexbox*/
    flex-direction: column; /*alinha em coluna*/
    align-items: center; /*centraliza horizontalmente*/
    gap: 20px; /*espaço entre elementos da header*/
    position: relative;
}


.header-title {
    position: absolute; 
    bottom: -25px; /*distância do título em relação ao fundo da header*/
    left: 70px; /*distância do título em relação à esquerda*/
    margin: 0; /*margem*/
    font-size: 5rem; /*tamanho do título*/
    font-weight: normal;
    text-align: left; /*alinha texto à esquerda*/
    z-index: 3; /*faz o título ficar acima de outros elementos*/
    color: #ffffff; /*cor do titulo*/
    transition: color 0.2s ease; /*transição quando passa o mouse*/
}

.header-title:hover {
    color: #d9d9d9;
}

/*imagem da header (hover separado)*/
.header-img-wrapper {
    position: relative;
    width: 100%;
    max-width: 840px;
    margin: 0 auto;
}

.header-img-wrapper .header-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    transition: opacity 0.4s ease;
    border: 1px dotted #ffffff;
}

.header-img-wrapper .header-img-hover {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
    border: 1px dotted #ffffff;
}

.header-img-wrapper:hover .header-img-hover {
    opacity: 1;
}

.header-img-wrapper:hover .header-img {
    opacity: 0;
}

/*tooltip (aplicável a qualquer imagem com classe img-tooltip)*/
.img-tooltip {
    position: relative;
    cursor: help;
}

/*tooltip container fixo (seguindo cursor)*/
#tooltip {
    position: fixed;
    top: 0;
    left: 0;

    background-color: #111111;
    color: #ffffff;
    border: 1px dotted #ffffff;
    font-size: 0.8rem;
    padding: 3px 8px;

    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 999;

    font-family: Arial, sans-serif;
    letter-spacing: 0.5px;
    text-align: justify;
}

/*container conteudo principal*/
.content {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 30px;
    padding: 30px;
    align-items: start;
}

.sidebar {
    padding: 10px 30px;
    display: block; /* Alterado de flex para block para os links fluírem melhor */
}

/* main */
.main {
    padding: 30px 50px;
    margin-bottom: 10px;
}

/* caixas padrão */
.sidebar, .main, .sidebar-box {
    border: 1px dotted #ffffff;
    background: #111111;
    align-self: start;
    box-sizing: border-box;
    width: 100%; /* Garante que ocupem todo o espaço da coluna (200px) */
}

/* sidebar */
.sidebar {
    padding: 10px 30px;
    display: block; 
}

/* caixa extra da sidebar */
.sidebar-box {
    padding: 12px 12px; /* Igualamos o padding para ficarem do mesmo tamanho */
    font-size: 0.8rem;
    color: #d9d9d9;
    text-align: center;
    margin-top: 10px; /* Cria o espaço entre as duas caixas */
}

/* navigation */
.navigation {
    border: 1px dotted #ffffff;
    background: #111111;

    display: flex;
    justify-content: center;
    gap: 10px;

    padding: 15px 20px;
    margin-bottom: 20px;
    overflow: hidden;
}

.video {
  position: relative;
  width: 100%;
  max-width: 600px; /* controla o tamanho máximo */
  margin: 20px auto; /* centraliza */
}

.video iframe {
  width: 100%;
  height: 280px; /* altura fixa */
  border: 1px dotted #ffffff;
}

/*textos*/
h1 {
    margin: 0 0 0.2rem 0;
    margin-top: 7px;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 1.1;
}

h2 {
    margin-top: 0.9rem;
    font-size: 0.9rem;
    font-weight: normal;
    color: #bfbfbf;
}

.main p, .sidebar p, .sidebar-box p {
    font-family: georgia, "palatino linotype", "times new roman", serif;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 1em 0;
    text-align: left;
}

.lang {
    float: right;
    font-size: 0.95em;
    opacity: 0.6;
    font-style: italic;
}


p {
    font-family: georgia, serif !important;
}

/*listas*/
ul {
    list-style: none;
    font-size: 0.9rem;
    padding: 0;
    margin: 0 0 1.2em 0;
}

li {
    margin-bottom: 6px;
}

/*links*/
a {
    color: #ffffff;
    text-decoration: none;
}

.sidebar a,
.sidebar-box a {
  
    font-size: 0.85rem;
    color: #d9d9d9;
    transition: 0.3s;
}

.sidebar a:hover,
.sidebar-box a:hover {
    color: #ffffff;
}

a:hover {
    text-decoration: underline;
}

/*imgs*/
.main img, .sidebar img, .sidebar-box img {
    width: 100%;
    height: auto;
    border: 1px dotted #ffffff;
}

.no-border {
    border: none !important;
}

/* caixa transparente */
.transparent-box {
    padding: 10px;
    background: transparent;
    margin-top: 15px;
    margin-bottom: 0px;
}

/*quotes*/
.quote {
    border-left: 2px solid #ffffff;
    padding-left: 15px;
    margin: 20px auto;
    max-width: 600px;
    font-family: Georgia, serif;
    font-size: 1rem;
    font-style: italic;
    color: #e6ei6e6;
    text-align: left;
    line-height: 1.4;
}

/*glow*/
.glow {
    font-weight: bold;
    animation: glowColors 1s infinite alternate linear;
    display: inline-block;
    text-shadow: 2px 4px 0px #000;
}

@keyframes glowColors {
    0% { color: #AAFC4C; }
    100% { color: #4768FF; }
}

/*scroll*/
.scroll {
    max-height: 260px;
    overflow-y: auto;
    padding: 15px 30px;
    border: 1px dotted #ffffff;
    background: #0a0a0a;
}

.no-sidebar {
    display: block;
}

.no-sidebar main {
    width: 100%;
}

.no-sidebar .main {
    max-width: 900px;
    margin: 0 auto;
}

.slider {
    width: 100%;
    height: 100%;
    margin: auto;
    border: dotted 1px;

    display: flex;
}

.slide {
    flex: 1;
    display: none;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.arrow {
    width: 30px;

    border: dotted 1px;
    background: #111111;

    cursor: pointer;
    font-size: 18px;
    color: #ffffff;
}

.arrow:hover {
    background: #2a2a2a;
}
/*<<<<mobile/responsivo (work in progress)*/
@media (max-width: 768px) {

  .header-title {
    position: absolute;
    font-size: 4rem;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    text-align: center;
  }

  .frame {
    margin: 30px 0px 0px;
  }

  .content {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0;
    margin: 0;
  }

  .sidebar {
    order: 0;
  }

  .main {
    order: 2;
    padding: 20px;
  }

  .header-img-wrapper {
    width: 100%;
  }

  /* o que você quer esconder */
  .sidebar-box {
    display: none;
  }

}