/* Base Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #f9f9f9;
  color: #111;
  font-size: 1rem;
  line-height: 1.6;
}

/* Header */
header {
  background-color: #fff;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
    text-align: center;
    margin: 0 auto;
    font-size: 1.8em;
    flex-grow: 1;
    min-width: 0;
    padding: 0 1em;
}
/* Blokkok elkerülése  */
.skiplink {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -999;
}

#darkModeToggle {
  padding: 5px 10px;
  cursor: pointer;
  background-color: #f0f0f0;
  color: black;
  border: none;
  border-radius: 5px;
  transition: background-color 155ms ease;
  margin-left: 1rem;
  flex-shrink: 0;
}

#darkModeToggle:hover,
#darkModeToggle:focus {
  background-color: #d3d3d3;
  outline: none;
}

/* Navigation */
nav {
  background-color: #eef2fb;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.2rem;
  padding: 0.5rem 1rem;
}

nav .header-content {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

nav a {
  text-decoration: none;
  color: #1a2d61;
  font-size: 1.1em;
  font-weight: bold;
  padding: 0.3em 0.7em;
  white-space: nowrap;
}

nav a.active {
  color: #2a4fdb;
  font-weight: bold;
}

/* General Links */
a {
  color: #0078d7;
  text-decoration: underline;
}
a:hover, a:focus {
  color: #00b0ff;
  text-decoration: underline;
}
a:visited {
  color: #663399;
}
a:active {
  color: #ff0000;
}

/* Logo */
.logo {
  max-height: 5rem;
  width: auto;
  vertical-align: middle;
  margin-right: 1em;
}

/* Headings */
h2, h3 {
  color: #1b2457;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
}
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }

/* Container */
.container {
  max-width: 960px;
  margin: 1.5em auto;
  padding: 0 1em;
  box-sizing: border-box;
}

.container section {
    margin-bottom: 2.5em;
    padding: 1em 0;
    border-bottom: 1px solid #eee;
}
.container section:last-of-type {
    border-bottom: none;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}

th, td { 
  border: 1px solid #ccc;
  padding: 0.6em 0.8em;
}

th { 
    background-color: rgba(230, 230, 230, 0.85);
    font-weight: bold;
    text-align: center;
}

td { 
     background-color: rgba(255, 255, 255, 0.91);
     text-align: center;
}

