@font-face {
  font-family:OpenDyslexic;
  src: url(/assets/fonts/OpenDyslexic-Regular.otf);
  }
  
/* defining */

:root {
  /* blob goblin toy co web palette, use var(--x) to access */
  --soapflower: #DBB3FF;
  --shinygooblue: #3279F6;
  --electricfuchia: #D900DF;
  --isitgrey: #DDDBDD;
  --goblinseggblue: #00D9D9;
  --gooblue: #134FC5;
  --blaringblue: #0D0D8B;
  --bgpurp: #5D3184;
  --grumbleberry: #A1156C;
  --deepocean: #1E3A5E;
  --xxhotpink: #EE005F;
  --duskycove: #00445D;
  --slimegreen: #00C845;
  --fakefern: #007429;
  --lessdark: #211427;
  --darkest: #1F0023;
  --deadtech: #D9D900;
  --okayorange: #FF5F00;

  --main-bg:
    linear-gradient(
    to bottom, 
    var(--goblinseggblue)1%,
    var(--slimegreen)66%,
    var(--fakefern),
    var(--bgpurp)99%);
    
  --lavpillcontainerbg: 
    linear-gradient(to top, var(--fakefern), var(--slimegreen)69%, var(--isitgrey)99%);
    
  --pillbox-light: inset -2px 4px 5px;  /* specify color here */
  --pillbox-shadow: inset 2px -4px 8px;  /* specify color here */
  --pillbox-text-light: -1px 1px 2px;  /* specify color here */
  --pillbox-text-shadow: 1px -1px 2px;  /* specify color here */
}

body {
  background-image: repeating-radial-gradient(
    circle farthest-side at 50% 150%, 
    var(--goblinseggblue),
    var(--slimegreen),
    var(--fakefern),
    var(--gooblue),
    var(--shinygooblue),
    var(--goblinseggblue)15%), 
   linear-gradient(
     to bottom,
    var(--goblinseggblue) 20%,
    var(--shinygooblue),
    var(--gooblue) 69%,
    var(--fakefern)98%
    );
  opacity: 1;
  background-blend-mode: screen;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
  
}

.halls-of-chaos {
  margin: auto;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-areas:
    'header header header'
    'l-nav main r-nav'
    'footer footer footer'
}
header {
  background-position: top;
  top: 10px;
  position: sticky;
  grid-area: header;
  margin: auto;
  font-weight: bold;
  text-align: center;
  color: var(--lessdark);
  font-size: 24px;
  text-shadow: var(--pillbox-text-shadow) var(--soapflower), var(--pillbox-text-light) var(--deadtech);
  width: 220px;
  border: 8px solid transparent;
  border-image-source: /*url(/assets/borderbutts/18/CoolYellowPlatform.png)*/ url(https://the-goblin-hole.neocities.org/assets/borderbutts/18/CoolYellowPlatform.png);
  border-image-slice: 8 fill;
  border-image-repeat: repeat;
  padding: .5em;
  margin-top: 1em;
}

.screw {
  display: block;
background-image: /*url(/assets/borderbutts/18/CoolYellowPlatform.png)*/ url(https://the-goblin-hole.neocities.org/assets/borderbutts/18/CoolYellowPlatform.png);
  height: 18px;
  width: 18px;
  position: absolute;
  translate: -10px -10px;
}

.screw:nth-child(even) {
  translate: 210px -10px;
}

.eye {
  rotate: 19deg;
  height: 12px;
  width: 3px;
  background-color: #696969;
  mix-blend-mode: darken;
  margin: auto;
  translate: 0px 2px;
  box-shadow: var(--pillbox-text-shadow) var(--soapflower), var(--pillbox-text-light) var(--deadtech);
}


.eye-2 {
  rotate: 70deg;
}
.eye-3 {
  rotate: 97deg;
}
.eye-4 {
  rotate: -29deg;
}

.main {
  opacity: 1;
  mix-blend-mode: multiply;
  color: var(--soapflower);
  padding: 1.5em;
  padding-top: 0em;
  border: 20px solid transparent;
  box-sizing: border-box;
  border-inset: 5em;
  border-image-source: url(https://the-goblin-hole.neocities.org/assets/borderbutts/120/blue-screen.png);
  border-image-slice: 40 fill;
  border-image-repeat: repeat;
  margin: 5em 10em auto 10em;
  text-align: center;
 
}

.door-nav {
 margin: auto;
 display: flex;
 flex-flow: column;
  gap: 10em;

}

.left-door-nav {
  grid-area: l-nav;
  padding-left: 5em;
}
.right-door-nav {
  grid-area: r-nav;
  padding-right: 5em;
}
.door {
  border: 17px inset brown;
  border-bottom: 5px solid var(--lessdark);
  height: 360px;
  width: 230px;
  border-radius: 5px;
  box-shadow: var(--pillbox-shadow) var(--deepocean), var(--pillbox-light) var(--okayorange);
  background-color: brown;
  text-align: center;
  text-decoration: none;
}

.right-door-nav > .door {
    transform: skew(5deg, 15deg);
    rotate: 10deg;
 /* transform: skew(10deg, 25deg); */
}

.right-door-nav a:hover {
  transform: skew(-5deg, 5deg);
}

.left-door-nav > .door {
  transform: skew(-5deg, -15deg);
  rotate: -10deg;
}

.left-door-nav a:hover {
  transform: skew(5deg, -5deg);
}


a > .box {
  border-radius: 3px;
  position: relative;
  opacity: 1;
  translate: 0 40px;
  margin: auto;
  display: block;
  height: 120px;
  width: 120px;
  border: 3px solid transparent;
  border-image-source: url(/assets/borderbutts/9/lila-9.png);
  border-image-width: 3px;
  border-image-outset: -2px;
  border-image-slice: 3;
  border-image-repeat: repeat;
 background-color: var(--isitgrey);
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent 0% 9%,
      #69696920 10% 11%,
      transparent 12% 15%),
    repeating-linear-gradient(
     -45deg,
      transparent 0% 9%,
      #69696920 10% 11%,
      transparent 12% 15%);
  box-sizing: border-box;
  box-shadow: var(--pillbox-shadow) white, var(--pillbox-light) var(--deepocean);
  text-decoration: none;
  color: var(--goblinseggblue);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 80px;
  text-shadow: var(--pillbox-text-shadow) var(--soapflower), var(--pillbox-text-light) var(--blaringblue);

}

.doorknob {
  display: block;
  position: relative;
  height: 20px;
  width: 20px; 
  border-radius: 10px;
  
  background-color: var(--deadtech);
  float: right;
  translate: -20px 50px;
  box-shadow: var(--pillbox-shadow) var(--bgpurp), var(--pillbox-light) white;
}
a:hover .box {
  border-image-source: url(/assets/borderbutts/9/hot-pink.png);
}

a:hover {
  opacity: .99;
  color: var(--grumbleberry);
}


a:active {
  opacity: .99;
  color: var(--slimegreen);
  box-shadow: var(--pillbox-shadow) var(--deepocean), var(--pillbox-light) white;
}

a:visited {
  opacity: .99;
  background-blend-mode: darken;
  color: var(--shinygooblue);
}

footer {
  margin: 3em auto 5em auto;
  align: center;
  width: 80vw;
  grid-area: footer;
}

.pilldiv {
  height: 20px;
  width: 70%;
  margin: auto;
  background-color: var(--fakefern);
  border-radius: 10px;
  grid-area: div;
  box-shadow: var(--pillbox-shadow) var(--bgpurp), var(--pillbox-light) var(--slimegreen);
  }