/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Paleta de Cores */
:root {
  --branco: #FAFBF5;
  --preto: #212122;
  --verde-kelly: #4CBB17;
  --violeta: #8F00FF;
}

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

header nav a {
  margin: 0;
  padding: 0.25rem 0;
  color: var(--verde-kelly);
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s;
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 1rem;
}


body {
  background-image: url('background.svg');
  background-size: 60px 60px;
  font-family: sans-serif;
  margin: 0;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-card {
  background: white;
  border: 5px solid #212122; /* thick black border */
  padding: 30px;
  width: 100%;
  max-width: 1000px;
  border-radius: 0; /* sharp edges */
  box-sizing: border-box;
}

.container {
  
  display: flex;
  gap: 20px; /* space between main card and menu */
  align-items: flex-start; /* align top edges */
  justify-content: center;
  margin-top: 40px;
}

header {
  background-color: var(--preto);
  color: var(--branco);
  text-align: center;
  padding: 2rem 1rem;
}

header h1 {
  margin-bottom: 1rem;
}

nav a {
  color: var(--verde-kelly);
  text-decoration: none;
  margin: 0 1rem;
  font-weight: bold;
  transition: color 0.3s;
}

nav a:hover {
  color: var(--violeta);
}

/* Card central */
.card {
  background-color: var(--branco);
  border: 6px solid var(--preto);
  border-radius: 0px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  max-width: 700px;
  width: 100%;
  padding: 2rem;
  text-align: center;
}

.intro h2 {
  color: var(--violeta);
  margin-bottom: 1rem;
}

.intro p {
  color: var(--preto);
  font-size: 1.2rem;
}

footer {
  background-color: var(--preto);
  color: var(--branco);
  text-align: center;
  padding: 1rem;
}

/* Menu container */
.menu {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Each small menu item card */
.menu-item {
  background: white;
  border: 5px solid #212122;
  padding: 15px 20px;
  width: 300px;
  cursor: pointer;
  border-radius: 0; /* sharp edges */
  box-sizing: border-box;
  text-align: center;
  user-select: none;
  transition: background 0.3s ease;
}

/* Hover effect */
.menu-item:hover {
  background: #4CBB17; /* Kelly Green */
  color: white;
}

.menu-header {
  background: white;
  font-weight: bold;
  text-align: center;
  padding: 15px 20px;
  border: 5px solid #212122;
  padding: 15px 20px;
  width: 300px;
  border-radius: 0;
  box-sizing: border-box;
  user-select: none;
  cursor: default;
}

/* Responsividade */
@media (max-width: 600px) {
  .card {
    padding: 1.5rem;
  }

  .intro p {
    font-size: 1rem;
  }
  
  header nav {
    flex-direction: column;
    align-items: center;
  }

  header nav a {
    width: 100%;
    text-align: center;
  }
}