.album-statistics-table {
  background-image: url("tablebackground.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

details {
    margin-bottom: 1.5em;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}
details summary {
    padding: 0.8em 1em;
    font-weight: bold;
    cursor: pointer;
    outline: none;
}
details[open] summary {
    border-bottom: 1px solid #ddd;
}

/* Album Section Layout (Albums Page) */
.album-section {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: auto auto;
  gap: 1.5em;
  margin: 2em 0;
  background-color: white;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  align-items: start;
  border-bottom: none;
}

.album-description {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    text-align: justify;
    font-size: 1.05em;
}

.tracklist {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    text-align: left;
    font-size: 1.05em;
}

.album-image {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    display: flex;
    justify-content: center;
    align-items: start;
    margin-top: 1em;
}

/* Album Section Content Styling */
.album-description p, .tracklist ol { margin-bottom: 1em; }
.tracklist strong { display: block; margin-bottom: 0.5em; font-weight: bold; font-size: 1.1em; }
.tracklist ol { padding-left: 1.5em; margin-top: 0; list-style-position: outside; }
.tracklist li { margin-bottom: 0.4em; }
.album-image figure { margin: 0; width: 100%; max-width: 300px; }
.album-image img { max-width: 100%; height: auto; border-radius: 4px; display: block; border: 1px solid #eee; }
.figcaption { text-align: center; font-size: 0.85em; color: #555; margin-top: 0.5em; width: 100%; }

/* Index Page Specific Styles */
.new-release h2 { text-align: center; }
.media { display: flex; flex-wrap: wrap; gap: 2em; align-items: center; justify-content: center; }
.media > div { flex: 1 1 400px; min-width: 300px; max-width: 500px; }
.img-box-release { text-align: center; }
.img-box-release img { max-width: 100%; height: auto; border-radius: 4px; }
.video-box1 video, .biography-section .video-box video { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }
.biography-section article { display: flex; flex-wrap: wrap; gap: 2em; align-items: flex-start; }
.biography-section article > * { flex: 1 1 45%; min-width: 280px; }
.biography-section article p { text-align: justify; order: 1; }
.biography-section .video-box { order: 2; max-width: 500px; margin: 0 auto; }
.biography-section .summary-container { order: 3; width: 100%; flex-basis: 100%; }
.biography-section blockquote { order: 4; flex-basis: 100%; margin: 1em 0 0 0; padding: 1em; border-left: 4px solid #ccc; background-color: #f0f0f0; font-style: italic; }
.biography-section blockquote footer { margin-top: 0.5em; font-style: normal; text-align: right; }

/* Summary Toggle */
.summary-container { margin-top: 1.5em; }
.summary-toggle { background-color: #f0f0f0; border: 1px solid #ccc; padding: 8px 15px; cursor: pointer; width: 100%; box-sizing: border-box; text-align: left; font-weight: bold; }
.summary-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out, border 0.3s ease-out; padding: 0 10px; border: 1px solid transparent; margin-top: 5px; box-sizing: border-box; }
.summary-content.expanded { padding: 15px 10px; border-color: #ccc; }
.summary-toggle.active { background-color: #e0e0e0; }
.summary-content p { margin-bottom: 0.5em; }

/* Socials Section (Index Page) */
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5em; padding: 1em 0; }
.socials h2 { width: 100%; text-align: center; margin-bottom: 1em; }
.socials a { display: inline-block; transition: transform 0.2s ease; }
.socials a:hover { transform: scale(1.1); }
.socials img { display: block; width: 60px; height: 60px; object-fit: cover; border-radius: 50%; border: 1px solid #eee; }

/* Tour Page Specific */
#merch-images { padding: 1.5em 0; text-align: center; }
#merch-images h2 { color: #1b2457; margin-bottom: 1em; text-align: center; }
.merch-image { display: inline-block; margin: 0.8em; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); max-width: calc(50% - 2em); box-sizing: border-box; vertical-align: top; }
.merch-image img { max-width: 100%; height: auto; display: block; }
#merch-links .merch-links-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1em 1.5em; padding: 1em 0; }
#merch-links .merch-links-container a { text-decoration: none; color: #1a2d61; font-weight: bold; padding: 0.3em 0.5em; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
#merch-links .merch-links-container a:hover, #merch-links .merch-links-container a:focus { color: #2a4fdb; border-bottom-color: #2a4fdb; }
#merch-links h2 { text-align: center; }

/* Contact Section (aside) */
#contact { background-color: #f0f0f0; padding: 2em 1em; margin-top: 2em; }
#contact div { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.8em; }
#contact h2 { text-align: center; margin-top: 0; }
#contact div button { background-color: #eef2f7; color: #1a1a1a; border: none; padding: 0.7em 1.2em; margin: 0.3em; text-align: center; text-decoration: none; display: inline-block; font-size: 0.95em; cursor: pointer; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: background-color 0.2s ease; }
#contact div button:hover { background-color: #d4d8dd; }

/* Forms (form.html) */
form { max-width: 600px; margin: 2em auto; padding: 1.5em; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
form h2 { color: #1b2457; text-align: center; margin-top: 0; margin-bottom: 1em; }
form p { color: #555; margin-bottom: 1.5em; text-align: center; font-size: 0.95em; }
form div { margin-bottom: 1.2em; }
form label { display: block; margin-bottom: 0.4em; font-weight: bold; color: #333; font-size: 0.9em; }
form input[type="text"], form input[type="email"], form select, form textarea { width: 100%; padding: 0.7em; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 1em; background-color: #fff; }
form input:focus, form select:focus, form textarea:focus { border-color: #2a4fdb; outline: none; box-shadow: 0 0 0 2px rgba(42, 79, 219, 0.2); }
form select { appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 11.293l-4.646-4.647a.5.5 0 0 1 .708-.708L8 9.879l4.938-4.937a.5.5 0 1 1 .707.707L8 11.293z"/></svg>'); background-repeat: no-repeat; background-position: right 0.7em center; background-size: 1em; padding-right: 2.5em; }
form textarea { resize: vertical; min-height: 120px; }
form input[type="checkbox"], form input[type="radio"] { margin-right: 0.5em; vertical-align: middle; cursor: pointer; }
form div label + div { display: flex; align-items: center; flex-wrap: wrap; gap: 0 1em; }
form div label + div label { font-weight: normal; margin-bottom: 0; display: inline-flex; align-items: center; margin-right: 0.5em; cursor: pointer; }
form div label + div input[type="radio"], form div label + div input[type="checkbox"] { margin-right: 0.3em; }
form div.form-buttons { text-align: center; margin-top: 2em; display: flex; justify-content: center; gap: 1em; flex-wrap: wrap; }
form button { padding: 0.8em 1.8em; border: none; border-radius: 4px; font-size: 1em; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease; min-width: 100px; }
form button[type="submit"] { background-color: #2a4fdb; color: white; }
form button[type="submit"]:hover { background-color: #1a2d61; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
form button[type="reset"] { background-color: #f0f0f0; color: #333; border: 1px solid #ccc; }
form button[type="reset"]:hover { background-color: #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* Footer */
footer { text-align: center; padding: 1.5em 1em; font-size: 0.9em; color: #777; background-color: #f0f0f0; margin-top: 0; border-top: 1px solid #ddd; }
footer strong { color: #555; }

/* --- MEDIA QUERIES --- */
@media (max-width: 992px) {
    .container { max-width: 90%; }
    nav { gap: 1rem; }
    nav a { font-size: 1em; padding: 0.3em 0.7em; }
    .album-section { padding: 1em; gap: 1em; }
    .merch-image { max-width: calc(50% - 1.6em); }
     header h1 { font-size: 1.6em; padding: 0 0.5em; }
}

@media (max-width: 768px) {
    body { font-size: 0.95rem; }
    header { padding: 0.6rem 1rem; }
    header h1 { font-size: 1.5em; order: 1; text-align: center; margin: 0; padding: 0 0.5em; flex-grow: 1; }
    #darkModeToggle { padding: 4px 8px; font-size: 0.9em; order: 2; margin-left: 0.5rem; }
    nav { flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; }
    nav .header-content { margin-bottom: 0.5em; }
    .logo { max-height: 4rem; margin-right: 0; }
    nav > a:nth-last-of-type(1), nav > a:nth-last-of-type(2){ display: none; }
    table:not(.album-statistics-table), .album-statistics-table { border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-radius: 4px; background-image: none; }
    table thead { display: none; }
    table tr { display: block; margin-bottom: 1em; border: 1px solid #eee; padding: 1em; background-color: rgba(255, 255, 255, 0.95); border-radius: 4px; }
    table td { display: flex; justify-content: space-between; align-items: center; text-align: right; padding: 0.5em 0; border: none; border-bottom: 1px dashed #eee; background-color: transparent ; }
    table td:last-child { border-bottom: none; }
    table td::before { content: attr(data-label); font-weight: bold; text-align: left; margin-right: 1em; color: #333; flex-shrink: 0; }
    .album-section, .biography-section article { display: flex; flex-direction: column; align-items: center; width: 100%; }
    .album-description, .tracklist, .album-image, .biography-section article > * { grid-column: auto; grid-row: auto; width: 100%; margin-top: 0; flex-basis: auto; max-width: 100%; }
    .tracklist, .biography-section .video-box, .biography-section .summary-container, .biography-section blockquote { margin-top: 1.5em; text-align: left; }
    .album-image, .biography-section .video-box { align-items: center; }
    .album-image figure, .biography-section .video-box { max-width: 250px; margin-left:auto; margin-right:auto; }
    .biography-section article p { max-width: 100%; text-align: left; }
    .biography-section .video-box { max-width: 100%; }
    .biography-section blockquote { margin-left: 0; margin-right: 0; }
    .media { flex-direction: column; gap: 1.5em; }
    .media > div { flex-basis: auto; max-width: 90%; }
    .merch-image { max-width: calc(100% - 1.6em); margin-left: auto; margin-right: auto; }
    #contact { padding: 1.5em 1em;}
    #contact div button { font-size: 0.9em; padding: 0.6em 1em; min-width: 120px; }
    form { margin: 1.5em auto; padding: 1.2em; }
    form div.form-buttons button { width: calc(50% - 0.5em); box-sizing: border-box; }
    .socials { gap: 1em; }
    .socials img { width: 50px; height: 50px; }
}

@media (max-width: 480px) {
    body { font-size: 0.9rem; }
    header { flex-direction: column; gap: 0.5rem; padding: 0.8rem 1rem; }
    header h1 { font-size: 1.3em; order: 1; padding: 0; }
    #darkModeToggle { order: 2; align-self: flex-end; margin: 0; }
    .container { padding: 0 0.8em; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.15em; }
    table td { flex-direction: column; align-items: flex-start; text-align: left; }
    table td::before { margin-bottom: 0.3em; margin-right: 0; }
    #contact div button { width: 100%; margin: 0.4em 0; }
    form div.form-buttons button { width: 100%; }
    .merch-image { max-width: 95%; margin: 0.8em auto; }
    .album-image figure, .biography-section .video-box { max-width: 200px; }
    .socials img { width: 40px; height: 40px; }
    .biography-section article { gap: 1.5em; }
    .summary-content { font-size: 0.9em; }
}

/* --- Dark mode --- */
.dark-mode { background: #2c2e3a; color: #d1d1d6; }
.dark-mode header { background: #1e212e; color: #d1d1d6; border-bottom-color: #4c495d; }
.dark-mode #darkModeToggle { background: #4c495d; color: white; }
.dark-mode #darkModeToggle:hover, .dark-mode #darkModeToggle:focus { background-color: #6a667b; }
.dark-mode nav { background: #3a3c4a; border-bottom: 1px solid #4c495d; }
.dark-mode nav a { color: #c1c3d4; }
.dark-mode nav a.active { color: #e1e3f4; }
.dark-mode h2, .dark-mode h3 { color: #e1e3f4; }
.dark-mode a { color: #87aeff; }
.dark-mode a:visited { color: #b8a4e0; }
.dark-mode a:hover, .dark-mode a:focus { color: #a8c7ff; }
.dark-mode table { background-image: none; }
.dark-mode th, .dark-mode td { background-color: rgba(58, 60, 74, 0.8); border-color: #4c495d; color: #d1d1d6; }
.dark-mode th { background-color: rgba(76, 73, 93, 0.85); }
.dark-mode details { background-color: #3a3c4a; border-color: #4c495d;}
.dark-mode details summary { color: #e1e3f4; }
.dark-mode details[open] summary { border-bottom-color: #4c495d; }
.dark-mode .album-section { background-color: #3a3c4a; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.dark-mode .figcaption { color: #a1a3b4; }
.dark-mode .album-image img, .dark-mode .img-box-release img { border-color: #4c495d; }
.dark-mode #contact { background-color: #2c2e3a; }
.dark-mode #contact div button { background-color: #4c495d; color: #e1e3f4; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.dark-mode #contact div button:hover { background-color: #6a667b; }
.dark-mode .merch-image { border-color: #4c495d; background-color: #3a3c4a; }
.dark-mode #merch-links .merch-links-container a { color: #c1c3d4; }
.dark-mode #merch-links .merch-links-container a:hover, .dark-mode #merch-links .merch-links-container a:focus { color: #e1e3f4; border-bottom-color: #e1e3f4; }
.dark-mode form { background-color: #3a3c4a; border-color: #4c495d; }
.dark-mode form p { color: #b1b3c4; }
.dark-mode form label { color: #c1c3d4; }
.dark-mode form input[type="text"], .dark-mode form input[type="email"], .dark-mode form select, .dark-mode form textarea { background-color: #2c2e3a; border-color: #4c495d; color: #d1d1d6; }
.dark-mode form input::placeholder, .dark-mode form textarea::placeholder { color: #888a9b; }
.dark-mode form input:focus, .dark-mode form select:focus, .dark-mode form textarea:focus { border-color: #87aeff; box-shadow: 0 0 0 2px rgba(135, 174, 255, 0.2); }
.dark-mode form select { background-image: url('data:image/svg+xml;utf8,<svg fill="%23d1d1d6" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 11.293l-4.646-4.647a.5.5 0 0 1 .708-.708L8 9.879l4.938-4.937a.5.5 0 1 1 .707.707L8 11.293z"/></svg>'); }
.dark-mode form button[type="submit"] { background-color: #87aeff; color: #1e212e; }
.dark-mode form button[type="submit"]:hover { background-color: #a8c7ff; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.dark-mode form button[type="reset"] { background-color: #4c495d; color: #d1d1d6; border-color: #6a667b; }
.dark-mode form button[type="reset"]:hover { background-color: #6a667b; }
.dark-mode footer { background: #1e212e; color: #a1a3b4; border-top-color: #4c495d; }
.dark-mode footer strong { color: #d1d1d6; }
.dark-mode .container section { background-color: transparent; border-bottom-color: #4c495d; }
.dark-mode .biography-section blockquote { background-color: #2c2e3a; border-left-color: #6a667b; color: #c1c3d4; }
.dark-mode .biography-section blockquote footer { color: #a1a3b4; }
.dark-mode .summary-toggle { background-color: #4c495d; border-color: #6a667b; color: #e1e3f4; }
.dark-mode .summary-toggle.active { background-color: #6a667b; }
.dark-mode .summary-content { background-color: #2c2e3a; }
.dark-mode .summary-content.expanded { border-color: #6a667b; }
.dark-mode .socials img { border-color: #4c495d; }

.dark-mode video::-webkit-media-controls-panel { background-color: rgba(44, 46, 58, 0.8); } 
/* Kisebb fényerő a thumbnaileken */

@media (max-width: 768px) {
    .dark-mode table tr { background-color: rgba(44, 46, 58, 0.9); border-color: #4c495d; }
    .dark-mode table td { border-bottom-color: #4c495d; }
    .dark-mode table td::before { color: #e1e3f4; }
}

/* Print styles */
/* print.css helyett media query - Stíluslap nyomtatáshoz */

@media print {

  body {
    font-family: serif;
    font-size: 10pt; 
    line-height: 1.3; 
    color: #000 ; 
    background-color: #fff ;
    margin: 1.5cm ; 
    padding: 0 ;
    width: auto ; /* Ne korlátozza a szélességet */
  }

  /* Ismétlődő, felesleges elemek elrejtése */
  header,
  nav,
  footer,
  aside#contact,
  #darkModeToggle,
  details summary,
  .summary-toggle
  {
    display: none ;
  }

  /* Videók elrejtése */
  video,
  .video-box,
  .video-box1 {
    display: none ;
  }

  /* Képek kicsinyítése és kezelése */
  img {
    max-width: 150px ;
    height: auto ; 
    border: 1px solid #ccc ; 
    vertical-align: middle;
    page-break-inside: avoid; 
  }

  .album-image img {
    max-width: 120px ; 
    border: 1px solid #ddd ;
  }
  .album-image figure {
    max-width: 120px ;
    margin: 0.5em 0 ;
  }
  .figcaption {
    font-size: 8pt ;
    color: #333 ;
    text-align: center ;
  }

  .socials {
    display: none ;
  }

  /* Linkek stílusai: aláhúzás nélkül, feketén */
  a {
    color: #000 ;
    text-decoration: none ;
  }

  /* Külső linkek URL-jének megjelenítése zárójelben */
  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt; 
    color: #555; 
    word-wrap: break-word;
  }
   a[href^="#"]::after {
      content: "";
   }

  /* Táblázatok: alap keretek */
  table, th, td {
    border: 1px solid #ccc ;
    color: #000 ;
    background-color: #fff ; 
    padding: 0.3em 0.5em ; 
    text-align: left ; 
  }
  table {
    margin: 1em 0 ;
    width: 100% ;
    page-break-inside: auto; 
    font-size: 9pt; /* Kisebb betűméret a táblázatban */
    background-image: none ; 
  }
  thead {
    display: table-header-group; 
  }
  tr {
    page-break-inside: avoid; 
    page-break-after: auto;
  }
  th {
     font-weight: bold;
     background-color: #eee ; 
  }
  td {
     text-align: left ; 
  }

  .container {
    max-width: 100% ;
    margin: 0 ;
    padding: 0 ;
  }
  section, .album-section, .biography-section article {
    display: block ; 
    width: auto ;
    margin: 1em 0 ;
    padding: 0 ;
    border: none ;
    box-shadow: none ;
    background-color: transparent ;
    page-break-inside: avoid; 
  }
  .album-description, .tracklist, .album-image,
  .biography-section article > * {
      grid-column: auto ; 
      grid-row: auto ;
      width: auto ;
      flex-basis: auto ;
      margin-top: 0.5em ;
      float: none ;
  }
  .tracklist ol { padding-left: 2em; }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    color: #000 ; /* Fekete címek */
    margin-top: 1.2em;
    margin-bottom: 0.5em;
  }

  p {
    widows: 3;
    orphans: 3;
  }

  blockquote {
    border-left: 3px solid #ccc ;
    padding: 0.5em ;
    margin: 1em 0 ;
    background-color: #f0f0f0 ;
    font-style: italic ;
    page-break-inside: avoid;
  }
  blockquote footer {
      font-style: normal ;
      text-align: left ;
      margin-top: 0.5em ;
  }

  .summary-content {
    max-height: none ; 
    display: block ; 
    overflow: visible ;
    border: 1px solid #ccc ; 
    padding: 0.5em ;
    background-color: #f9f9f9 ; 
    margin-top: 0.5em ;
  }

  form {
      border: none ;
      box-shadow: none ;
      padding: 0 ;
      margin: 0 ;
  }

}