* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
  min-height: 100vh;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Estilização index.html <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* Estilização Header-navbar*/
#header-container {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: rgb(0, 0, 0);
  height: 80px;
  width: 100%;
}
#logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
#logo a {
  text-decoration: none;
  color: blueviolet;
}
#logo img {
  width: 70px;
}

#nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  color: white;
}
#nav-links li a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: white;
  text-decoration: none;
  border-radius: 30px;
  transition: 0.5s ease;
}
#nav-links li a:hover {
  transition: 0.5s ease;
  color: aqua;
}
#hamburguer {
  display: none;
}

#hamburguer span {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  margin: 5px auto;
  background-color: white;
  transition: all 0.3s ease-in-out;
}
#dropdown {
  height: 50px;
  display: flex;
  align-items: center;
}
#dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  display: none;
  background-color: #000000;
  box-shadow: #000000;
  margin-top: 160px;
  padding: 10px;
}
#dropdown-menu a {
  text-align: none;
  color: white;
  text-decoration: none;
  margin-top: 10px;
}
#dropdown:hover #dropdown-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#body-section-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(assets/bg-desktop.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
#body-section-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(
    to left,
    #1c1f1f,
    #181a19,
    #131413,
    #0d0d0c,
    #040403
  );
  background-size: cover;
  width: 100%;
  height: 100vh;
}
#body-section-3 {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  background-image: linear-gradient(
    to left,
    #1c1f1f,
    #181a19,
    #131413,
    #0d0d0c,
    #040403
  );
  background-size: cover;
  width: 100%;
  height: 90%;
}

#section-1-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden;
  gap: 50px;
  color: white;
}
#section-1-container img {
  width: 400px;
}
#section-1-container h1 {
  color: violet;
}
#section-1-container a {
  background-color: violet;
  color: white;
  text-decoration: none;
  padding: 10px;
  border-radius: 50px;
  transition: 1s ease;
}
#section-1-container a:hover {
  transform: 1s ease;
  background-color: rgb(124, 3, 124);
}
#btn-section-1 {
  margin-top: 30px;
}
#section-2-container {
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 50px;
  color: white;
}
#section-2-container img {
  width: 600px;
}
#section-2-container h1 {
  color: violet;
}
#section-3-container h1 {
  color: violet;
}
#description-section-3 {
  color: white;
  padding: 80px;
  display: flex;
  text-align: center;
  flex-direction: column;
}
#description-section-3 h1 {
  color: violet;
  font-size: 30px;
}
#description-section-3 h2 {
  color: white;
  font-size: 20px;
}
#cards {
  flex-wrap: wrap;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 50px;
}
#cards #card {
  color: rgb(255, 187, 0);
  text-align: center;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border: 1px rgb(204, 0, 255) solid;
  display: flex;
  width: 20%;
  background-color: rgb(24, 21, 22);
  gap: 50px;
  border-radius: 30px;
  margin-bottom: 20px;
}
#cards #card p {
  color: white;
}
#cards #card img {
  width: 60%;
  height: 30%;
}
#cards #card a {
  color: white;
  text-decoration: none;
  background-color: violet;
  padding: 20px 50px;
  border-radius: 50px;
  margin-bottom: 20px;
}
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  font-size: 8px;
  color: white;
  background-color: black;
  width: 100%;
  padding: 40px;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Estilização comandos.html <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
#command-container-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: url(assets/bg-desktop.jpg) no-repeat;
  background-size: cover;
}
#container-1 {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  gap: 100px;
  color: white;
}
#container-1 img {
  width: 300px;
}
#container-1 h1 {
  font-size: 50px;
  color: violet;
}
#commands-container {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  background-image: linear-gradient(
    to left,
    #1c1f1f,
    #181a19,
    #131413,
    #0d0d0c,
    #040403
  );
}

#commands-geral {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
#commands-geral details {
  color: white;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
#commands-geral h1 {
  margin-top: 100px;
  font-size: 50px;
  color: violet;
}
#commands-geral p {
  color: bisque;
}
summary::-webkit-details-marker {
  display: none;
}
summary {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  width: 100%;
  height: 4vh;
  border-radius: 30px;
  border: 1px #000000 solid;
  background: #0e0e0e;
  list-style: none;
}
details {
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#commands-puniçoes {
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: 20px;
}
#commands-puniçoes details {
  color: white;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
#commands-puniçoes h1 {
  font-size: 50px;
  color: violet;
}
#commands-puniçoes p {
  color: bisque;
}
#commands-outros {
  margin-bottom: 20px;
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: 20px;
}
#commands-outros details {
  color: white;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
#commands-outros h1 {
  font-size: 50px;
  color: violet;
}
#commands-outros p {
  color: bisque;
}