.varela-round-regular {
  font-family: "Varela Round", sans-serif;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'dirtstandardregular';
  src: url('DSR/dirtstandard-regular_2-webfont.woff2') format('woff2'),
    url('DSR/dirtstandard-regular_2-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --primaryBG: #ff0051;
  --secondary: #232b40;
  --secondaryDarker: #1a1f26;
  --secondaryLighter: rgb(64, 86, 131);
  --secondaryLightest: rgb(150, 170, 200);

  --enabled: #59ff85;
  --disabled: #ffc400;

  --neat: #eb4034; /*no use i just thought this color was cool*/
  --outlines: #ffffff9b;
  --darkoutlines: #1d2647;

  
  --g: rgba(192, 192, 192, 0.3);
  --l: rgba(255, 255, 255, 0.4);
  --a: rgba(192, 192, 192, 0.2);
  --glass: linear-gradient(30deg, var(--g), var(--l), var(--a));
  
  --bg: rgba(191, 218, 255, 0.3);
  --bl: rgba(176, 238, 255, 0.6);
  --ba: rgba(181, 211, 255, 0.4);
  --blueglass: linear-gradient(30deg, var(--bg), var(--bl), var(--ba));
}

body {
  font-family: 'varela round';
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: white;
  cursor: none;
}


.BG {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#BG1 {
  width: 400vmax;
  height: 400vmax;
  left: -200vmax;
  top: -200vmax;
  z-index: 1;
  background: radial-gradient(black 5%, white 200%);
  animation: backgroundsize 30s alternate ease-in-out infinite;
}
@keyframes backgroundsize {
  0% {background-size: 3.5vmin 3.5vmin;}
  100% {background-size: 5vmin 5vmin;}
}
#BG2 { 
  z-index: 2;
}
#BG3 {
  z-index: 3;
  backdrop-filter: contrast(100);
}
#BG4 {
  z-index: 4;
  background: linear-gradient(20deg, var(--primaryBG), var(--neat), var(--primaryBG));
  mix-blend-mode: darken;
}
#BG5 {
  z-index: 5;
  background: linear-gradient(70deg, var(--secondary), var(--secondaryDarker), var(--secondary));
  mix-blend-mode: exclusion;
}

.trans {
  animation: tran 2s cubic-bezier(0, .63, .39, .99) infinite;
}
@keyframes tran {
  0% {color: #5BCEFA}
  50% {color: #F5A9B8}
  100% {color: #5BCEFA}
}
.evilautism {
  animation: evil 2s cubic-bezier(0, .63, .39, .99) infinite;
}
@keyframes evil {
  0% {color: white}
  50% {color: #fc3d03}
  100% {color: white}
}

#rubbercont {
  width: calc(100vw + 8px);
  height: 100vh;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 6;
}

#wholecont {
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  position: absolute;

}
#rubbercont, #bgcont {
  perspective: 200px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

#rubber {
  position: absolute;
  width: calc(100vw - 5vmin);
  height: calc(100vh - 5vmin);

  perspective: 900px;

  left: 2.5vmin;
  top: 2.5vmin;
  background: var(--glass);
  border-radius: 3vmin;

  z-index: 9;

  /*background: 
  linear-gradient(to top, #ff001e 0%, var(--primaryBG) 50%, var(--primaryBG) 90%, #ff001e),
  url(https://grainy-gradients.vercel.app/noise.svg);
  //background: linear-gradient(to top, var(--secondaryLightest), var(--secondaryLighter));
  */
  backdrop-filter: blur(9px);
  transform-style: preserve-3d;
}

::-webkit-scrollbar {
  width: 15px;  
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2); 
}
  ::-webkit-scrollbar-thumb {
  background: white; 
    border-radius:10px;
}

#cursor {
  position: absolute;
  width: 8vmin;
  height: 8vmin;
  z-index: 10;

  margin: 0;
  padding: 0;
  pointer-events: none;
}
#innercursor {
  width: 100%;
  height: 100%;

  background-image: url('data:image/png;base64,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');
  background-size: contain;
}

#cursor2 {
  position: absolute;
  width: 5vmin;
  height: 5vmin;
  margin-left: -1.7vmin;
  margin-top: -1.7vmin;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0);
  clip-path: circle();
  backdrop-filter: invert();

  pointer-events: none;
  
  /* transition-duration: .15s; /*why does this just break the site*/
  /*transition-timing-function: cubic-bezier(0, .63, .39, .99);*/
}

