:root {
   --main-bg: #121212;
    --main-color: #f1f1f1;
   --accent-color: #000000;
   --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --max-width: 1200px;
    --corFundo: #7e2323;
    --tamanhoLink: 1.5rem;
}
  

header {
    background-color: var(--corFundo);
    height: 100px;
}

.main-content {
  padding: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hero {
  background-color: #1e1e1e;
  padding: 2rem;
  border-radius: 8px;
}

a {
    font-size: var(--tamanhoLink);
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-family: var(--font-primary);
}

a:hover {
    color: rgb(0, 0, 0);
    
}

.menuPrincipal {
    font-family: var(--font-primary);
    height: 100px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.menuPrincipal>li:hover {
    transform: translateY(-6px);
    transition: 0.4s;
}

.logoMobile {
    display: none;
}

@media screen and (max-width:600px) {
    header {
        position: fixed;
        left: 0;
        width: 18%;
        height: 100vh;
    }

    .hero{
      width: 70vw;
      font-size: 10;
      left: 100px;
      position: absolute;
    }

    .hero h1{
      font-size: 25px;
    }

    main{
      height: 1200px;
    }
    a {
        font-size: var(--tamanhoLinkMenu);
    }

    .logoMobile {
        display: inline;
        width: 80px;
        position: fixed;
        bottom: 20px;
        left: 10px;
    }
   .p{
    font-size: 2000px;
    }

   .story{
    display: none;

   }
}

@media (min-width:320px) {
      header{
        display: flex;
        flex-direction: column;
      }
  
}

h1{
    height: 80px;
    text-align: center;
    padding: 10px;
    font-size: 40px;
} 

.dusk{
    border-radius: 20px;
    width: 250px;
    height: 250px;
    float: left;

}

p{
  color: #f1f1f1;
  text-align: center;
  font-size: 25px;

}

body {
  background-color: var(--main-bg);
  color: var(--main-color);
  font-family: var(--font-primary);
  line-height: 1.6;
}

.main-content {
  padding: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hero {
  background-color: #1e1e1e;
  padding: 2rem;
  border-radius: 8px;
}

.story {
  background-color: #232323;
  padding: 2rem;
  border-radius: 8px;
}

.footer {
  background-color: #1a1a1a;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
  font-size: 0.9rem;
}