body, h1, h2, p {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}


.container {
  margin-top: 2rem;
  max-width: 1200px;
  padding: 5px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


h2 {
  font-size: 1.5em;
  color: #333;
}


p {
  font-size: 1em;
  color: #555;
}
 

.button-row {
  border: 0.5px solid rgb(148, 141, 141);
  padding: 5px;
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

button.btn {
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}


.btn-xs {
  background-color: #38A169;
  color: white;
  border: none;
  padding: 5px 10px;
  font-size: 0.75em;
}

.btn-sm {
  background-color: #38A169;
  color: white;
  border: none;
  padding: 8px 15px;
  font-size: 0.875em;
}

.btn-md {
  background-color: #38A169;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 1em;
}

.btn-lg {
  background-color: #38A169;
  color: white;
  border: none;
  padding: 12px 25px;
  font-size: 1.125em;
}


.btn-solid {
  background-color: #38A169;
  color: white;
  border: none;
}

.btn-solid:hover {
  background-color: #2F855A;
  transform: translateY(-2px);
}


.btn-outline {
  background-color: transparent;
  color: #38A169;
  border: 2px solid #38A169;
}

.btn-outline:hover {
  background-color: rgba(56, 161, 105, 0.1);
  transform: translateY(-2px);
}


.btn-ghost {
  background-color: transparent;
  color: #38A169;
  border: none;
}

.btn-ghost:hover {
  background-color: rgba(56, 161, 105, 0.1);
  transform: translateY(-2px);
}


.btn-link {
  background-color: transparent;
  color: #38A169;
  border: none;
  text-decoration: underline;
}

.btn-link:hover {
  color: #2F855A;
  transform: translateY(-2px);
}


.code-example {
  background-color: #2D3748;
  color: #E2E8F0;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875em;
  color: #A0AEC0;
}


.copy-btn {
  background-color: #38A169;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875em;
  transition: background-color 0.3s ease;
}

.copy-btn:hover {
  background-color: rgb(201, 198, 198);
}


pre {
  background-color: rgba(128, 128, 128, 0.367);
  border-radius: 5px;
  margin: 0;
  padding: 15px;
  color: #9AE6B4;
  overflow-x: auto; 
  white-space: pre-wrap; 
  word-wrap: break-word; 
}

code {
  white-space: pre-wrap; 
  word-wrap: break-word; 
  font-size: 1em; 
}


.description {
  margin-top: 15px;
  color: #E2E8F0;
  font-size: 14px;
}

.description p {
  margin-bottom: 10px;
}


.button-group {
    display: flex;
    gap: 10px;
}


.button-group .btn {
    display: flex;
    align-items: center;
    background-color: #F7FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 14px;
    color: #2D3748;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.button-group .btn i {
    margin-right: 8px;
}

.button-group .btn:hover {
    background-color: #EDF2F7;
    border-color: #CBD5E0;
}




.stack {
    display: flex;
    flex-direction: column;
  }
  
  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 0;
    background-image: url('https://bit.ly/2Z4KKcF');
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 8px;
  }
  
  .button-group {
    display: flex;
    gap: 16px;
  }
  
  .button {
    padding: 8px 16px;
    border: none;
    cursor: pointer;
  }
  
  .white-alpha {
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  .black-alpha {
    background-color: rgba(96, 91, 91, 0.8);
  }
  
  .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .wrap-item {
    margin: 4px;
  }
  
  .gray {
    background-color: gray;
    border-radius: 5px;
  }
  
  .red {
    background-color: red;
    border-radius: 5px;
    color: white;
  }
  
  .orange {
    background-color: orange;
    border-radius: 5px;
    color: white;

  }
  
  .yellow {
    background-color: yellow;
    border-radius: 5px;
  }
  
  .green {
    background-color: green;
    border-radius: 5px;
    color: white;

  }
  
  .teal {
    background-color: teal;
    border-radius: 5px;
    color: white;

  }
  
  .blue {
    background-color: blue;
    border-radius: 5px;
    color: white;

  }
  
  .cyan {
    background-color: cyan;
    border-radius: 5px;
  }
  
  .purple {
    background-color: purple;
    border-radius: 5px;
    color: white;

  }
  
  .pink {
    background-color: pink;
    border-radius: 5px;
    color: white;

  }
  

  .note {
    background-color: #FEEBC8;
    padding: 10px;
    border-left: 4px solid #DD6B20;
    margin-bottom: 20px;
    border-radius: 4px;
}