/* 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 : 180;
}

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

p {
  display:inline;
}
.general {
  background-color: #636b73;
  color                 : #ffffff;
  font-family           : Arial;
  padding               : 1%;
  margin                : 1% var(--divWidth);
  border                : 5px solid #050617;
  background-attachment : fixed;
  box-shadow            : 6px 6px 6px #00000070;
}

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; */
}

/* just fill the fucking thing already i'm going insane */
html {
  background-color      : #2d3640;
  background-size       : 63px 63px; 
  background-attachment : fixed;
  image-rendering       : pixelated;

  }

/* 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 */
.main{
  padding : 0 2%;
}

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

textarea{
  resize  : none;
}

.general h1{
  margin      : 15;
  text-align  : center;
  text-shadow : 0px 0.1cap 0px hsl(var(--rainbowHue,0),100%,20%);
  }
  
.rainbow.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;
}

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

.spoiler:hover{
  color:#ffffff;
}

a:link {
  color           : #ffff00;
  text-decoration : none;
}

a:visited {
  color           : #ffff50;
  text-decoration : none;
}

a:hover {
  color           : #ff5000;
  text-decoration : underline;
}

a:active {
  color           : #ff0000;
  text-decoration : underline;
}

@font-face {
  font-family : 'ipixelu';
  src         : url('I-pixel-u.ttf') format('truetype');
}
/*
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{
  display               : grid;
  text-align            : center;
  grid-template-columns : 1fr 1fr 1fr 1fr;
  grid-template-rows    : 1fr;
  grid-gap              : 5%;
  padding-top           : 0.3%;
}

.menu p{
  margin      : 0%;
}

.menu a{
  color       : #ffffff;
  text-shadow : 0px 0.2cap 0px hsl(0,0%,20%);
}
#furrLogo{
  grid-area   : 1/1/1/5;
}
.hoverZoom{
  width : var(--imageHover,20%);
}
.hoverZoom:hover{
  width : var(--imageHoverPeak,50%);
}

@media (width <= 1250px)
{
  @property --divWidth{
  syntax        : "<percentage>";
  inherits      : true;
  initial-value : 5%;
  }
  
  .menu{
    margin: 2% var(--divWidth);
  }
}