/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("electric.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
  font-family: papyrus;
}
.site-header {
  text-align: center;
  margin-top: 30px;
  color: red;
  font-family: copperplate;
}

.site-title {
  font-size: 64px;
  color: red;
  letter-spacing: 6px;
  margin: 0;
  font-family: copperplate;
}.site-tagline {
  margin-top: 12px;
  font-size: 20px;
  color: white;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}.gif-row {
  text-align: center;
}.board-scroll {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding: 25px;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  font-family: copperplate;
  }
  .content-box {
  max-width: 700px;
  margin: 40px auto;
  padding: 25px;
  font-family: copperplate;
  background: rgba(0, 0, 0, 0.75);
  border: 5px red;}
  .board {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
  color: red;
  font-weight: bold;
  font-size: 18px;
}

.board img {
  max-width: 120px;
  max-height: 120px;
  margin-bottom: 10px;
  border: 2px red;
  border-radius: 8px;
}

.board:hover img {
  filter: brightness(1.2);
}

.board:hover span {
  text-decoration: underline;
}.board-header {
  text-align: center;
  color: red;
  margin-bottom: 30px;
}
.archive-list a {
  color: red;
  text-decoration: none;
  font-family: copperplate;
}

.archive-list a:hover {
  text-decoration: underline;
}
.rating-box {
  text-align: center;
  margin: 30px auto;
  padding: 15px;
  max-width: 300px;
  border: 2px red;
  background: black;
  font-family: monospace;
}

.star {
  font-size: 28px;
  cursor: pointer;
  color: white;
  transition: 0.2s ease;
}

.star:hover {
  color: gold;
}

.star.active {
  color: #FFD700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
}
.site-footer {
  margin-top: 60px;
  padding: 20px 0;

  background: rgba(0, 0, 0, 0.8);
  border-top: 2px red;

  text-align: center;
  font-family: monospace;
  font-size: 13px;
}

.site-footer p {
  margin: 4px 0;
  color: red;
}
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}
.underline {
  text-decoration: underline;
}   
.switch-container{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
}

.switch{
  position:relative;
  width:60px;
  height:34px;
}

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

.slider{
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#ccc;
  transition:.4s;
  border-radius:34px;
}

.slider:before{
  position:absolute;
  content:"";
  height:26px;
  width:26px;
  left:4px;
  bottom:4px;
  background:white;
  transition:.4s;
  border-radius:50%;
}

input:checked + .slider{
  background:#4CAF50;
}

input:checked + .slider:before{
  transform:translateX(26px);
}
.switch-container{
  background:#f2f2f2;
  padding:15px;
  border-radius:8px;
  width:140px;
  margin:auto;
  box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #ffcc00;
}

input:checked + .slider:before {
  transform: translateX(26px);
}
#musicSwitch {
transition: transform .1s;
}

#musicSwitch:active {
transform: scale(.95);
}
.music-box{
  position:relative;
  text-align:center;
  left: 15%;
  top:630px;
}

.music-label{
  font-size:12px;
  color:red;
  margin-bottom:4px;
  font-family: Arial, sans-serif;
}
hr {
  border: none;
  height: 2px;
  background-color: red;
}
.business-header{
  display: flex;
  align-items: center;
  gap:15px;
}

.music-box{
  text-align:center;
}
.dark-mode {
  background-color:#111;
  color:white;
}

.dark-mode a {
  color:#ffd24d;
}

.dark-mode hr {
  background:red;

}
.control-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  max-width:900px;
  margin:auto;
  padding:10px 20px;
}
@media (max-width:600px){

.control-panel{
  padding:10px;
}
}.trippy-gifs {
  margin: 40px 0;
  text-align: center;
}

.trippy-gifs img {
  margin: 0 10px;
  width: 96px;          /* scale up small GIFs */
}.about-image {
  margin: 40px 0;
  text-align: center;
}

.about-image img {
  width: 120px;       }
  .logo-row {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;          /* vertical alignment */
  justify-content: center;      /* keeps logo centered */
  gap: 20px;       
  margin: 0 auto;        /* THIS is the key */
  width: fit-content/* space between items */
}

.flag {
  width: 60px; /* adjust size */
}

.logo {
  width: 120px; /* your bulb size */
}
.logo-row img {
  display: block;
}
.logo-row {
  transform: translateX(10px); /* tiny manual nudge if needed */
}
.switch-panel {
  display: flex;
  justify-content: center;   /* centers the whole panel */
  align-items: center;
  gap: 40px;                 /* space between switches */

  border: 2px solid red;     /* your divider box */
  padding: 15px 25px;
  margin: 20px auto;
  width: fit-content;

  background: rgba(0,0,0,0.6);  /* optional: subtle dark panel */
  border-radius: 10px;
}

.switch-item {
  text-align: center;
}

.switch-item p {
  font-size: 12px;
  margin-bottom: 5px;
}
@media (max-width: 600px) {
  .switch-panel {
    flex-direction: column;
    gap: 15px;
  }
}
.header-box {
  text-align: center;
}

/* flags + logo row (you already have this mostly) */
.logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}

/* THIS is what you need for the switches */
.switch-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* space between switches */
}

.switch-item {
  text-align: center;
}
/* Neon Mode base effect */
.neon-mode {
  color: #FF005B;
  text-shadow: 0 0 5px #ffd000, 0 0 10px #ffd000;
}

/* Glow for boxes, borders, etc */
.neon-mode .box,
.neon-mode hr,
.neon-mode div {
  box-shadow: 0 0 10px rgba(255, 208, 0, 0.6);
  border-color: #ffd000;
}

/* Optional: glowing links */
.neon-mode a {
  color: #ffd000;
  text-shadow: 0 0 5px #ffd000;
}

/* Optional: subtle animated current */
@keyframes electricFlow {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}

.neon-mode {
  animation: electricFlow 2s infinite ease-in-out;
}
form {
  max-width: 400px;
  margin: auto;
}

input, textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  background: #111;
  color: white;
  border: 1px solid #444;
}

button {
  margin-top: 10px;
  padding: 10px;
  background: #ffd000;
  border: none;
  cursor: pointer;
}
.thread {
  background: rgba(0,0,0,0.6);
  border: 2px red;
  border-radius: 8px;
  padding: 10px;

  text-decoration: none;
  color: white;
  text-align: center;

  font-size: 14px;
}

.thread img {
  max-width: 100%;
  max-height: 120px;
  margin-bottom: 8px;
}

.thread span {
  display: block;
  color: yellow;
  font-size: 12px;
  margin-top: 4px;
}