@charset "utf-8";

/*
@font-face {
	font-family:myKeepCalm-Medium;
	src:url(../fonts/KeepCalm-Medium.ttf);
}
*/

html,body {
	margin:0;
	padding:0;
	height:100%;
	font-family: Arial, Helvetica, sans-serif;
	background:#ffffff;
	background: url("../images/bg 2025.jpg");
	color:#111; }

body {
	padding-left: 10%;
    padding-right: 10%;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
	padding-bottom: 20px;
}

.wrap { 
	display:flex;
	gap:12px;
	padding:12px;
	box-sizing:border-box;
	min-height:100vh; }

/* left (list) and right (stacked) columns */
.left {
	width:68%;
	min-width:200px; }

.right {
	width:30%;
	min-width:180px;
	display:flex;
	flex-direction:column;
	gap:12px; }

/* simple box style for placeholders */
.box {
	background:#f4f4f4;
	border:1px solid #e6e6e6;
	padding:12px;
	border-radius:4px; }

/* placeholder visual styles */
.placeholder-title {
	font-weight:700;
	margin-bottom:8px; }

.placeholder-text {
	color:#666;
	font-size:0.95rem; }

/* responsive stack on small screens */
@media (max-width:800px) {
  .wrap { display:block; }
  .left, .right { width:auto; }
  .right { margin-top:12px; flex-direction:column; }
}

/* track table headers */
.track-header {
    text-align: left;
    padding: 4px;
    border-bottom: 1px solid #ccc;
    font-weight: 600;
}

/* track table cells */
.track-cell {
    padding: 4px;
    border-bottom: 1px dashed #eee;
}

/* tracks table links */
.track-cell a {
    color: #111;               /* dark text color */
    text-decoration: none;     /* remove underline */
    font-weight: 500;          /* make slightly bold */
    transition: color 0.2s;   /* smooth hover */
}

.track-cell a:hover {
    text-decoration: underline; /* optional, for clarity */
}

/* highlight currently playing track */
.track-row.playing {
    color: white;
	background-color: rgba(0,119,229,1.00); /* light bluish background */
    font-weight: 700; /* optional: slightly bolder */
}

:root {
  --cycle-alpha: 0.4;
}
/* cycle-based row colors */
.color1 { background-color: rgba(243,111,113,var(--cycle-alpha))}
.color2 { background-color: rgba(240,166,82,var(--cycle-alpha))}
.color3 { background-color: rgba(237,227,87,var(--cycle-alpha))}
.color4 { background-color: rgba(141,229,87,var(--cycle-alpha))}
.color5 { background-color: rgba(108,157,232,var(--cycle-alpha))}
.color6 { background-color: rgba(236,115,224,var(--cycle-alpha))}
.color7 { background-color: rgba(224,198,122,var(--cycle-alpha))}
.color8 { background-color: rgba(255,254,150,var(--cycle-alpha))}
.color9 { background-color: rgba(172,122,243,var(--cycle-alpha))}
.color10 { background-color: rgba(116,243,245,var(--cycle-alpha))}

table th a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

table th a:visited {
  color: inherit;
}

table th {
  text-align: left;
}

.track-row.playing a {
    color: white;
	font-weight: 700;
}

footer {
	display:grid;
	justify-content: center;
}
footer p {
/*	font-family: myKeepCalm-Medium;*/
	color: rgba(0,0,0,.5);
	margin:1em;
	padding:0;
}