@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');

body, html{ 
    margin:0; 
    height:100%; 
    font-family: "Google Sans Code", monospace;
    overflow: hidden;
    background-color: antiquewhite;
}

button, .btn, .select, input, select, label { 
  font-family: "Google Sans Code", monospace; 
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgb(255, 236, 221);
  border-bottom: 1px solid #e5e5e5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 240px;
  gap: 16px;
  padding: 20px 16px;
  align-items: start;
}

.brand h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1;
}

.brand .subtitle {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: #666666;
}

.controls { 
  grid-column: 3; display: flex; flex-direction: column; gap: 4px; 
}

.controls .row { 
  display: flex; gap: 8px; 
}

.sections { 
  grid-column: 4; grid-row: 1; align-self: start; 
}

.sections { 
  list-style: none; margin: 0; padding: 0; 
}


.sections li { 
  display: flex; gap: 8px; cursor: pointer; padding: 2px 0; 
}
.sections li span { 
  width: 20px; color: #777777; 
}
.sections li.active { 
  color: #ff6a00; 
}

.btn {
  border: 1px solid #cccccc;
  background: white;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 4px;
}
/* ai helped with this lol did not know you could do this */
.btn.active { 
  background: black; color: white; border-color: black; 
}

.select { 
  border: 1px solid #cccccc; padding: 6px 10px; border-radius: 4px; font-size: 12px; 
}

.center-inline { 
  display: inline-flex; gap: 6px; align-items: center; font-size: 12px; 
}

.center-toggle {
  display: flex;
  align-items: center;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: #333333;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* .slider {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: #cccccc;
  border-radius: 20px;
  transition: 0.3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s; 
} */
/* 
input:checked + .slider {
  background-color: #e91e63;
}

input:checked + .slider:before {
  transform: translateX(20px);
} */

.label-text {
  font-weight: 500;
  white-space: nowrap;
}
#canvas{ 
    position:relative; 
    width:100%; 
    height:100%; 
    background:white; 
    margin-top: 68px;
}

img{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-10%,-20%);
  max-width:250px;
  mix-blend-mode:multiply;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

@media (max-width: 768px) {
  .controls {
    flex-direction: column;
    gap: 10px;
    top: 10px;
    left: 10px;
    right: 10px;
    transform: none;
    width: auto;
  }
  
  .data-toggle {
    width: 100%;
    justify-content: center;
  }
  
  .category-filter select {
    width: 100%;
  }
  
  .center-toggle {
    width: 100%;
    justify-content: center;
  }
  
  img {
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .controls {
    padding: 10px;
  }
  
  img {
    max-width: 150px;
  }
}