/* =========================
  BASE COLOURS
========================= */

:root {
  --pink-bg: #fff6f9;
  --pink-border: #f3dce2;
  --blue-bg: #f4f9ff;
  --blue-border: #d6e4f0;
  --yellow-bg: #fffdf4;
  --yellow-border: #f6e7b9;
  --lavender-bg: #f8f3ff;
  --lavender-border: #e1d6f6;

  --text-color: #000;
  --sidebar-bg: #fdebf0;
}

/* =========================
 GENERAL STYLES
========================= */

body {
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1;
  background-color: #fcf8f3;
  background-image: url("../design/5020.png");
  background-repeat: repeat;
}

.layout {
  display: flex;
  width: 100%;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
}


/* =========================
   MAIN CONTENT
========================= */

.content {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;

}

/* =========================
   LAYOUT / COLUMNS
========================= */

.column-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0;
}

.column-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.column-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.column-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

/* ====== 2-column variants ====== */

.column-left {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
}

.column-right {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
}


/* =========================
   BOXES
========================= */

/* box base */

.box {
  --box-opacity: 0.7;
  --box-bg: 255, 255, 255;

  --box-border: #ccc;
  --box-border-width: 1px;
  --box-border-style: dashed;

  --box-padding: 20px;
  --box-font-size: 14px;

 background-color: var(--box-bg);

  border: var(--box-border-width) var(--box-border-style) var(--box-border);

  padding: var(--box-padding);
  font-size: var(--box-font-size);

  font-family: 'Courier New', Courier, monospace;
  margin-bottom: 0;
}

/* colours */

.pink {
  --box-bg: #fff3f7;
  --box-border: #f1d2dc;
}

.lavender {
  --box-bg: #f8f3ff;
  --box-border: #e1d6f6;
}

.blue {
  --box-bg: #f4f9ff;
  --box-border: #d6e4f0;
}

.peach {
  --box-bg: #fcf8f3;
  --box-border: #f6e7b9;
}

.yellow {
  --box-bg: #fff9e6;
  --box-border: #e6d39a;
}

/* variants  */


.small {
  --box-opacity: 0.9;
  --box-padding: 6px 8px;
  --box-font-size: 12px;
  max-width: 250px;
}

.slice {
  
  padding: 8px 20px;
  margin-bottom: 0;
}

.note {
  --box-opacity: 0.7;
  --box-padding: 12px 14px;
  --box-font-size: 14px;

  background: rgba(255, 255, 255, var(--box-opacity));
  border: 1px dashed #ccc;
  font-family: 'Courier New', Courier, monospace;
}

.background {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--image-opacity, 1);
}

.scroll {
  max-height: 350px;
  overflow-y: auto;
}


/* ====== Music Row ====== */


.music-row {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.music-row img {
  width: 150px;
}

.music-row p {
  margin: 5px 0 0;
  text-align: center;
}


/* ====== Floating Row ====== */


.float-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}




/* =========================
   BUTTONS
========================= */


.btn {
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  font-size: 0.75rem;   /* slightly smaller text */
  padding: 0.25rem 0.5rem;

  width: 70px;          /* smaller fixed width */

  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.45);

  color: #000;

  transition: background 0.15s ease, transform 0.1s ease;
  cursor: pointer;
}


/* =========================
  TABLES
========================= */


/* ====== Media Log Table ====== */

.media-log {
  width: 90%;
  border-collapse: collapse;
  margin-top: 10px;
  font-family: 'Courier New', Courier, monospace;
}

media-log th,
.media-log td {
  border: 1px dashed #ccc;
  padding: 8px 10px;
}

.media-log th {
  text-align: left;
  text-transform: uppercase;
  font-size: 14px;
}

.content-image {
  max-width: 100%;
  margin: 10px 0;
}



/* ====== Plain table ====== */


table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}



/* =========================
      POP UP WINDOW
========================= */


.popup-window {
  display: none;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 400px;

  background: var(--pink-bg);
  border: 2px dashed var(--pink-border);

  z-index: 1000;
}

.popup-window:target {
  display: block;
}

.title-bar {
  display: flex;
  justify-content: space-between;
  padding: 5px;

  border-bottom: 2px solid var(--pink-border);

  font-size: 12px;
}

.window-content {
  padding: 12px;
  font-size: 12px;
  color: var(--text-color);
}



/* =========================
       MEDIA
========================= */


/* ====== video size ====== */

.small-video {
  width: 200px;
  max-width: 100%;
  height: auto;
}

.med-video {
  width: 400px;
  max-width: 100%;
  height: auto;
}

video {
  display: block;
  margin: 0 auto;
}



/* ====== audio size ====== */

.small-audio {
  width: 250px;
}

.medium-audio {
  width: 400px;
}

.large-audio {
  width: 600px;
}

/* ====== Status Cafe ====== */



#statuscafe {
    padding: .5em;
    background-color: rgb(252, 254, 194);
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}




/* =========================
      FOOTER
========================= */

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footer-right img {
  width: 26px;
  height: 26px;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.footer-right img:hover {
  opacity: 0.6;
}

.footer-left {
  font-size: 8px !important;
}




/* =========================
      RESPONSIVE
========================= */

@media (max-width: 800px) {

  .column-2,
  .column-3,
  .column-4,
  .column-left,
  .column-right,
  .float-row {
    grid-template-columns: 1fr;
  }

  .small-video,
  .med-video {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

}



/* =========================
      next
========================= */