style.css

:root{
  --bg:#0f0f10;
  --card:#181819;
  --muted:#9a9490;
  --accent:#b79c8b;
  --text:#eae6e2;
  --radius:12px;
}

/* Light theme vars (applied when body.light-mode) */
body.light-mode {
  --bg:#f5f2ee;
  --card:#fffafa;
  --muted:#6b5c55;
  --accent:#b79c8b;
  --text:#222;
}

*{box-sizing:border-box}

html,body{height:100%}

/* Keep the page full viewport, center content horizontally, allow vertical layout */
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Georgia, "Times New Roman", serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* less global padding — we control vertical space inside the container */
  padding:0 18px;
  display:flex;
  justify-content:center; /* center horizontally */
  align-items:flex-start; /* start at top so header spacing works */
  min-height:100vh;
}

/* Container becomes a vertical column that holds header, main (flexible), footer */
.container{
  max-width:1000px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh; /* ensure full-height to push footer down */
  padding-top:120px; /* <-- MAIN change: lots of space before the title on initial load */
  box-sizing:border-box;
}

/* Header: keep centered and give breathing room below */
header{
  text-align:center;
  width:100%;
  margin:0 0 16px 0; /* small gap below header before controls */
}
header h1{
  margin:0 0 6px 0;
  color:var(--accent);
  font-size:2.2rem;
}
.subtitle{
  margin:0 auto 0 auto;
  color:var(--muted);
  text-align:center;
  font-style:normal;
  max-width:760px;
  font-size:0.95rem; /* keep subtitle slightly smaller */
}


/* Controls */
.controls{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:18px;   /* new: space between header and controls */
  margin-bottom:28px;
  flex-wrap:wrap;
}

.controls input{
  width:420px;
  max-width:60%;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.04);
  background:var(--card);
  color:var(--text);
  font-family: Georgia, serif;
  outline:none;
}
.controls button{
  padding:10px 16px;
  border-radius:999px;
  border:none;
  background:var(--accent);
  color:white;
  cursor:pointer;
  font-family: Georgia, serif;
}
.controls button[title]{
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(255,255,255,0.03);
}

/* Results horizontal layout */
.results{
  display:flex;
  gap:28px;
  align-items:flex-start;
  justify-content:center;
  margin-bottom:24px;
  flex-wrap:wrap;
}

/* Make main results take available vertical space so footer sits at the bottom */
main.results-wrapper {
  width:100%;
  flex: 1 1 auto; /* grow to fill space between header and footer */
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* keep previous .results styles but ensure it stays centered inside the wrapper */
.results{
  display:flex;
  gap:28px;
  align-items:flex-start;
  justify-content:center;
  margin-bottom:24px;
  flex-wrap:wrap;
  margin-top:20px; /* add a little space between controls and results */
}

/* Push footer to the bottom of the container */
footer{
  margin-top:auto;
  margin-bottom:28px;
  color:var(--muted);
  text-align:center;
  font-size:0.9rem;
}

.separator{
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
}

/* the favicon image used as separator — small and elegant */
.separator-icon{
  width:36px;
  height:auto;
  display:block;
  border-radius:6px;
}


/* Cards */
.music-section, .art-section{
  min-width:300px;
  max-width:420px;
}
.music-section h2, .art-section h2{
  margin:0 0 10px 0;
  color:var(--text);
}

#musicResult, #artResult{
  background:var(--card);
  padding:18px;
  border-radius:var(--radius);
  min-height:160px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  color:var(--text);
}


.about-section {
  margin-top: 40px; /* controls space before the subtitle */
}

.about-section h2 {
  margin-bottom: 8px; /* controls space between subtitle and the text below */
}


/* Add elegant space around result cards */
#musicResult,
#artResult {
  margin-top: 2.5em;    /* space before each card */
  margin-bottom: 2.5em; /* space after each card */
}

/* Images inside results */
#musicResult img, #artResult img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
  margin:10px 0;
}

#aboutHeading {
  text-align: center;
  font-weight: 400;
  letter-spacing: 5px;
  font-size: 1.1rem;
  opacity: 0.6;
  margin-top: 10.5em;   /* more space before subtitle */
  margin-bottom: 0.2em; /* less space between subtitle and message */
  text-transform: uppercase;
}

#connectionMessage {
  position: relative;
  text-align: center;
  margin: 2em auto 3em;
  padding: 1.5em 0;
  font-style: italic;
  max-width: 80%;
  line-height: 1.6;
}

#connectionMessage::before,
#connectionMessage::after {
  content: "";
  display: block;
  width: 65%;
  height: 1px;
  background: currentColor;
  margin: 1.5em auto;
  opacity: 0.3;
}


/* Footer */
footer{
  margin-top:28px;
  color:var(--muted);
  text-align:center;
  font-size:0.9rem;
}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{text-decoration:underline}

/* small screens */
@media (max-width:740px){
  .controls input{width:100%}
  .results{flex-direction:column; align-items:center}
  .separator{display:none} /* hide separator on very small screens */
  .container{ padding-top:60px; } /* less top padding on small screens */
}



#toggleTheme {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#toggleTheme:hover {
  background: var(--accent);
  color: white;
}