/* 🎨 Cores retrô */
:root {
  --black: #231F20;
  --red: #BB4430;
  --cyan: #7EBDC2;
  --yellow: #F3DFA2;
  --white: #EFE6DD;
}

/* Reset simples */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Corpo com fundo quadriculado */
body {
  font-family: "Courier New", monospace;
  color: var(--white);
  background-color: var(--black);
  background-image: url("scrolando.gif"); /* você pode substituir por quadriculado se quiser */
  background-repeat: repeat;
  background-size: 50px 50px; /* tamanho do quadrado */
  image-rendering: pixelated;
  height: 100vh;
}

/* Header com duas logos */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 200px;
  background: rgba(35,31,32,0.9);
  border-bottom: 2px solid var(--white);
}

.header .logo {
  height: 100px;
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5)));
}

/*
/* Layout principal: sidebar + conteúdo */
.main {
  display: flex;
  height: calc(100vh - 80px); /* altura da tela menos header */
}

/* Sidebar com abas coloridas */
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: 120px;
  background: rgba(35,31,32,0.85);
  border-right: 2px solid var(--white);
}

.tab {
  border: 2px solid var(--white);
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--white);
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}

.tab.red { background-color: var(--red); }
.tab.cyan { background-color: var(--cyan); color: var(--black);}
.tab.yellow { background-color: var(--yellow); color: var(--black);}
.tab.black { background-color: var(--black); }

.tab:hover {
  filter: brightness(1.2);
}

/* Área de conteúdo */
.content {
  flex: 1;
  padding: 20px;
  background: rgba(35,31,32,0.8);
  border-left: 2px solid var(--white);
  overflow-y: auto;
}

/* Títulos */
h1 {
  border-bottom: 2px dashed var(--white);
  margin-bottom: 15px;
  padding-bottom: 5px;
}