:root { --updates-background:url('/img/site-graphics/perfect-sky.jpg'); }
.dark-mode { --updates-background:url('/img/site-graphics/perfect-sky.jpg'); }

html, updates {
  margin:0;
  background-color:var(--bg) !important;
  color:var(--dark);
}

#bg-no-lag { 
  background-image:var(--updates-background) !important;
  margin:0 !important; 
  opacity:0.3 !important;
  }

#main-content {
  bottom:0 !important;
  margin-bottom:0 !important;
  top:0 !important;
  margin-top:0 !important;
  border-radius: 25px !important;
}

.main-content-wrapper {
  width:100%;
  height:100%;
  border-radius: 25px !important;
  margin-bottom:0;
  margin-top:0;
}
 
/*-- text selection --*/
.update-logs ::selection,
.update-logs ::-moz-selection,
.update-logs i::selection,
.update-logs i ::-moz-selection {
  background: #a598eb;
  color: #ffffff;
}

.updates-center {
  margin:0;
}

.updates h1 {
  margin-bottom:-22px;
}

.updates h2 {
  font-size: 28px;
  font-family: "Jersey 10", sans-serif;
  color:var(--inner);
}
        
.update-container h3, h4, h5, h6 {
  margin-top: 0;
  font-size: 28px;
  font-family: "Jersey 10", sans-serif;
  color: var(--header);
}

.update-container p {
  text-align: left;
  padding: 2%;
  font-size: 24px;
}

.update-container a {
  color: var(--p-link);
  text-decoration: underline 2px var(--header);
}

.update-container a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--accent);
}

.update-container ol li {
  text-align: left;
  text-transform: none;
  color: var(--font) !important;
  font-family: "Jersey 10", sans-serif;
  font-size: 24px;
}

.update-container {
  padding: 20px;
  height: 35vh;
  position: relative;
  margin: -15px 22px -15px 22px;
  border: 1px solid var(--stroke);
  flex: 1 1 calc(22% - 5px);
  box-shadow: 0 18px 15px rgba(0, 0, 0, 0.12), inset 8px 7px 7px 1px rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  overflow-y: scroll;
  overflow-x: scroll;
  color: var(--font);
  background-color: transparent;
  --container-shine: linear-gradient(
    120deg,
    transparent 50%,
    rgba(255, 200, 200, 0.08) 15%,
    transparent 60%
  );
  background-image: var(--container-shine);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  transition: all 0.5s linear, background-position 6s ease;
}

.update-container:hover {
  background-position: 0% 0;
  transition: all 0.5s linear, background-position 6s ease;
}

html.no-shine .update-container {
  --container-shine: none;
  transition: none;
}

/*-- CODE BLOCKS --*/
code {
  font-size: 20px;
  font-family: "Share Tech Mono", ui-monospace, Consolas, monospace;
}

/*-- UPDATE INFO HEADER --*/
#display-header {
  color:var(--p-link);
}

/*-- FOOTER BENEATH UPDATE LOGS --*/
#display-footer {
  margin-top: -20px;
  font-size: 18px;
  color: var(--link) !important;
}

#display-footer a {
  color: DarkSeaGreen;
}

#display-footer a:hover {
  color: Aquamarine;
}

/*-- ACTUAL FOOTER AT BOTTOM OF PAGE --*/
footer {
  position: relative;
  flex-shrink: 0;
  background-size: contain;
  background-color: transparent;
  color: var(--font);
  overflow: hidden;
  box-shadow: 1px 1px 1px;
  border-top: 2px solid var(--stroke);
  min-height: 50px;
  width: 100%;
  padding: 10px 5px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  border-radius: 0 0 25px 25px !important;
}

span.footer-notes {
  font-size: 22px;
  letter-spacing: 0.1rem;
  text-align: center;
  font-family: "Jersey 10", sans-serif;
}

span.footer-notes span.rb:hover {
  background: linear-gradient(
    80deg,
    #ffa6a6 12.5%,
    #ffcf99 0 25%,
    #ffffbd 0 37.5%,
    #b8ffb8 0 50%,
    #bdffff 0 62.5%,
    #9cb9ff 0 75%,
    #c294ff 0 87.5%,
    #ffb5d5 0 100%
  );
  background-size: 200% 100%; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 2s linear infinite;
  width: fit-content;
  display: inline-block;
  filter: drop-shadow(1px 0 0 blue) drop-shadow(-1px 0 0 blue) drop-shadow(0 1px 0 blue) drop-shadow(0 -1px 0 blue);
}

@media only screen and (max-width: 767px) {
  .container {
    margin-bottom: 8px;
  }

  h1 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1rem;
  }
  
  span.footer-notes {
    font-size: 14px;
  }
}

.nav-controls {
  text-align: center;
  margin: 20px 0;
}

.ds-nav-btn {
  background-color: var(--container);
  border: 1px solid var(--stroke);
  color: #fff;
  padding: 8px 15px;
  cursor: pointer;
  cursor: url('/graphics/cursors/magic-cursor-pointer.png') 10 0, pointer;
  font-family: "Lacquer", system-ui;
  font-size: 1.2rem;
  margin: 0 10px;
}

.ds-nav-btn:hover { background-color: var(--button-hover); color: var(--font); }
.ds-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(100%); }