/*GOBLIN HOLE HALL A*/

/*referencing*/
@import url(/goblin-hole-primary-stylesheet.css);



/*chaos*/
body {
  width: 100vw;
  height: 100vh;
  
  background-blend-mode: hard-light;
  background-color: var(--slimegreen);
  opacity: .9;
  margin: 0px;
  background-image: 
    repeating-linear-gradient(
    206deg,
    var(--gooblue),
    var(--goblinseggblue),
    var(--shinygooblue),
    var(--isitgrey),
    var(--soapflower),
    var(--deadtech)3%), 
    repeating-linear-gradient(
    -86deg,
    var(--goblinseggblue),
    var(--xxhotpink),
    var(--deadtech)3%), 
    repeating-linear-gradient(
    40deg,
    var(--electricfuchia),
    var(--grumbleberry),
    var(--bgpurp),
    var(--slimegreen)2%),
    repeating-radial-gradient(
    farthest-corner at -33%,
    var(--soapflower),
    var(--okayorange),
    var(--xxhotpink),
    var(--bgpurp)2%);
    
  background-repeat: repeat-y;
  background-attachment: fixed;
  cursor: url(/assets/sprites/goblin-guy-cursor.png), 15 15, help;
}


/* this class contains the entire hall */

.goblin-hall {
  width: 100vw;  
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  align-content: stretch;
  gap: 0;
  cursor: inherit;


}

/* this class is for all gradient elements */
.gradient {
  min-height: 100vh;
  cursor: inherit;
}


/* the classes below are individual gradient objedcts in hall a */

/* line 1 */
.a01 {
  flex-basis: 100%;
  height: 3000px;
  background-image: 
  linear-gradient(
  var(--fakefern),
  var(--gooblue)),
  radial-gradient(
    farthest-corner at 7%,
    var(--soapflower),
    var(--deadtech),
    var(--bgpurp)60%),
  linear-gradient(
    12deg,
    var(--slimegreen),
    var(--shinygooblue),
    var(--electricfuchia)
  );
  opacity: .9;
}

.a01 > .goblin-guy {
  display: block;
  width: 500px;
  height: 500px;
  margin: auto;
  margin-top: 10%;
  opacity: 1;
  background-blend-mode: normal;
  position: sticky;
  top: 10%;

}

/* line 2, 2000px height */
.a02 {
  height: 2000px;
  flex-basis: 100%;
  opacity: .9;
  background-image: 
  repeating-linear-gradient(
  90deg,
  var(--soapflower),
  var(--blaringblue) 5%,
  var(--shinygooblue) 2%);
  background-blend-mode: darken;
}

.a03 {
  height: 2000px;
  flex-basis: 100%;
  background-image: 
  repeating-radial-gradient(
  var(--okayorange),
  var(--grumbleberry),
  var(--bgpurp)3%), 
  repeating-conic-gradient(
  var(--deepocean),
  var(--lessdark),
  var(--darkest),
  var(--electricfuchia),
  var(--xxhotpink),
  var(--goblinseggblue)3%);
  background-blend-mode: overlay;
  opacity: .8;
}

.a04 {
  flex-basis: 100%;
  height: 2000px;

}

/* line 3, 3000px */
.a05 {
  flex-basis: 80%;
  height: 3000px;
  background-image: 
  repeating-linear-gradient(
  50deg,
  var(--okayorange),
  var(--slimegreen),
  var(--grumbleberry),
  var(--gooblue)3%),
  repeating-linear-gradient(
  to top left,
  var(--okayorange),
  var(--slimegreen),
  var(--grumbleberry),
  var(--gooblue)3%);
  opacity: .9;  

}

.a06 {
  flex-basis: 20%;
  height: 3000px;
  background-image: 
  repeating-linear-gradient(
  -50deg,
  var(--okayorange),
  var(--slimegreen),
  var(--grumbleberry),
  var(--gooblue)3%);
  opacity: .9;  
}

