/* Reset box sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Body and general layout */
body {
  background: url("https://i.postimg.cc/5jdRycXw/mayoibg.gif") no-repeat center center fixed;
  background-size: cover;
  font-family: 'FortySeven Micro NBP', "Trebuchet MS", sans-serif;
  margin: 0;
  padding: 18px;
}

/* --- Container --- */
#container { 
  width: 1500px; /* widened layout */
  margin: 0 auto;
  border: 1px solid #BCCCDC;
  background: #D9EAFD;
  padding: 6px; 
}
#box { width: 100%; background: #F8FAFC; border: 1px solid #BCCCDC; }

/* --- Header --- */
#header { margin-bottom:10px; padding:10px; border-bottom:1px solid #9AA6B2;
          background-image: linear-gradient(90deg, #9AA6B2, #BCCCDC);
          color:#fff; letter-spacing:3px; }
#header h1 { margin:0; font-size:20px; }

/* --- Sidebar --- */
#side { float:left; width:350px; padding:0 0 5px 10px; }
.sidebox { border:1px solid #9AA6B2; margin-bottom:8px; background: rgba(217,234,253,0.4); }
.subheader { background-image: linear-gradient(90deg, #9AA6B2, #BCCCDC); border-bottom:1px solid #9AA6B2; padding:6px; color:#fff; letter-spacing:3px; }
.subheader h3 { margin:0; font-size:14px; }
.sidecontent { padding:6px; color:#5a6e85; font-size:15px; letter-spacing:1px; }
.sidecontent ul { margin:0; padding-left:0; list-style:none; }
.sidecontent li { margin:6px 0; }
a { color:#2a5d9f; text-decoration:none; }
a:hover { text-decoration:underline; text-shadow:0 0 2px rgba(120,190,255,0.15); }

/* Scrollable images */
#scrolly { overflow:auto; width:300px; height:110px; border:1px solid #BCCCDC; background:#F8FAFC; margin:0 auto; text-align:center; }
#scrolly img { width:100%; display:block; margin-bottom:6px; }

/* --- Main content --- */
#main { float:right; width:1100px; padding:0 10px 5px 0; }
.mainboxes { border:1px solid #9AA6B2; margin-bottom:8px; background:#F8FAFC; overflow:auto; }
.mainboxescontent { padding:12px 15px; color:#5a6e85; font-size:15px; }
.mainboxes img { max-width:160px; height:auto; margin:6px; border:2px solid #BCCCDC; }

/* Tables */
table { width:60%; border-collapse: separate; border-spacing:0; margin:12px auto; text-align:center; font-size:15px; border-radius:12px; overflow:hidden; }
table th, table td { padding:8px; border:1px solid #BCCCDC; }
table thead tr { background:#D9EAFD; }

/* --- Footer --- */
#footer { clear:both; padding:8px; border-top:1px solid #9AA6B2; background: url(https://cdn.discordapp.com/attachments/1421379883627708498/1421758866944950323/cffbfd5f_original.jpg?ex=68da33a0&is=68d8e220&hm=5895a1c35a8d8d86a5d6c7c5c61086fc3244ce8fd7450d83b07036ad7b361e89) repeat center center; background-size:cover; ; color:#9AA6B2; font-size:14px; margin-top:8px; text-align:left; }

/* --- Credit --- */
#credit { font-size:12px; position:fixed; bottom:6px; right:6px; opacity:0.85; color:#2a5d9f; }

/* --- Music section --- */
.music-section {
  display: flex;              /* iframe + text side by side */
  align-items: center;        /* vertical alignment */
  gap: 20px;                  /* space between */
}

.music-section iframe {
  border-radius: 12px;        /* rounded corners */
  flex: 1;                    /* take half space */
}

.music-text {
  flex: 1;                    /* take other half */
  font-size: 20px;
  color: #5a6e85;
  text-align: center;
}

/* Responsive (stack on mobile) */
@media (max-width: 768px) {
  .music-section {
    flex-direction: column;
  }
  .music-section iframe {
    width: 100%;
    height: 300px;
  }
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#F8FAFC; }
::-webkit-scrollbar-thumb { background:#9AA6B2; }

/* --- Responsive --- */
@media (max-width:1200px) {
  #container { width:100%; padding:15px; }
  #side, #main { float:none; width:100%; }
  #scrolly { margin:6px auto; }
}