style.scss

*{


$bg-c0olor: pink;
$margin-top: 20px;
}
#menu {
    margin-top: $margin-top;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: $bg-color;
}

#menu li {
  margin: 0 10px;
  display: inline-block;
  color: $bg-color;
  background-color: transparent; /* Adicione esta linha para remover a cor de fundo dos itens do menu */
}
.loja {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: pink;
  color: white;
  margin-right: 20px;
}


// Defini uma variável para a cor rosa
$rosa: #FFC0CB;

// Usei um seletor aninhado para estilizar o cabeçalho
header {
  // Apliquei uma cor de fundo rosa
  background-color: $rosa;
  // Apliquei uma margem de 10px
  margin: 10px;
  // Apliquei um padding de 20px
  padding: 20px;
  // Usei um seletor descendente para estilizar o título do cabeçalho
  h1 {
    // Apliquei uma cor de texto branca
    color: white;
    // Apliquei um alinhamento de texto centralizado
    text-align: center;
  }
  // Usei um seletor descendente para estilizar a navegação do cabeçalho
  nav {
    // Apliquei um display flexível para alinhar os itens horizontalmente
    display: flex;
    // Apliquei um alinhamento de itens centralizado
    align-items: center;
    // Apliquei um justificamento de conteúdo com espaço entre os itens
    justify-content: space-between;
    // Usei um seletor descendente para estilizar a lista da navegação
    ul {
      // Removi o estilo padrão da lista
      list-style: none;
      // Removi o padding padrão da lista
      padding: 0;
      // Usei um seletor descendente para estilizar os itens da lista
      li {
        // Apliquei um display inline-block para colocar os itens lado a lado
        display: inline-block;
        // Apliquei uma margem de 10px
        margin: 10px;
        // Usei um seletor descendente para estilizar os links dos itens da lista
        a {
          // Apliquei uma cor de texto branca
          color: white;
          // Apliquei um text-decoration none para remover o sublinhado dos links
          text-decoration: none;
          // Apliquei um padding de 5px
          padding: 5px;
          // Apliquei uma borda sólida branca de 2px
          border: 2px solid white;
          // Apliquei um border-radius de 5px para arredondar as bordas dos links
          border-radius: 5px;
          // Usei um seletor pseudo-classe para estilizar os links quando o mouse passar sobre eles
          &:hover {
            // Apliquei uma cor de fundo branca
            background-color: white;
            // Apliquei uma cor de texto rosa
            color: $rosa;
          }
        }
      }
    }
  }
}

// Usei um seletor aninhado para estilizar o conteúdo principal da página
main {
  // Apliquei uma margem de 10px
  margin: 10px;
  // Usei um seletor descendente para estilizar o título da página
  .page-title {
    // Apliquei uma cor de texto rosa
    color: $rosa;
    // Apliquei um alinhamento de texto centralizado
    text-align: center;
  }
  // Usei um seletor descendente para estilizar a seção da tabela
  section {
    // Apliquei uma margem de auto para centralizar a tabela horizontalmente
    margin: auto;
    // Apliquei uma largura máxima de 80% para a tabela não ficar muito grande
    max-width: 80%;
    // Usei um seletor descendente para estilizar a tabela dos produtos
    table {
      // Apliquei uma largura de 100% para ocupar todo o espaço disponível na seção
      width: 100%;
      // Apliquei um border-collapse collapse para remover o espaço entre as células da tabela
      border-collapse: collapse;
      // Usei um seletor descendente para estilizar o cabeçalho da tabela
      thead {
        // Usei um seletor descendente para estilizar as células do cabeçalho da tabela
        th {
          // Apliquei uma cor de fundo rosa
          background-color: $rosa;
          // Apliquei uma cor de texto branca
          color: white;
          // Apliquei um padding de 10px
          padding: 10px;
        }
      }
      // Usei um seletor descendente para estilizar o corpo da tabela
      tbody {
        // Usei um seletor descendente para estilizar as linhas do corpo da tabela
        tr {
          // Usei um seletor descendente para estilizar as células do corpo da tabela
          td {
            // Apliquei um padding de 10px
            padding: 10px;
            // Apliquei uma borda sólida cinza de 1px
            border: 1px solid gray;
            // Usei um seletor pseudo-classe para estilizar as células quando o mouse passar sobre elas
            &:hover {
              // Apliquei uma cor de fundo cinza claro
              background-color: lightgray;
            }
          }
        }
      }
    }
  }
  // Usei um seletor descendente para estilizar o resumo da compra
  aside {
    // Apliquei uma margem de auto para centralizar o resumo horizontalmente
    margin: auto;
    // Apliquei uma largura máxima de 80% para o resumo não ficar muito grande
    max-width: 80%;
    // Apliquei uma margem superior de 20px para separar o resumo da tabela
    margin-top: 20px;
    // Usei um seletor descendente para estilizar a lista do resumo
    ul {
      // Removi o estilo padrão da lista
      list-style: none;
      // Removi o padding padrão da lista
      padding: 0;
      // Usei um seletor descendente para estilizar os itens da lista
      li {
        // Apliquei uma cor de texto rosa
        color: $rosa;
        // Apliquei um font-weight bold para deixar os itens em negrito
        font-weight: bold;
        // Apliquei um display flexível para alinhar os itens horizontalmente
        display: flex;
        // Apliquei um justificamento de conteúdo com espaço entre os itens
        justify-content: space-between;
      }
    }
    // Usei um seletor descendente para estilizar o botão de finalizar compra
    button {
      // Apliquei uma cor de fundo rosa
      background-color: $rosa;
      // Apliquei uma cor de texto branca
      color: white;
      // Apliquei um padding de 10px
      padding: 10px;
      // Apliquei uma borda sólida branca de 2px
      border: 2px solid white;
      // Apliquei um border-radius de 5px para arredondar as bordas do botão
      border-radius: 5px;
      // Apliquei um cursor pointer para indicar que o botão é clicável
      cursor: pointer;
      // Usei um seletor pseudo-classe para estilizar o botão quando o mouse passar sobre ele
      :hover {
        // Apliquei uma cor de fundo branca
        background-color: white;
        // Apliquei uma cor de texto rosa
        color: $rosa;
      }
    }
  }
}