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

    
    /* styling */
body {
  background: /*url("https://the-goblin-hole.neocities.org/assets/bgs/BG-candy-camouflage-tileable-600p.png")*/url("/assets/bgs/BG-candy-camouflage-tileable-600p.png") repeat fixed;
}

    
header {
    margin: auto;
    margin-bottom: 3em;
    height: 50px;
    top: 20px;
    position: sticky;
    max-width: fit-content;
    font-family: "OpenDyslexic";
    font-size: 2em;
    text-align: center;
    color: var(--darkest);
    border-radius: 18px;
    padding: 0em .5em .5em .5em;
    border-image-source: /*url(https://the-goblin-hole.neocities.org/assets/borderbutts/18/FuchiaRoundButton.png)*/url(/assets/borderbutts/18/FuchiaRoundButton.png);
    border-image-slice: 8 8 8 8 fill;
    border-image-repeat: repeat;
    border-style: solid;
    border-color: transparent;
    border-width: 8px;
    box-shadow: var(--pillbox-light) var(--fekefern), var(--pillbox-shadow) var(--deepocean);
    text-shadow:  var(--pillbox-text-light) var(--lessdark), var(--pillbox-text-light) var(--lessdark);   
    mix-blend-mode: luminosity;
    }

.page {
 margin: auto;
  width: 100vw;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}
    
.container {
  border: 9px solid transparent;
  border-image-source: /*url(https://the-goblin-hole.neocities.org/assets/borderbutts/18/BlueRoundRing.png); */url(/assets/borderbutts/18/BlueRoundRing.png);
  border-image-slice: 8;
  border-image-repeat: repeat;
  margin: auto;
  padding: .1em;
 flex-basis: 15%;
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.button {
  width: 240px;
  margin: auto;
  text-align: center;
  border: 8px solid transparent;
  border-image-slice: 7 7 7 7 fill;
  border-image-repeat: stretch;
  border-image-source: /*url(https://the-goblin-hole.neocities.org/assets/borderbutts/18/OrangeRoundButton.png)*/url(/assets/borderbutts/18/OrangeRoundButton.png);
    
}

a {
  text-decoration: none;
  opacity: .95;
  color: var(--grumbleberry);
  font-family: OpenDyslexic;
  font-weight: bold;
  text-shadow: var(--pillbox-text-shadow) var(--deadtech), var(--pillbox-text-light) var(--deadtech);
}

a:hover {
  color: var(--darkest);
  border-image-slice: 8 8 8 8 fill;
  border-image-repeat: repeat;
  border-image-source: /*url(https://the-goblin-hole.neocities.org/assets/borderbutts/18/FuchiaRoundButton.png)*/url(/assets/borderbutts/18/FuchiaRoundButton.png);
  text-shadow: var(--pillbox-text-shadow) var(--bgpurp), var(--pillbox-text-light) var(--soapflower);
  mix-blend-mode: luminosity;
}

a:active {
  color: var(--fakefern);
  border-image-slice: 8 8 8 8 fill;
  border-image-repeat: repeat;
  border-image-source: /*url(https://the-goblin-hole.neocities.org/assets/borderbutts/18/GreenRoundButton.png)*/url(/assets/borderbutts/18/GreenRoundButton.png);
}

a:visited {
  opacity: .95;
  color: var(--blaringblue); 
  border-image-source: /*url(https://the-goblin-hole.neocities.org/assets/borderbutts/18/GreenRoundButton.png)*/url(/assets/borderbutts/18/GreenRoundButton.png);
   mix-blend-mode: luminosity;
}


.mains {
  flex-basis: 60%;
  margin: auto;
}

.feature {
  size: fit-content;
  border: 8px solid transparent;
  border-image-source: /*url(https://the-goblin-hole.neocities.org/assets/borderbutts/18/GreenRoundButton.png)*/url(/assets/borderbutts/18/GreenRoundButton.png);
  border-image-slice: 8 fill;
  border-image-repeat: repeat;
 padding: 1em;
  opacity: .95;
}

footer {
  flex-basis: 100%;
  width: 90vw;
  height: 40vh;
  margin: auto;
  margin-top: 5em;
  align-items: center;
  display: grid;
  grid-template-areas:
    'div'
    'layer1'
}

.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);
  }

.foot-logo {
  margin: auto;
  grid-area: layer1;
}