@font-face {
  font-family: "DepartureMono-Regular";
  src: url("../fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* ------------------------------
   BASIC PAGE SETUP
------------------------------ */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "DepartureMono-Regular", monospace;

  background-color: #08031a;
  color: #00ffd0;

  background-image: url("/assets/images/gifs/body.gif");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}


/* ------------------------------
   SITE SHELL
------------------------------ */

.site-shell {
  width: min(1500px, calc(100% - 40px));
  margin: 20px auto;
}


/* ------------------------------
   HEADER
------------------------------ */

.site-header {
    border: 2px solid #ff007f;
}

.site-header img {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------
   MAIN NAVIGATION
------------------------------ */

.main-navigation {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  padding: 12px;

  border-right: 2px solid #ff007f;
  border-bottom: 2px solid #ff007f;
  border-left: 2px solid #ff007f;

  background-color: rgba(8, 3, 26, 0.95);
}

.main-navigation a {
  display: block;

  padding: 10px 18px;

  border: 1px solid #ff007f;

  color: #00ffd0;
  text-decoration: none;
}

.main-navigation a:hover,
.main-navigation a:focus {
  background-color: #ffff7f;
  color: #08031a;
}

.nav-link.active {
    background: #ffff7f;
    color: #08031a;
}


/* ------------------------------
   MAIN THREE-COLUMN LAYOUT
------------------------------ */

.site-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 320px;
  gap: 15px;

  margin-top: 15px;
}


/* ------------------------------
   SIDEBARS
------------------------------ */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.panel {
  padding: 15px;

  border: 2px solid #ff007f;

  background-color: rgba(8, 3, 26, 0.92);
}

.radio-panel {
  position: relative;
  min-height: 200px;
  padding: 12px;
  overflow: visible;
}

#webamp {
  width: 275px;
  height: 110px;
  margin: 0 auto;
}

.radio-status {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;

  margin: 0;
  text-align: center;
  font-size: 0.75rem;
}


.panel h2 {
  margin-top: 0;
  font-size: 1rem;
  text-transform: uppercase;
}

.status-online {
  color: #00ff66;
}


/* ------------------------------
   CENTRAL TERMINAL
------------------------------ */

.terminal-container {
  position: relative;
  min-width: 0;
  height: 750px;

  border: 2px solid #ff007f;
  background-color: rgba(8, 3, 26, 0.94);

  overflow: hidden;
}

#site-terminal {
  position: relative;
  z-index: 1;

  display: block;
  width: 100%;
  height: 100%;

  border: none;
  background-color: transparent;
}

/* ------------------------------
   TERMINAL OVERLAY
------------------------------ */

#terminal-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(8, 3, 26, 0.96);
  cursor: pointer;

  z-index: 9999;

  transition: opacity 0.8s ease;
}

.overlay-content {
  width: min(500px, 80%);
  padding: 30px;

  border: 2px solid #ff007f;
  background: rgba(8, 3, 26, 0.95);

  color: #00ffd0;
  text-align: center;
}

/* ------------------------------
   FOOTER
------------------------------ */

.site-footer {
  margin-top: 15px;
  padding: 12px;

  border: 2px solid #ff007f;

  background-color: rgba(8, 3, 26, 0.92);

  text-align: center;
}


/* ------------------------------
   SMALLER SCREENS
------------------------------ */

@media (max-width: 1000px) {
  .site-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .right-sidebar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .site-shell {
    width: calc(100% - 20px);
    margin: 10px auto;
  }

  .site-layout {
    display: flex;
    flex-direction: column;
  }

  .left-sidebar,
  .right-sidebar {
    display: flex;
  }

  .terminal-container {
    height: 650px;
  }

  .main-navigation {
    flex-direction: column;
  }

  .main-navigation a {
    text-align: center;
  }
}


.terminal-container {
    position: relative;
}