.givens {
  position: absolute;
  box-sizing: border-box;
  border-width: 0px;
  outline-style: solid;
  outline-width: 2px;
  outline-color: var(--outlines);
  /*utline-offset: -2px;*/
  z-index: 12;

  padding: 10px;
  /*border-radius: 3vmin;*/

  background: var(--glass);

  transition-duration: .25s;
  transition-timing-function: cubic-bezier(0, .63, .39, .99);
  
  overflow: auto;
  scrollbar-width: thick;
  transform: translateZ(40px);
  filter: drop-shadow(0px 0px 5px rgba(35, 43, 64, 0.5));

  
  transform-style: preserve-3d;
}

.givens:hover {
  transform: translateZ(30px);
  /*border-color: #edf2f2;
  color: #edf2f2;
  border-radius: 5vmin;
  //background: var(--blueglass);*/
  z-index: 40;
  outline-width: 4px;
  background: rgba(255, 13, 5, 0.5);
}

.btntitle {
  filter: 
  drop-shadow(2px 2px 0px white)
  drop-shadow(2px -2px 0px white)
  drop-shadow(-2px 2px 0px white)
  drop-shadow(-2px -2px 0px white)
  ;
  font-size: 1.6em;
  color: var(--secondary);
  word-wrap: break-word;
}


#header {
  position: absolute;
  top: calc(2vmin - 5vh);
  left: 2vmin;
  width: 30vw;
  height: 25vh;
  font-family: dirtstandardregular;
  font-size: 8vmin;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
#logobtn {
  background-image: url('icons/logo.png');
  background-color: rgba(0,0,0,0);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border-width: 0px;
}

#socials {
  position: absolute;
  top: 2vmin;
  left: calc(2vmin + 30vw + 1vmin);
  width: calc(45.5vw - 1vmin);
  height: 11vh;
  overflow-y: hidden;
  overflow-x: auto;
  margin: 0;
  padding: 0;
}

#belowsocials {
  position: absolute;
  top: calc(2vmin + 11vh + 1vmin);
  left: calc(2vmin + 30vw + 1vmin);
  width: calc(45.5vw - 1vmin);
  height: 8vh;
  overflow-y: hidden;
  overflow-x: auto;
  margin: 0;
  padding: 0;

  background-image: url('https://www.brendoncolby.com/images/under_construction.gif');
  animation: scrollbg 4s linear infinite;
}
@keyframes scrollbg {
  0% {background-position: 0% 0%;}
  100% {background-position: 400px 125px;}
}

#sidebar {
  position: absolute;
  top: calc(2vmin + 20vh + 1vmin);
  left: 2vmin;
  width: 20vw;
  height: calc((100vh - 5vmin) - (2vmin + 20vh + 1vmin + 2vmin));
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0;
  overflow-x: hidden;

  display: flex;
  flex-flow: wrap;
}

#main {
  top: 23vh;
  left: calc(2vmin + 20vw + 1vmin);
  position: absolute;
  width: 55vw;
  height: calc(100% - 25vmin);
  font-size: 3vmin;
  line-height: 1.1;
}

#assortedmusings {
  position: absolute;
  top: 2vmin;
  left: 77vw;
  width: 19vw;
  height: 91vh;
  font-size: 1.1rem;
  overflow: visible;
  line-height: 0.9;
}

/**/


.social {
  display: inline-block;
  height: 100%;
  width: 10vmin;
  margin: 0px;
  margin-right: -4px;
  padding: 0px;
  cursor: none;

  outline-style: solid;
  outline-color: var(--outlines);
  outline-width: 2px;

  border-width: 0px;
  background: rgba(255,255,255,0.4);
  /*
  border-radius: 1vmin;
  background: linear-gradient(10deg, red, blue);
  */

  transition-duration: .1s;
  transition-timing-function: cubic-bezier(0,.63,.39,.99);

  background-size: contain;
  background-repeat: no-repeat;
}
#hmu {
  font-size: 3em;
  padding: 0px;
  margin: 0px;
  overflow: visible;
  outline-width: 0px;
  text-align: center;
  position: absolute;
  left: calc(100% - 15vmin); 
  width: 15vmin;
  color: var(--outlines)
}
#hmu:hover {
  transform: scale(0.9);
  filter: blur(4px);
}
#hmu span {
  display: block;
  width: 100%;
  height: 100%;
}

