/* ============================= Accentcolour============================= */

h3 {
  color: #6de6df !important; 
}
.rollup {
  border: 2px solid #01beb569; 
}



.filter-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.filter-buttons button {
  background: #1a1a1a81;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.8rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3),
              0 0 10px rgba(1,190,182,0.3);
}

.filter-buttons button::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(1,190,182,0.2);
  transition: width 0.3s ease;
  z-index: 0;
}

.filter-buttons button:hover::after {
  width: 100%;
}

.filter-buttons button:hover {
  color: #01beb6;
  box-shadow: 0 6px 10px rgba(1,190,182,0.5)
              0 0 20px rgba(1,190,182,0.4);
}

.filter-buttons button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 190, 182, 0.5);
}

/* ========================= Highlight Styles====================== */
p.highlight[data-category="design"] {
  background-color: #c87200f8;
}

p.highlight[data-category="build"] {
  background-color: #009a43ff;

}
p.highlight[data-category="test"] {
  background-color: #008990ff;
}
p.highlight[data-category="learn"] {
  background-color: #bb008fff;

}
span.highlight-active[data-category="design"] {
  background-color: #c87200f8;
  display: inline-block;
  box-decoration-break: clone;
}

span.highlight-active[data-category="build"] {
  background-color: #009a43ff;
  display: inline-block;
  box-decoration-break: clone;
}
span.highlight-active[data-category="test"] {
  background-color: #008990ff;
  display: inline-block;
  box-decoration-break: clone;

}span.highlight-active[data-category="learn"] {
background-color: #bb008fff;
  display: inline-block;
  box-decoration-break: clone;
}

/* =========================  Active Buttons========================= */
.filter-buttons button.active-all {
  background-color: #01beb6;
  color: #fff;
  box-shadow: 0 6px 10px rgba(1,190,182,0.7)
              0 0 20px rgba(1,190,182,0.5);
}

.filter-buttons button.active-design {
  background-color: #c87200f8;
  color: #fff;
  box-shadow: 0 6px 10px rgba(181, 54, 0, 0.7),
              0 0 20px rgba(223, 145, 0, 0.5);
}

.filter-buttons button.active-build {
  background-color: #009a43ff;
  color: #fff;
  box-shadow: 0 6px 10px rgba(0, 89, 3, 0.7),
              0 0 20px rgba(0, 97, 8, 0.5);
}

.filter-buttons button.active-test {
  background-color: #008990ff;
  color: #fff;
  box-shadow: 0 6px 10px rgba(0, 247, 255, 0.7),
              0 0 20px rgba(0, 234, 255, 0.5);
}

.filter-buttons button.active-learn {
  background-color: #ff00ffff;
  color: #fff;
  box-shadow: 0 6px 10px rgba(255,0,255,0.7),
              0 0 20px rgba(255,0,255,0.5);
}

#connie-1 {
  top: 20%;
 position: absolute; 
 animation: float 3s ease-in-out infinite;
}
#connie-2 {
  top: 27%;
 position: absolute;
 animation: float 3s ease-in-out infinite;
          
}

#connie-3 {
  top: 65%;
  position: absolute; 
  animation: float 3s ease-in-out infinite;
  
}

#connie-4 {
  top: 85%;
  position: absolute;  
  animation: float 3s ease-in-out infinite;
}


.cycle-container {
  position: relative;
  display: inline-block;
}

/* clickable overlay zones */
.zone {
  position: absolute;
  width: 40%;
  height: 40%;
  top: 0;
  left: 0;
  cursor: pointer;
}

/* four quadrants */
.learn-zone {
  top: 10%;
  left: 0;
}

.design-zone {
  top: 10%;
  left: 40%;
}

.test-zone {
  top: 50%;
  left: 0%;
}

.build-zone {
  top: 50%;
  left: 40%;
}


/* Table header */
.deepsea-table thead {
  background: linear-gradient(90deg, rgb(33, 221, 221), rgb(30, 168, 222));
  color: #ffffff;
}

.deepsea-table tbody tr:nth-child() {
  background-color: rgba(20, 0, 15, 0.15);

}

.deepsea-table tbody tr:hover {
  background: none !important;
  box-shadow: none !important;
}

.deepsea-table td:nth-child(2) {
  text-align: left;
  font-family: monospace;
}

.deepsea-table td {
  color: #ffffff !important;
  padding: 0.5rem 1rem;
  text-align: left;
  
}

.deepsea-table .result_sample {
    background:rgba(58, 16, 42, 1) !important;
  color: rgb(51, 225, 248) !important;
}