/* variables */
:root {
  /* palette

    hyperlinks: #FF0000 rgb(255, 0, 0)
    red 'black': #120000 rgb(18, 0, 0)
    blue 'black:' #080c13 rgb(8, 12, 19)
    light blue: #456fba rgb(69, 111, 186)
    light green: #3b8550 (59, 133, 80)
    owl white: #f0dcd1 rgb(240, 220, 209)
    lobo amber: #f2ad7d rgb(242, 173, 125)
    babel amber: #f3ac48 rgb(243, 172, 72)

  because we use variable transparency on backgrounds so much, these need to be plugged into rgba values
  property: rgba(var(--sr-xyz),0,5)
  rgba(var(--sr-),)
  */
  --color-red: 255, 0, 0;
  --color-dark: 18, 0, 0;
  --color-blue: 69, 111, 186;
  --color-blue-dark: 8, 12, 19;
  --color-owl: 240, 220, 209;
  --color-lobo: 242, 173, 125;
  --color-babel: 243, 172, 72;
  --color-green: 59, 133, 80;

  /* okay now these are the ones that should generally get actually used in styling. also see RGBA note above */
  /* these are default values, we can change them for dark mode or whatever later if we waaant */

  /*babelchat*/
  --babel-bg: var(--color-dark);
  --babel-border: var(--color-babel);
  --babel-text: var(--color-babel);
  --babel-text-alt: var(--color-owl);
  --babel-accent-bg: var(--color-red);
  --babel-warn-bg: var(--color-blue);

  /*other root stuff*/
  scrollbar-width: auto;
  scrollbar-color: rgba(var(--color-red),0.2) rgba(var(--color-red),0);
}
body {
  overflow: hidden;
  margin: 0px;
  border: 0px;
  padding: 0px;
  height: 100vh;
  background-color: rgba(var(--color-dark),1);
  background-size: cover;
  font-family: 'Libre Franklin';
  image-rendering: pixelated;
  mask-size: 50px 50px;
  color: rgba(var(--color-owl),1)
  /*cursor: url('/image/cursor/pointer.cur'), auto;*/
}
::selection {
    background: rgba(var(--color-dark),1);
    color: rgb(255, 255, 255);
    text-shadow: none;
}

::-moz-selection {
    background: rgba(var(--color-dark),1);
    color: #ffffff;
    text-shadow: none;
}
/* mobile */
@media (max-aspect-ratio: 4/5){
  .centeringDiv{
      width:100% !important;
  }
  .hubContentBox{
    padding:1%;
  }
  .body {
  }
}
/* ultrawide */

/* GLOBAL STYLES AGAIN (not as user-facing) */
a {
  text-decoration: none;
}
/*haha what does she do what is this for haha?? i don't remember putting this here.*/
@supports (not (-webkit-hyphens:none)) and (not (-moz-appearance:none)) and (list-style-type:"*") { .appWrapper {
  position:fixed;
} }
/*thin scrollbar*/
  ::-webkit-scrollbar {
    width: 8px;
    height: 5px;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #dcd5d500;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #b3b3b3;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #767979;
  }

/* GENERAL UTILITY */
/*what it says on the tin*/
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
/* this is supposed to make things hide when they scroll under the nav, but the scroll bar hides with it, so let's not for now */
/*maybe there's something we can do to the scroll bar to shorten it. investigate*/
.navMasked {
  mask-image:
    url(/image/hub/gradient.png),
    url(/image/hub/gradient_solid.png);
  mask-size: 3.5vw, 100%;
  mask-repeat: repeat-x, no-repeat;
  mask-position:
    top,
    left 50% top 5.5vw;

}
/*this doesn't fucking work*/
.preloadDiv {
  background-color: rgba(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  mask-composite: exclude;
  animation:
    float 3s ease-in-out infinite,
    dither-fade 0.3s ease-in-out 0s 1 normal both;
}
/* entry div */
.enter{
  width:100%;
  height: 100%;
  background-color: rgba(var(--color-dark),0.8);
  cursor:pointer;
  z-index: 77;
  position:fixed;
}

/* BABEL (we're using this as default styling. individual sites can work off their own stuff)*/
input {
  background-color: rgba(0, 0, 0, 0);
  border: none;
}
input.middle:focus {
    outline-width: 0;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}