/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root{
    /* Color */
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #024d40;
  --dialog-blue-light: #45bba7;
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #0000ff;

  /* Spacing */
  --element-spacing: 8px;
  --grouped-button-spacing: 4px;
  --grouped-element-spacing: 6px;
  --radio-width: 12px;
  --checkbox-width: 13px;
  --radio-label-spacing: 6px;
  --range-track-height: 4px;
  --range-spacing: 10px;

  /* Some detailed computations for radio buttons and checkboxes */
  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
  --radio-total-width: calc(var(--radio-total-width-precalc));
  --radio-left: calc(-1 * var(--radio-total-width-precalc));
  --radio-dot-width: 4px;
  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --radio-dot-left: calc(
    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
        --radio-dot-width
      ) / 2
  );

  --checkbox-total-width-precalc: var(--checkbox-width) +
    var(--radio-label-spacing);
  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
  --checkmark-width: 7px;
  --checkmark-top: 3px;
  --checkmark-left: 3px;

  /* Borders */
  --border-width: 1px;
  --border-raised-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face),
    inset 2px 2px var(--button-shadow);

  /* Window borders flip button-face and button-highlight */
  --border-window-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-face);
  --border-window-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-highlight);

  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
  --border-field: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);
}

@font-face {
  font-family: pixel-operator;
  src: url('../fonts/PixelOperator.ttf');
}

button,
label,
input,
textarea,
select,
option,
ul.tree-view,
.window,
.title-bar {
  font-family: pixel-operator;
  -webkit-font-smoothing: none;
  font-size: 1em;
}

ul.tree-view {
  background:#fff;
  box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
  display:block;
  overflow: hidden;
  padding-bottom: 5px;
}

ul.tree-view li{
  padding-top: 4px;
}

body{
  background-image: url('../images/backgrounds/starsagain.gif');
  font-size: 1em;
}

.window {
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  background: var(--surface);
  padding: 3px;
}

.title-bar {
  background: linear-gradient(
    90deg,
    var(--dialog-blue),
    var(--dialog-blue-light)
  );
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-bar-text {
  font-weight: bold;
  color: white;
  letter-spacing: 0;
  margin-right: 24px;
}

.title-bar-controls {
  display: flex;
}

.title-bar-controls button {
	border: none;
    border-radius: 0;
    box-sizing: border-box;
    color: transparent;
    min-height: 15px;
    min-width: 15px;
    text-shadow: 0 0 #222;
	background: silver;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf
}

.title-bar-controls button:active {
  padding: 0;
}

.title-bar-controls button:focus {
  outline: none;
}

.title-bar-controls button[aria-label="Minimize"] {
  background-image: url("../icons/minimize.svg");
  background-repeat: no-repeat;
  background-position: bottom 3px left 4px;
}


.title-bar-controls button[aria-label="Maximize"] {
  background-image: url("../icons/maximize.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label="Restore"] {
  background-image: url("../icons/restore.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label="Help"] {
  background-image: url("../icons/help.svg");
  background-repeat: no-repeat;
  background-position: top 2px left 5px;
}

.title-bar-controls button[aria-label="Close"] {
  margin-left: 2px;
  background-image: url("../icons/close.svg");
  background-repeat: no-repeat;
  background-position: top 3px left 3px;
}

.window-body {
  margin: var(--element-spacing);
}

.marquee {
  width: 103.24%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.marquee span:hover{
  animation-play-state: paused;
}

.marquee span{
  display: inline-block;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0%{
    transform: translate(100%,0);
  }
  100%{
    transform: translate(-100%,0);
  }
}

.container{
  display: grid;
  grid-template-areas: 
  "header header header"
  "navigation content blinkies"
  "marquee marquee marquee";
  grid-template-columns: 0.7fr 2fr 1fr;
  gap: 15px;
  padding: 5px;
}

.container div.header {
  grid-area: header;
  text-align: center;
}

.container div.navigation{
  grid-area: navigation;
}

.container div.blinkies{
  grid-area: blinkies;
}

.littlecontainer{
  display: grid;
  grid-template-areas: 
  "todo updates";
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.littlecontainer div.todo{
  grid-area: todo;
}

.littlecontainer div.updates{
  grid-area: updates;
}

.zoneanimation{
  animation: color-change 2s infinite;
}

@keyframes color-change {
  0% {color: #1d806f;}
  20% {color: #aeece2;}
  40% {color: #65ccbb;}
  60% {color: #508f84;}
  80%{color: #2e9180;}
  100% {color:#024d40;}
}

.homeicon{
  list-style: none;
  padding: 5px 25px;
  background-image: url("../list-icons/computer_explorer-0.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 20px;
}

.abouticon{
  list-style: none;
  padding: 5px 25px;
  background-image: url("../list-icons/msagent-3.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 20px;
}

.mediasicon{
  list-style: none;
  padding: 5px 25px;
  background-image: url("../list-icons/help_book_small-5.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 20px;
}

.photoicon{
  list-style: none;
  padding: 5px 25px;
  background-image: url("../list-icons/camera-3.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 20px;
}

.collectionsicon{
  list-style: none;
  padding: 5px 25px;
  background-image: url("../list-icons/directory_open_file_mydocs-3.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 20px;
}

.journalicon{
  list-style: none;
  padding: 5px 25px;
  background-image: url("../list-icons/notepad-3.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 20px;
}

.blorboicon{
  list-style: none;
  padding: 5px 25px;
  background-image: url("../list-icons/users-1.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 20px;
}

.shrinesicon{
  list-style: none;
  padding: 5px 25px;
  background-image: url("../list-icons/game_freecell-2.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 20px;
}

.resourcesicon{
  list-style: none;
  padding: 5px 25px;
  background-image: url("../list-icons/entire_network_globe-4.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 20px;
}

.blinkies{
  width: 100%;
}


footer{
  width: 20%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: rgb(255, 255, 255);
  font-family: pixel-operator;
}

a.footerlink:visited {color:rgb(92, 204, 212);}
a.footerlink:hover {color:rgb(207, 156, 200);}

#statuscafe {
    padding: .5em;
}
#statuscafe-username {
  font-size: 13px;
    margin-bottom: .5em;
}
#statuscafe-content {
  font-size: 15px;
    margin: 0 1em 0.5em 1em;
}