@font-face {
    font-family: CygnitoMono;
    src: url("CygnitoMono.otf") format("opentype");
  }
  
  :root {
    --marker_width: 100px;
    --marker_radius: 0px;
    --glow_size: 0px;
    --panel_size: 400px;
  }
  
  a {
    color: white;
    background-color: #80808080;
    text-decoration: none !important;
    padding: 2px;
  }
  
  .adword {
    width: 100%;
    height: 400px;
    max-width: 300px;
    max-height: 600px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    display:inline-block;
  }
  
  #bigad {
    width: calc(100vw - 100px);
    background-color: #222222;
    height: 300px;
    min-height: 50px;
    position: reative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
    overflow: hidden;
  }
  
  .memory-card .adword
  {
    display: inline-block;
  }
  
  #buttons {
    display: none;
    position: fixed;
    bottom: 5vh;
    z-index: 999999999;
  }
  
  #username {
    margin-right: 10px;
    margin-top: 15px;
    text-align: center;
    border-bottom: 1px solid #444444;
    padding-bottom: 16px;
  }
  
  #right-side {
    width: var(--panel_size);
    height: 100vh !important;
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 999999;
    display: inline;
    border-left: 1px solid #444444;
  }
  
  body.panel-open #right-side {
    display: inline;
  }
  
  body.panel-closed #right-side {
    display: none;
  }
  
  #left-side {
    width: calc(100% - var(--panel_size));
    background-color: black;
    color: white;
  }
  
  #panel-selector {
    position: relative;
    top: 0px;
    color: white;
    display: flex;
    width: 100%;
    height: 40px;
  }
  
  #panel-selector .panel-option {
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 9px;
    text-align: center;
    justify-content: center;
  }
  
  #panel-selector .panel-option.selected {
    border-bottom: 4px solid white;
  }
  
  #chat {
    width: 100%;
    height: calc(100% - 50px);
    position: absolute;
    right: 0px;
    top: 90px;
    padding: 0px;
    margin: 0px;
    display: inline-block;
  }
  
  .memory-card.big-plus {
    background-color: black !important;
  }
  
  .memory-card.big-plus .image-container {
    background-color: #222222;
    background-image: none !important;
  }
  .image-container .image-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video scales properly */
    position: absolute;
    left: 0;
    top: 0;
}

  
  .memory-card.big-plus .memory-info {
    opacity: 0;
  }
  
  #open-right-panel {
    background-color: transparent;
    /* Makes the background transparent */
    border: none;
    /* Removes the border */
    color: inherit;
    /* Ensures the text color is inherited, or set it to transparent if needed */
    cursor: pointer;
    /* Changes the cursor to pointer to indicate it's clickable */
    outline: none;
    /* Removes the outline on focus */
    padding: 0;
    /* Removes default padding */
    font: inherit;
    /* Inherits font properties from the parent element */
    width: 20px;
    display: none;
  }
  
  #buttons button {
    background-color: transparent;
    /* Makes the background transparent */
    border: none;
    /* Removes the border */
    color: inherit;
    /* Ensures the text color is inherited, or set it to transparent if needed */
    cursor: pointer;
    /* Changes the cursor to pointer to indicate it's clickable */
    outline: none;
    /* Removes the outline on focus */
    padding: 0;
    /* Removes default padding */
    font: inherit;
    /* Inherits font properties from the parent element */
  }
  
  a:hover {
    color: black;
    background-color: white;
    text-decoration: none !important;
    padding: 2px;
  }
  
  select {
    background-color: #80808080;
    /* Set background to black */
    color: white;
    /* Set text color to gray */
    border: 0px solid gray;
    /* Optional: make border black to blend with background */
  }
  
  select:focus {
    outline: none;
    /* Removes the focus outline */
  }
  
  
  
  body.memory-lane .hidden {
    display: none !important;
  }
  
  body.memory-lane .visible {
    display: inline-block !important;
    ;
  }
  
  
  
  body {
    width: 100vw;
    font-size: 12px;
    font-family: CygnitoMono, Arial, sans-serif;
    background-color: #000000;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
  }
  
  
  #map {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: gray;
    opacity: 1;
  }
  
  #graph {
    position: absolute;
    width: calc(100% - var(--panel_size));
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #222222;
    opacity: 1;
    display: none;
  }
  
  #map.visible {
    opacity: 1;
  }
  
  #header {
    display: flex;
    width: calc(100% - var(--panel_size));
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: black;
    z-index: 9999;
    border-bottom: 1px solid #444444;
    padding-right: 10px;
    box-sizing: border-box;
  
  }
  
  #header-left {
    flex-grow: 1;
    padding: 4px;
  }
  
  #header-left #subtitle {
    font-family: helvetica, arial;
    font-size: 20px;
    font-weight: 100;
  }
  
  body.mini #header-left {
    display: none;
  }
  
  body.mini #download {
    display: none;
  }
  
  body.mini #open-right-panel {
    display: none;
  }
  
  #header #download {
    margin-right: 10px;
    margin-top: 15px;
  }
  
  #header #download a {
    margin-right: 10px;
    margin-top: 15px;
    color: black !important;
    color: black !important;
    background-color: #00FF00 !important;
    height: 15px;
    padding: 1px;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  #header #download a:hover {
  
    color: black !important;
    background-color: white !important;
  
  }
  
  #header #viewer {
    display: flex;
    height: 16px;
    margin-top: 15px;
    margin-right: 4px;
  }
  
  h1 {
    margin: 20px 0;
  }
  
  
  /*canvas {
    transform: translateZ(0);
    will-change: transform;
  }*/
  
  .memory-card {
    position: absolute;
    transition-property: transform, top, left, width, height, opacity, transition-duration;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, .94, .33, .99) !important;
    width: 300px;
    background-color: black;
    padding: 0px;
    display: inline-block;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #a3a3a3;
    font-family: CygnitoMono, monospace;
  
    /*max-width: var(--marker_width);
    max-height: calc(var(--marker_width) * 1);*/
    /*border-radius: var(--marker_radius);
    /*box-shadow: inset 0 0px var(--glow_size) white;*/
  
  
  }
  
  .memory-card .image-container {
    width: 100%;
    position: relative;
    cursor: pointer;
    aspect-ratio: 5 / 6;
    background-color: #222222;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 1px solid #000000;
    margin-bottom: 10px;
  }
  
  
  
  .memory-info {
    font-size: 12px;
    color: #b3b3b3;
    text-align: left;
    width: 100%;
  }
  
  .memory-info p {
    margin: 5px 0;
  }
  
  .memory-info .location,
  .memory-info .userId,
  .memory-info .datetime {
    font-size: 12px;
  }
  
  .memory-info .coordinates {
    font-size: 6px;
  }
  
  .memory-info .tags {
    font-size: 10px;
  }
  
  body.small-matrix #data {
    display: inline;
  }
  
  body.small-matrix #map {
    visibility: hidden;
  }
  
  body.tokens #data {
    display: inline;
  }
  
  body.tokens #map {
    visibility: hidden;
  }
  
  body.matrix #data {
    display: inline;
  }
  
  body.matrix #map {
    visibility: hidden;
  }
  
  body.memory-lane #map {
    visibility: hidden;
  }
  
  body.memory-lane #graph {
    visibility: hidden;
  }
  
  
  body.memory-lane #data {
    display: inline;
  }
  
  body.map #data {
    display: none;
  }
  
  body.map #map {
    visibility: visible;
    width: 100%;
    height: 100%;
  }
  
  
  
  body.graph #graph {
    display: inline;
  
  }
  
  body.graph #chat {
    display: inline;
  }
  
  body.graph #map {
    display: none;
  }
  
  body.graph #data {
    display: none;
  }
  
  body.small-matrix .memory-card {
    width: 85px;
    opacity: 1 !important;
    border-radius: 0px;
    transform: translate(0px, 0px) !important;
    overflow: hidden;
  }
  
  
  body.tokens .memory-card {
    width: 100%;
    opacity: 1 !important;
    border-radius: 0px;
    transform: translate(0px, 0px) !important;
    overflow: hidden;
    display: flex;
    flex-direction: row !important;
    border-bottom: 1px solid #222222;
  }
  
  body.tokens .memory-card .image-container {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    opacity: 1 !important;
    border-radius: 0px;
    transform: translate(0px, 0px) !important;
    overflow: hidden;
  }
  
  
  
  body.tokens .memory-card .memory-info {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  body.tokens .memory-card .memory-info .userId {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    padding-left: 10px;
  }
  
  body.tokens .memory-card .memory-info .location {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    padding-left: 10px;
  }
  
  
  body.tokens .memory-card .memory-info .datetime {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    padding-left: 10px;
  }
  
  
  body.tokens .memory-card .memory-info .tags {
    max-width: 70px;
    padding-left: 10px;
    opacity: 0;
  }
  
  body.tokens .memory-card:hover .memory-info .tags {
    opacity: 1;
  }
  
  
  
  body.memory-lane .memory-card {
    opacity: 1 !important;
    transform: translate(0px, 0px) !important;
    z-index: 999;
    background-color: transparent;
  }
  
  body.memory-lane #buttons {
    display: flex;
  }
  
  body.memory-lane .memory-card.prev-memory {
    z-index: 99;
    background-color: transparent;
  }
  
  body.memory-lane .memory-card.prev-memory .memory-info {
    display: none;
  }
  
  body.memory-lane .memory-card.prev-memory .image-container {
    width: 130%;
    height: 130%;
    top: -15%;
    left: -15%;
  }
  
  @media only screen and (max-width: 768px) {
  
    body.memory-lane .memory-card.visible {
      position: absolute;
      width: 80vw !important;
      height: 80vw;
      top: 20vh !important;
      left: 10vw !important;
    }
  
    body.memory-lane .memory-card.prev-memory {
      position: absolute;
      width: 100vw !important;
      height: 90vh !important;
      top: 0vh !important;
      left: 0vw !important;
    }
  
    body.memory-lane .memory-card.visible .image-container,
    body.memory-lane .memory-card.prev-memory .image-container {
      width: 100% !important;
      top: 0% !important;
      left: 0% !important;
    }
  
    body.memory-lane .memory-card.prev-memory .image-container {
      position: absolute;
      width: 100% !important;
      height: 100% !important;
      top: 0% !important;
      left: 0% !important;
    }
  
  }
  
  
  body.memory-lane .memory-card.prev-memory .image-container {
    width: 130%;
    height: 130%;
    top: -15%;
    left: -15%;
  }
  
  body.small-matrix .memory-info .location,
  body.small-matrix .memory-info .userId,
  body.small-matrix .memory-info .datetime {
    font-size: 10px;
  }
  
  body.small-matrix .memory-card .coordinates,
  body.small-matrix .memory-card .tags,
  body.small-matrix .memory-card .datetime {
    display: none !important;
  }
  
  
  body.matrix .memory-card {
    width: 300px;
    opacity: 1 !important;
    transform: translate(0px, 0px) !important;
    border-radius: 0px;
  }
  
  #map {
    background-color: black;
  }
  
  canvas {
    transition: opacity 2s cubic-bezier(0, .94, .33, .99);
  }
  
  
  body.matrix canvas {
    opacity: 0;
  }
  
  
  body.small-matrix canvas {
    opacity: 0;
  }
  
  body.map .memory-card {
  
    width: 10px;
    height: 10px;
    overflow: hidden;
    background-color: white;
    top: 0px !important;
    left: 0px !important;
    border-radius: 200px;
    transition-duration: 0 !important;
  
  }
  
  body.map #map.s .memory-card {
    width: 10px !important;
    height: 10px !important;
    overflow: hidden;
    background-color: white;
  }
  
  body.map #map.m .memory-card {
    width: 40px !important;
    height: 40px !important;
    overflow: hidden;
    background-color: white;
    border-radius: 200px;
  }
  
  body.map #map.l .memory-card {
    width: 200px !important;
    height: 370px !important;
    background-color: black;
    border-radius: 0px;
  }
  
  body.map #map .memory-card {
    transition-property: none !important;
    transition-duration: 0s !important;
  }
  
  body.memory-lane #data .memory-card {
    transition-property: none !important;
    transition-duration: 0s !important;
    display: none;
  }
  
  
  body.map #map.s .memory-card .image-container {
    display: none;
  }
  
  body.map #map.s .memory-card .memory-info,
  body.map #map.m .memory-card .memory-info {
    display: none;
  }