/* line 4, 2000px */
.a07{
  flex-basis: 100%;
  height: 2000px;
  opacity: 1;
  background-blend-mode: hard-light;
  background:
    repeating-radial-gradient(
    var(--darkest),
    var(--soapflower),
    var(--lessdark)3%),
    linear-gradient(
    var(--deadtech),
    var(--grumbleberry),
    var(--bgpurp),
    var(--fakefern));
}

/* line 5 3000px */
.a08 {
  flex-basis: 100%;
  height: 4000px;
  background: conic-gradient( 
  var(--goblinseggblue),
  var(--slimegreen),
  var(--grumbleberry),
  var(--electricfuchia),
  var(--shinygooblue)45%,
  var(--gooblue)69%,
  var(--deepocean)79%,
  var(--duskycove)99%);
  opacity: .9;
}

.a09 {
  flex-basis: 100%;
  height: 6000px;
  opacity: 1;
  background-blend-mode: difference;
  background-image:
    repeating-linear-gradient(
    to left,
    var(--soapflower),
    var(--lessdark)20%),
    repeating-linear-gradient(
    to top,
    var(--soapflower),
    var(--lessdark)20%),
    repeating-linear-gradient(
    45deg,
    var(--soapflower),
    var(--lessdark)20px),
    repeating-linear-gradient(
    -45deg,
    var(--soapflower),
    var(--lessdark)20px);
}

/* line break */

.a10 {
  flex-basis: 100%;
  height: 3000px;
  opacity: .99;
  background-blend-mode: saturation;
  background-image: repeating-radial-gradient(
   farthest-corner at 500%,
  var(--fakefern),
  var(--deadtech),
  var(--bgpurp),
  var(--shinygooblue)6em),
    repeating-radial-gradient(
    farthest-corner at -500%,
    var(--fakefern),
    var(--deadtech),
    var(--bgpurp),
    var(--shinygooblue)6em), 
    repeating-radial-gradient(
    farthest-corner at 50% 100%,
    var(--fakefern),
    var(--deadtech),
    var(--bgpurp),
    var(--shinygooblue)1%)
    ;}

.a11 {
  flex-basis: 100%;
  height: 3000px;
  opacity: .99;
  background-blend-mode: multiply;
  background: repeating-radial-gradient(
  farthest-corner at -120%,
  var(--fakefern),
  var(--deadtech),
  var(--bgpurp),
  var(--shinygooblue)9px),
    repeating-radial-gradient(
    farthest-corner at 50% 0%,
    var(--fakefern),
    var(--deadtech),
    var(--bgpurp),
    var(--shinygooblue)1%)
    ;
}

.a12 {
  flex-basis: 100%;
  height: 2000px;
  opacity: .99;
  background-color: var(--grumbleberry);
  background-blend-mode: difference;
  background-image: 
  repeating-linear-gradient(
  60deg, 
  var(--shinygooblue),
  var(--gooblue) 15px,
  var(--shinygooblue) 15px, 
  var(--gooblue) 60px),
  
  repeating-linear-gradient(
  -60deg,
  var(--gooblue),
  var(--shinygooblue) 15px,
  var(--gooblue) 15px,
  var(--shinygooblue) 60px);
}

.a13 {
  flex-basis: 100%;
  height: 3000px;
  opacity: .9;
  background-color: var(--soapflower);
  background-blend-mode: hard-light;
  background-image:
  repeating-radial-gradient(
  circle at -20% 50%,
  var(--fakefern),
  var(--slimegreen) 20px,
  var(--fakefern) 20px,
  var(--slimegreen) 40px), 
  
  repeating-radial-gradient(
  circle at 60% 90%,
  var(--fakefern),
  var(--slimegreen) 20px,
  var(--fakefern) 20px,
  var(--slimegreen) 40px),
  
  repeating-radial-gradient(
  circle at 80% -10%,
  var(--fakefern),
  var(--slimegreen) 20px,
  var(--fakefern) 20px,
  var(--slimegreen) 40px);
}

footer {
  position: bottom;
  margins: auto;
  height: 300px;
  display: block;}