.SidebarContent {
  width: calc(100% / 2);
  height: 0;
  padding: 0;
  padding-bottom: calc(100% / 2);
  flex: flex-basis;
  align-self: stretch;
  background-size: cover;
  border-width: 0px;
  cursor: none;
  font-family: dirtstandardregular;
  transition-duration: .1s;
  transition-timing-function: cubic-bezier(0,.63,.39,.99);
}
.sidebarLandingButton {
  width: 100%;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.SidebarContent:hover, .social:hover {
  transform: skew(10deg, 10deg);
  opacity: 90%;
  z-index: 1000000;
  cursor: none;
}
.SidebarContent:active, .social:active {
  transform: skew(-15deg, -15deg);
  opacity: 80%;
}


#display {
  outline-style: solid;
  width: 100%;
  height: 30vmin;
}
#dispSite, #dispImage {
  height: 100%;
  width: auto;
  max-width: 100%;

  border-style: solid;
  border-color: var(--secondary);
  box-sizing: border-box;
  border-width: 0vmin;
}
#pagecontent {
  position: absolute;
  width: calc(100% - 3vmin);
  left: 0;
  top: 30vmin;
  padding-left: 1.5vmin;
}

#sitelink a:after {
  margin-top: -1em;
}
#sitelink {
  position: absolute;
  top: 0em;
  right: 1em;
  width: 100%;
  text-align: right;
}

a {
  font-size: 2.1rem;
  font-style: italic;
  animation: hyperlink 3s ease-in infinite; 
  background: rgba(255,255,255,0.7);
} 
a:visited {
  background: rgba(255,255,255,0.1);
} 
@keyframes hyperlink {
  0% {color: white;}
  50% {color: #ff0051}
  100% {color: white;}
}
@keyframes hyperlinkv {
  0% {color: blue;}
  50% {color: purple;}
  100% {color: blue;}
}

.hr {
  width: 90%;
  height: 1vmin;
  margin: 0;
  margin-left: 5%;
  margin-top: -1vmin;
  margin-bottom: -1vmin;
  background-color: var(--outlines);
  border-radius: 100vw;
}
.hr2 {
  width: 70%;
  height: .3vmin; 
  margin: 0;
  margin-left: 5%;
  background-color: var(--secondary);
  opacity: 50%;
  border-radius: 100vw;
}


@keyframes animatetransition {
  0% {
    transform: translateZ(40px) rotateY(0deg);
    opacity: 2;
  }
  50% {
    transform: translateZ(40px) rotateY(90deg);
    opacity: 0;
  }
  51% {
    transform: translateZ(40px) rotateY(270deg);
    opacity: 0;
  }
  100% {
    transform: translateZ(40px) rotateY(360deg);
    opacity: 1;
  }
}


@keyframes animatetransitionBUTFIRSTTIME {
  0% {
    transform: translateZ(40px) rotateY(0deg);
    background-color: var(--secondary);
    opacity: .5;
  }
  50% {
    transform: translateZ(40px) rotateY(180deg);
    opacity: 0;
  }
  100% {
    transform: translateZ(40px) rotateY(360deg);
    opacity: 1;
  }
}

a, a:hover, a:active {
  cursor: none;
}

li {
   margin: 0px; 
   width: 110%;
   margin-bottom: 10px;
   margin-left: -2.6em;
   padding-right: 2.6em;
   //background-color: rgba(255,255,255, 0.5);
   background: var(--glass);
   color: var(--secondary);
   outline: solid 1px white;
   //border-radius: 2em 0 0 2em;
   display: block;
 }
 li:hover {
   transform: rotateY(3deg);
 }

body:has(a:hover, a:active, button:hover, button:active) #cursor {
  filter: hue-rotate(30deg) blur(3px);
}

.switch {
  outline-style: solid;
  outline-width: calc(.5vmin + 1px);
  outline-offset: -.5vmin;
  box-sizing: border-box;
  outline-color: var(--secondary);
  transition-duration: .1s;
}

.sidenote {
  font-size: 0.8em;
  font-family: monospace;
  background: rgba(0,0,0, 0.3);
}

@media (orientation : portrait) {

}
  @keyframes gay {
    0% {background: red;}
    10% {background: maroon;}
    20% {background: orange;}
    30% {background: yellow;}
    40% {background: green;}
    50% {background: blue;}
    60% {background: cyan;}
    70% {background: purple;}
    80% {background: magenta;}
    90% {background: magenta;}
    100% {background: red;}  
  }