/* CSS is how you can add style to your website, such as colors, fonts, and making you want to jump from a bridge because the css doesn't works by some reason. To learn how to do something, just try searching Google for questions like
   "letal dose of chocolate." */

@property --rainbowHue{
  index         : "<number>";
  initial-value : 0;
}

@property --rainbowHueDark{
  index         : "<number>";
  initial-value : calc(var(--rainbowHue,0) + 180);
}

@property --divWidth{
  syntax        : "<percentage>";
  inherits      : true;
  initial-value : 75%;
}

@font-face {
  font-family : 'ipixelu';
  src         : url('I-pixel-u.ttf') format('truetype');
}

/* very important site basic stuff */
p {
  display:inline;
}

img {
  display     : block;
  max-width   : 100%;
  max-height  : 100%;
  margin      : 0 auto;
}

html {
  background-color      : #050010;
  background-image      : url(tilebackbackground.png);
  background-size       : 63px 63px; 
  background-attachment : fixed;
  image-rendering       : pixelated;

}

a{
  color           : white;
  text-shadow     : 0px 0px 30px hsla(var(--rainbowHueComplementary,180),100%,50%,90%),
                    0px 0.1em 0px hsla(var(--rainbowHueComplementary,180),100%,50%,90%);
  text-decoration : none;
}

a:active {
  color           : white;
  text-shadow     : 0px 0px 30px hsla(var(--rainbowHueComplementary,180),100%,50%,90%),
                    0px 0.1em 0px hsla(var(--rainbowHueComplementary,180),100%,50%,90%);
  text-decoration : underline;
}

a:hover {
  color           : white;
  text-shadow     : 0px 0px 30px hsla(var(--rainbowHue,0),100%,50%,90%),
                    0px 0.1em 0px hsla(var(--rainbowHue,0),100%,50%,90%);;
}

:not(#increasingspecificity)  audio{
  background-color: hsla(var(--rainbowHue,0),100%,50%,90%);
  padding:0%;
  width:auto;
  margin:0%;
}

.general {
  background-image      : url(tilebackground.png);
  width                 : var(--divWidth);
  background-size       : 63px 63px;
  color                 : #ffffff;
  font-family           : ipixelu;
  padding               : 1%;
  margin                : 1.5% auto auto auto;
  border                : 5px solid hsl(var(--rainbowHue,0),100%,50%);
  background-attachment : fixed;
  box-shadow            : 0px 6px 0px hsl(var(--rainbowHue,0),100%,20%)
}

div .focus{
  background-image  : linear-gradient(#a0008030,#20005050);
  border            : 5px solid hsl(var(--rainbowHue,0),100%,75%);
  padding           : 2%;
  margin            : 1% 20%;
  background-size   : 100%;
  /*! border-radius     : 1rem; */
}

.general h1{
  margin      : 15;
  text-align  : center;
  color       : hsl(var(--rainbowHue,0),100%,50%);
  text-shadow : 0px 0.2cap 0px hsl(var(--rainbowHue,0),100%,20%);
}

/* this shit randomly decided to stop working and i'm going to cry on the corner if this shit doesn't decides to work
is my spaghetti code really THAT bad?

the fix was to make the first thing ".main" instead of "div .main" i'm not questioning it */


.emojis {
  display : inline;
  height  : 0.63em;
  width   : 0.63em;
  margin  : 0px 0.1em;
}
 
textarea{
  resize  : none;
}
  
.rainbow{
  color : hsl(var(--rainbowHue,0),100%,50%);
}
.outline{
  text-shadow : -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.parentheses{
    color: #ffffff63;
}

.spoiler{
  color: #070012 ;
  background-color: #070012;
}

.spoiler:hover{
  color: white;
}

/*
spent hours on this shit just for me to already be retiring it

.backButton { 
  background-color: hsla(var(--rainbowHue,0),100%,50%,10%);
  text-align: start; 
  / somehow this shit overflows at 100% i'm getting insane /
  background-size: 2%;
  color: #ffffff;
  font-family: ipixelu;
  padding: 0 2%;
  margin: 1% 15%;
  border: 5px solid hsl(var(--rainbowHue,0),100%,50%);
  background-attachment: fixed;
  image-rendering: pixelated;
  display: grid;
  grid-template-columns: 0.5fr 3fr;
}

.backButton:hover{
  border: 5px solid hsl(var(--rainbowHue,0),100%,80%);
  background-color: hsla(var(--rainbowHue,0),100%,80%,10%);
}

.backButton img{
  height:100%;
  object-fit: contain;
} */
.menu{
  padding:0.5%;
  width: calc(var(--divWidth) + 1%);
}

.menuLinks{
  display         : flex;
  justify-content : center;
  align-items     : center;
  flex-wrap       : wrap;
}
.menuLinks a{
  text-align  : center;
  margin      : 0% 3%;
  width       : 63px;
  flex        : 1;
}
.menuLinks a img{
  min-width : 63px;
  width: 63px;
}

#furrLogo{
  width:100%;
  height:100%;
  padding: 0%;
}
#randomText
{
  color                     : yellow;
  text-align                : right;
  float                     : right;
  margin                    : 0% 3%;
  animation-duration        : 10s;
  animation-name            : minecrafty;
  animation-iteration-count : infinite;
  animation-delay           : 1s;
  scale                     : 100%;
  rotate                    : -3deg;
}

@keyframes minecrafty{
  0%{
    scale:100%;
  }
  50%{
    scale:130%;
  }
  100%{
    scale:100%
  }
}
.hoverZoom{
  width : var(--imageHover,20%);
}
.hoverZoom:hover{
  width : var(--imageHoverPeak,50%);
}

@media (width <= 1250px)
{
  @property --divWidth{
  syntax        : "<percentage>";
  inherits      : true;
  initial-value : 90%;
  }
}

/* epic CSS for hovering boxes that are cool */
@property --mouseX{
  index         : "<number>";
  initial-value : 0;
}
@property --mouseY{
  index         : "<number>";
  initial-value : 0;
}

.organizeThatBitch img{
  object-fit        : contain;
  margin-bottom     : 2%;
  width             : 60%;
  text-align        : center;
  border            : 5px solid hsl(var(--rainbowHue,0),100%,50%);
  box-shadow        : 0px 6px 0px hsl(var(--rainbowHue,0),100%,20%);
  background-color  : hsla(var(--rainbowHue,0),100%,20%,50%);
}

.notPixel{
  image-rendering : smooth;
}

:not(#increasingspecificity) .small{
  width: 30%;
}

.padding{
  padding: 1%;
}

#hover
{
  width                 : auto;
  background-attachment : revert;
  background-image      : linear-gradient(#a00080be,#200050ff);
  background-size       : 100%;
  margin                : 1%;
  padding               : 0% 1%;
  display               : none;
  position              : fixed;
  left                  : var(--mouseX);
  top                   : var(--mouseY);
  border                : 5px solid hsl(var(--rainbowHueComplementary,180),100%,50%);
  box-shadow            : 0px 6px 0px hsl(var(--rainbowHueComplementary,180),100%,20%);
}

.nyan{
  position:absolute;
}