/* tab button container */
.tab-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content:center;
  margin-bottom:1rem;
 background: #ecf4ff;
  box-shadow: inset 5px 0px 15px 10px #b1c8eb73;
  border-radius: 10px;
  border: 1px solid var(--color-blue);
  padding:1rem;
  font-family:"rainyhearts";
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
}

/* individual tab buttons */
.tab-btn {
      font-family:"rainyhearts";

  background: #f7ecff;
  box-shadow: inset 5px 0px 15px 10px #d4b1eb73;
  border-radius: 5px;
  border: 1px solid var(--color-purple);
  color: var(--color-darkblue);
  padding: 0.3em .5em;
  font-size: 1.5rem;
  transition: all 0.2s ease-in-out;
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
    
}

.tab-btn:hover {
  background: #fffdec;
  box-shadow: inset 5px 0px 15px 10px #ebe7b173;
  border: 1px solid var(--color-purple);
}

.tab-btn.active {
  background: #fffdec;
  box-shadow: inset 5px 0px 15px 10px #dad09473;
  border: 1px solid var(--color-yellow);
}


.tab-panel {
  display: none;
 
  padding:1rem;
}

.tab-panel.active {
  display: block;
  margin-top: 1rem;
}



@media (max-width: 768px) {
  .tab-buttons {
    flex-direction: column;
  }
  
  .tab-btn {
    width: 60%;
  }
}

/* RESPONSIVE BREAKPOINTS */

/* tablets and small laptops (1024px and below) */
@media (max-width: 1024px) {
  .content {
    max-width: 85vw;
   width: 95vw;
  }
  .header,
  .footer,
  .pink-container,
  .blue-container, .yellow-container, .green-container, .purple-container,
  .changelog,
  .nav-btn,
  .blog-link {
    border-image-outset: 0;
  }
  header-img {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  .content-column {
    flex: 1 1 100%;
    min-width: 100%;
  }
    .content-row {
    flex-direction: column;
  }
}