:root {

  --background: #161b1f;

  --panel: #252d33;

  --border: #46525b;

  --text: #d7d0bf;

  --green: #728d71;

}

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  height: 100vh;

  font-family: Verdana, sans-serif;

  color: var(--text);

  background-image:
    linear-gradient(
      rgba(0,0,0,.65),
      rgba(0,0,0,.65)
    ),
    url("../images/wallpapers/wallpaper2.jpg");

  background-size: cover;

  background-position: center;

}

.desktop {

  display: flex;

  gap: 24px;

  padding: 24px;

}

.desktop-icon {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  text-decoration: none;

  color: var(--text);

}

.icon-image {

  width: 48px;

  height: 48px;

  background: var(--green);

  border-radius: 6px;

}

.taskbar {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  height: 40px;

  display: flex;

  align-items: center;

  background: var(--panel);

  border-top: 1px solid var(--border);

}

.start-button {

  height: 100%;

  padding: 0 20px;

  border: none;

  background: var(--green);

  color: white;

  font-weight: bold;

}

.now-playing {

  margin-left: 20px;

}

.station-header {

  padding: 30px;

  background:
    rgba(0,0,0,.45);

  border-bottom:
    1px solid rgba(255,255,255,.08);

  backdrop-filter:
    blur(5px);

}

.station-header h1 {

  font-size: 2.2rem;

  letter-spacing: 3px;

  margin-bottom: 8px;

}

.station-header p {

  opacity: .7;

}

.content-grid {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(300px, 1fr));

  gap: 20px;

  padding: 25px;

}

.panel {

  background:
    rgba(20, 25, 30, 0.85);

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 0 15px rgba(0,0,0,.35);

  backdrop-filter:
    blur(4px);

}

.panel-title {

  background:
    rgba(114,141,113,.15);

  border-bottom:
    1px solid rgba(255,255,255,.08);

  padding:
    12px 16px;

  font-weight:
    bold;

  letter-spacing:
    1px;

}

.panel-content {

  padding:
    16px;

  line-height:
    1.7;

}

.panel-content {

  padding: 16px;

  line-height: 1.7;

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.wide-panel {

  grid-column:
    1 / -1;

}

.layout {

  display: flex;

  min-height: calc(100vh - 120px);

}

.panel {

  background:
    rgba(20, 25, 30, 0.85);

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 0 15px rgba(0,0,0,.35);

  backdrop-filter:
    blur(4px);

  min-height: 250px;

}

.sidebar {

  width: 180px;

  padding: 20px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.panel-title {

  transition:
    background .15s;

}

.panel:hover .panel-title {

  background:
    rgba(114,141,113,.25);

}

.panel {

  transition:
    transform .15s,
    box-shadow .15s;

}

.panel:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 0 25px rgba(0,0,0,.45);

}

.desktop-shortcut {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px;

  text-decoration: none;

  color: var(--text);

  border-radius: 6px;

  transition: .15s;

}

.desktop-shortcut {

  transition:
    background .15s,
    transform .15s;

}

.desktop-shortcut:hover {

  background:
    rgba(255,255,255,.08);

  transform:
    translateX(4px);

}

.shortcut-icon {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.shortcut-icon img {

  width: 24px;

  height: 24px;

  image-rendering: auto;

}

.main-content {

  flex: 1;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(320px, 1fr));

  gap: 20px;

  padding: 20px;

  align-content: start;

}

.panel.large {

  grid-column: span 2;

}

.panel.small {

  grid-column: span 1;

}

.station-list {

  list-style: none;

}

.station-list li {

  margin-bottom: 10px;

}

.station-list li::before {

  content: "► ";

  color: var(--green);

}

body::after {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 999;

  background:

    repeating-linear-gradient(

      to bottom,

      transparent,

      transparent 2px,

      rgba(255,255,255,.015) 3px

    );

}

body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 998;

  box-shadow:

    inset 0 0 150px rgba(0,0,0,.4);

}

.cd-cover {

  display: block;

  width: 160px;

  height: auto;

  margin: 0 auto 12px auto;

  border:
    1px solid rgba(255,255,255,.1);

  box-shadow:
    0 0 12px rgba(0,0,0,.35);

}

.music-layout {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(320px, 1fr));

  gap: 20px;

  padding: 20px;

}

.album-grid {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;

}

.album-card {

  width: 140px;

  text-align: center;

}

.album-cover {

  width: 120px;

  height: 120px;

  object-fit: cover;

  border:
    1px solid rgba(255,255,255,.1);

  margin-bottom: 8px;

}

.album-artist {

  opacity: .7;

  font-size: .85rem;

}

.featured-album {

  width: 120px !important;

  height: auto !important;

  display: block;

  margin: 0 auto 15px auto;

}

.full-width-panel {

  grid-column: 1 / -1;
  
}
  
  .project-card {

  padding: 15px;

  border:
    1px solid rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.03);

}

.weather-discussion {

  font-family:
    "Courier New",
    monospace;

  line-height: 1.8;

}

.radar-image {

  display: block;

  width: 100%;

  max-width: 500px;

  margin: 0 auto 15px auto;

  border:
    1px solid rgba(255,255,255,.1);

}