/*A list of all the colors I'm using since SASS is too difficult to use once you've already made a CSS file, these are so I can replace them

Cursor url: https://file.garden/ZfdirA_uZRgXD36q/Temp%20webbed%20site%20stuffs/WebsiteassetsLuckascursorbiggerline-ezgif.com-resize.png
Main bg image: https://64.media.tumblr.com/bd1bfd4a6556d3f52e9356d252d126be/279cfc6b8a9eb115-64/s540x810/6cc431a7836e4272d00ab9196aad59fe4d00f106.gifv
Main bg: #15160c
Main text color: #fff7d4
Main gradient: #1d2416 0%, #1b1704 100%
Outer border: #273618
Inner border: #252e12
Scrollbar color: #74753481 #333f1e7e
Box shadow: #0d1400bd
Card bg: #1b1d0e
*/

:root, [data-bs-theme="light"] {
  --bs-body-bg: #38461c;
}


html {
  scroll-behavior: smooth;
}

body {
  cursor: url("https://file.garden/ZfdirA_uZRgXD36q/Temp%20webbed%20site%20stuffs/WebsiteassetsLuckascursorbiggerline-ezgif.com-resize.png"), auto !important;
  background-color: #15160c; 
  padding:5px; 
  font-family: Georgia; 
  color: #fff7d4; 
  background-image: url(https://i.pinimg.com/originals/62/25/63/622563167fcf63b7ab120c734e5e5090.gif);
  background-size:cover; 
  background-blend-mode: overlay;
  height: 100vh;
}

.the-base {
  background: linear-gradient(#1d2416 0%, #1b1704 100%); 
  max-width: 900px; 
  position: relative; 
  margin: auto; 
  margin-top: 90px;
  height: 700px; 
  border: 3px solid #273618;
}

.tab-buttons {
  height: 30px; 
  width: 30px; 
  background: #6e7756;
}

.scrollolololol {
  height: 86%; 
  overflow-y:scroll; 
  overflow-x: hidden; 
  scrollbar-width: thin; 
  scrollbar-color: #74753481 #333f1e7e; 
  padding: 5px 10px;
}

.scrollolololol-char {
  height: 86%; 
  padding: 5px 10px;
}

.textbox {
  border-radius: 0px;
  background-color: #1b1d0e;
  border: 5px solid #252e12;
  color: inherit;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  box-shadow: 5px 5px #0d1400bd;
}

.box-shadow {
  box-shadow: 5px 5px #0d1400bd;
}

.textbox-header {
  background-color: #252e12;
  margin: -5px;
  margin-bottom: 3px;
  padding: 0 5px;
  font-variant: small-caps;
  font-style: italic;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 2px 2px #0c1101b9;
}

.textbox-innards {
  overflow-y: auto;
  padding: 5px;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #74753481 #333f1e7e; 
  max-height: 120px;
}

.textbox-tail {
 width: 20px;
 height: 30px;
 clip-path: polygon(100% 0, 100% 100%, 0% 50%);
 background-color: #252e12;
 margin-top: 45px;
}

.char-textbox-name {
  font-size: 30px;
  margin-bottom: 0px;
  font-variant: small-caps;
  font-weight: bold;
  text-shadow: 3px 3px #0c1101b9;
}

.char-textbox-nickname {
  font-size: 20px;
  margin-bottom: 0px;
  font-variant: small-caps;
  font-style: italic;
  color: #b5d167c9;
}

.char-header {
  background-color: #252e12;
  padding: 5px 9px;
  color: inherit;
  font-size: 30px;
  font-variant: small-caps;
  font-weight: bold;
  margin: -5px;
  margin-bottom: 0px;
  text-shadow: 3px 3px #0c1101b9;
}

.char-outerring {
  border: 5px solid #252e12;
  color: inherit;
}

.char-innards {
  height: 315px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #74753481 #333f1e7e;  
  padding: 5px;
}

.featured-char-img {
  width: 150px;
}

.boner {
  background-image: url(https://64.media.tumblr.com/7dade3537c28a0d7513e1db54afee7e6/50e67b6c74b9b687-f5/s1280x1920/191f9c3dc34ddfedeb039174b9b818db605c976c.gifv);
  background-size: cover;
  height: 50px; 
  width: 100%; 
  border-bottom: 3px solid #273618;
}

.bbbanner-right {
  display: flex; 
  width: 30%; 
  background-image: url(https://64.media.tumblr.com/68c0401f33584cb8232a480bb1f79822/50e67b6c74b9b687-13/s1280x1920/e4b27ba80b7760f73185e97e03d19416192221e3.gifv); 
  border-left: 2px solid #273618; 
  border-bottom: 2px solid #273618; 
  height: 50px; 
  padding-top: 10px; 
  background-blend-mode: overlay; 
  background-color: #273618;
  padding-right: 10px; 
  justify-content: right;
}

::selection {
  background-color: #968c3291;
}

::-moz-selection {
  background-color: #968c3291;
}



.char-name {
  font-weight: bold;
  font-size: 15px;
  margin: 0px;
}

.char-desc {
  margin: 0px;
  font-size: 13px;
}

.char-prns {
  margin: 0px;
  font-size: 12px;
  color: #a19d8a;
}

.char-orient {
  width: 36px;
  transition: 0.5s;
}

.char-orient:hover {
  scale: 1.1;
}

.charnav-divider {
  color: #00000000;
}

.charnav-header {
  border-radius: 0px;
  background-color: #1b1d0e;
  padding: 5px;
  border: 3px solid #252e12;
  color: inherit;
}


.char-container {
  width: 210px;
  text-align: center;
  border-radius: 0px;
  background-color: #1b1d0e;
  margin: 3px;
  padding: 3px;
  border: 3px solid #252e12;
  color: inherit;
}

.charnav-leftadjust3 {
  margin-left: 100px;
}

.img-container {
  margin: 5px -3px; 
  transition: 0.5s;
}

.img-container:hover {
  margin-top: -8px; 
}

.img-pane {
  width: 290px;
}

.img-pane--wide {
  width: 870px;
}

.imgnav-old {
  filter:grayscale(80%)
}

.imgnav-header {
  border-radius: 0px;
  background-color: #1b1d0e;
  padding: 5px;
  border: 3px solid #252e12;
  color: inherit;
  min-width: 860px;
}

.big-guy {
  position: absolute;
  height: 100vh;
  background-color: #00000077;
  z-index: 999;
  inset: 0px;
  transition: 0s;
}

.thing {
  position: sticky;
  text-align: center;
  width: 100%;
  top: 0px;
  width: 99vw; 
  
}

.img-big {
  height: calc(100vh - 50px);
  margin-top: 20px;
}

.button {
  padding: 0px 5px;
  background: #3f4728;
  border: none;
  color: #fff7d4;
  font-size: 13px;
}

.button:active,
.button.is-checked {
  background-color: #858041;
}

.button.is-checked {
  color: #3f2608;
}

/* ---- button-group ---- */

.button-group {
  margin-bottom: 10px;
  justify-content: center;
  display: flex;
}


.button-group .button {
  margin-left: 1px;
}

.testing-testicles {
  width: 860px;
}

@media (min-width: 768px) {
  .toasted {
    text-align: left;
    position: sticky;
    left: 15px;
    top: 10px;
    font-size: 12px;
    color: #68655b;
  }

  .toasted-link {
    color: #68655b;
    text-decoration: none;
  }
}

.its-me {
  font-size: 170px;
  float: left;
  display: flex;
  transform:scaleX(0.3);
  margin-left: -210px;
  margin-right: -200px;
  margin-top: -50px;
  -webkit-text-stroke: 3px #80780f;
}

.webbedbutton-notme {
  margin: 3px;
}

.footnote {
  color: #858172;
  font-size: 11px;
}

.blog-blur {
  backdrop-filter: blur(3px);
  margin: -5px;
}

.blog-base-left {
  text-align: left;
  padding: 5px;
  margin: 5px 0px;
  border-radius: 0px;
  background-color: #444d35;
  background-blend-mode: darken;
  background-size: contain;
  padding: 5px;
  border: 3px solid #252e12;
  color: inherit;
  position: relative;
  transition: 0.5s;
}

.blog-base-right {
  text-align: right;
  padding: 5px;
  margin: 5px 0px;
  border-radius: 0px;
  background-color: #444d35;
  background-blend-mode: darken;
  background-size: contain;
  padding: 5px;
  border: 3px solid #252e12;
  color: inherit;
  position: relative;
  transition: 0.5s;
}

.card-baseblog {
  border-radius: 0px;
  background-color: #1b1d0e;
  padding: 10px;
  border: 3px solid #252e12;
  color: inherit;
  margin: 15px 0; 
}

.blog-image-left {
  height:250px;
  width: 200px;
  background-size: cover;
  background-position: center;
  border-right: 2px solid #252e12;
}

.blog-image-right {
  height:250px;
  width: 200px;
  background-size: cover;
  background-position: center;
  border-left: 2px solid #252e12;
}

.blog-title-left {
  font-size: 30px;
  margin-right: -15px;
  font-weight: bolder;
  margin-bottom: 0;
}

.blog-title-right {
  font-size: 30px;
  margin-left: -15px;
  font-weight: bolder;
  margin-bottom: 0;
}

.blog-info {
  color: #c3caa8;
  margin: 0;
}

.blog-divider {
  border-bottom: 2px solid #252e12;
  margin: 5px 0;
}


.blog-desc {
  height: 170px;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.blog-read-left {
  align-items: baseline;
  text-align: right;
  display: blocK;
  font-size: 12px;
}

.blog-read-right {
  align-items: baseline;
  text-align: left;
  display: blocK;
  font-size: 12px;
}

.blog-header-title {
  background-color: #252e12;
  padding: 5px;
  color: inherit;
  font-size: 30px;
  font-variant: small-caps;
  margin-bottom: 5px;
}

.evildemon {
  color: #fda4a4;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.no-gutters{
  margin:  0;
}

.text-vertical-align {
  align-items: baseline;
}


.text-left {
  text-align:left;
}

a {
  color: #c2e076;
}

a:visited {
  color: #99ab6b;
}

a:hover {
  color: #ebdf41;
}


a, btn, a.btn, .btn, button, summary, span > a, li > a, [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
  cursor: url('https://sheepss.neocities.org/Hes%20so%20silly%20cursor%20size%20tiny.png'), auto !important;
}

a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none;
}

footer {
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  text-align: center;
}

.navbar, .navbar-toggler, .nav-item, .navbar-nav, .navbar-collapse, .nav-link {
color: #ffcb7d !important;
}

#maincontainerthing {
  background: #273507;
}

.card-float-right {
  border-radius: 0px;
  background-color: #1b1d0e;
  padding: 5px;
  border: 3px solid #252e12;
  color: inherit;
  float:right;
}

.card-float-left {
  border-radius: 0px;
  background-color: #1b1d0e;
  padding: 5px;
  border: 3px solid #252e12;
  color: inherit;
  float:left;
}

.card-base {
  border-radius: 0px;
  background-color: #1b1d0e;
  padding: 5px;
  border: 3px solid #252e12;
  color: inherit;
  margin: 15px 0; 
}

.card-warning {
  border-radius: 0px;
  background-color: #646321;
  padding: 0px 5px;
  border: 3px solid #7e671b;
  color: #e6d397;
  margin-bottom: 10px;
  font-size: 14px;
}

.featured-char {
  transition: 0.3s;
}

.featured-char:hover {
  margin-top: -5px;
  margin-bottom: 5px;
}

.bold {
  font-weight: bold;
}

.font30 {
  font-size: 30px;
}

.font20 {
  font-size: 20px;
}

.font15 {
  font-size: 15px;
}

.font18 {
  font-size: 18px;
}

.hbomguy {
  font-size: 11px;
  color: #8b8774;
}

.italic {
  font-style: italic;
}

.text-right {
  text-align: right!important;
}

.text-center {
  text-align: center!important;
}

.font-italic {
  font-style: italic;
}

.introduction {
  text-shadow: 3px 2px #7a9144;
  font-variant: small-caps;
}

.gamedesign {
  animation: gamedesign 2s infinite linear;
}

@keyframes gamedesign {
  0% {color: #da2828}
  20% {color: #e4d126}
  50% {color: #6ed84e}
  70% {color: #3335d3}
  100% {color: #da2828}
}

.dividerd {
  border-bottom: 3px solid #252e12;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
}

.popover {
  background-color: #38461c;
  border: 1px solid #38461c;
  border-radius: 0px;
}

.popover-body {
  color: var(--font-color);
}

.bs-popover-top {
  > .popover-arrow {
    &::before {
      border-top-color: #38461c;
    }

    &::after {
      border-top-color: #38461c;
    }
  }
}

.bs-popover-end {
  > .popover-arrow {
    &::before {
      border-right-color: #38461c;
    }

    &::after {
      border-right-color: #38461c;
    }
  }
}

.bs-popover-bottom {
  > .popover-arrow {
    &::before {
      border-bottom-color: #38461c;
    }

    &::after {
      border-bottom-color: #38461c;
    }
  }
}

.bs-popover-start {
  > .popover-arrow {
    &::before {
      border-left-color: #38461c;
    }

    &::after {
      border-left-color: #38461c;
    }
  }
}

.mx-auto {
  margin: 0 auto !important;
}

.my-auto {
  margin: auto 0 !important;
}

.mt-n4 {
  margin-top: -1.5rem !important;
}

.mt-n3 {
  margin-top: -1rem!important;
}

.mt-n2 {
  margin-top: -.5rem!important;
}

.mt-n1 {
  margin-top: -.25rem !important;
}



.ml-n3 {
  margin-left: -1rem!important;
}

.mr-n3 {
  margin-right: -1rem!important;
}

.ml-n2 {
  margin-left: -.5rem!important;
}

.ml-n1 {
  margin-left: -.25rem!important;
}

.mr-n2 {
  margin-right: -.5rem!important;
}

.mr-n4 {
  margin-right: -1.5rem !important;
}

.mr-2 {
  margin-right: .5rem!important;
}

.mx-3 {
  margin: 0 1rem!important;
}

.mx-n3 {
  margin: 0 -1rem!important;
}

.mx-2 {
  margin: 0 .5rem!important;
}

.mx-n2 {
  margin: 0 -.5rem!important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mb-n2 {
  margin-bottom: -.5rem!important;
}

.mb-1 {
  margin-bottom: .25rem!important;
}

.mb-2 {
  margin-bottom: .5rem!important;
}

.mb-3 {
  margin-bottom: 1rem!important;
}

.p-0 {
  padding: 0px !important;
}

hr {
  opacity: 1;
}

blockquote {
  border-left: .25rem solid #4c0e0e;
  color: inherit;
  margin-left: 0;
  padding: .5rem 1rem;
}


.charb-btn {
  transition: 0.5s;
  background: #37411d;
  padding: 5px;
  color: #be9948 !important;
}

.charb-btn:hover {
  background: #2b3b23;
  color: #8f6415 !important;
}


.divider {
  border-style: solid;
  border-width: 0 0 2px;
  border-color: #4c0e0e;
  margin: 10px 0;
}


.align-content-around, .align-content-center, .align-content-end, .align-content-start, .align-content-stretch, .align-items-baseline, .align-items-center, .align-items-end, .align-items-start, .align-items-stretch, .flex-column, .flex-column-reverse, .flex-nowrap, .flex-row, .flex-row-reverse, .flex-wrap, .flex-wrap-reverse, .justify-content-around, .justify-content-between, .justify-content-center, .justify-content-end, .justify-content-start {
  display: flex;
}

.justify-content-between {
  justify-content: space-between !important;
}

.d-flex {
  display: flex !important;
}

.popover-body {
  padding: 5px;
}

.dropdown-menu {
  background: #1f2905;
  border-radius: 0px;
  color: #d8da63;
  border: 0px;
}

.dropdown-menu .dropdown-item {
  color: #d8da63;
}

.dropdown-menu .dropdown-item:hover {
  color: #ebad51;
  background: #217425;
}


.m{
  --space: 4vw;
  
  font-size: 15vw;
  white-space: nowrap;
  animation: marquee 6.5s infinite linear;
  padding-left: var(--space);
  
  &:after{
    content: attr(data-text);
    padding-left: var(--space);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-50%)
  }
}