/* Exported from components.ai */
:root {
  --cyandarkest: hsl(217.16, 100%, 14.79%);
  --cyandarker: hsl(203.08, 100%, 28.1%);
  --cyan: hsl(196.22, 100%, 45.69%);
  --cyanlighter: hsl(180, 100%, 80.37%);
  --cyanlightest: hsl(180, 100%, 96.34%);
  --yellowdarkest: hsl(59.08, 100%, 22.66%);
  --yellowdarker: hsl(56.76, 79.25%, 46.52%);
  --yellow: hsl(55.67, 100%, 64.71%);
  --yellowlighter: hsl(60, 100%, 82.22%);
  --yellowlightest: hsl(60, 100%, 95.67%);
  --magentadarkest: hsl(338.32, 100%, 16.27%);
  --magentadarker: hsl(330.86, 100%, 27.45%);
  --magenta: hsl(327.88, 69.11%, 51.76%);
  --magentalighter: hsl(312.68, 100%, 79.76%);
  --magentalightest: hsl(300, 100%, 96.51%);
  --keydarkest: hsl(340, 4.62%, 12.75%);
  --keydarker: hsl(330.08, 1.31%, 32.51%);
  --key: hsl(320.03, 1.33%, 54.14%);
  --keylighter: hsl(320.01, 3.51%, 82.97%);
  --keylightest: hsl(320, 7.09%, 91.64%);
  --keywhite: hsl(306.9, 100%, 99.34%);
  --font-size-0: 0.8rem;
  --font-size-1: 1rem;
  --font-size-2: 1.75rem;
  --font-size-3: 3.0625rem;
  --font-size-4: 5.359375rem;
  --font-size-5: 9.37890625rem;
  --space-0: 0.25rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: 8rem;
  --space-6: 16rem;
  --space-7: 32rem;
  --space-8: 64rem;
  --line-height-0: 1;
  --line-height-1: 1.25;
  --line-height-2: 1.5;
}
.cyandarkest {
  color: var(--cyandarkest);
}
.cyandarker {
  color: var(--cyandarker);
}
.cyan {
  color: var(--cyan);
}
.cyanlighter {
  color: var(--cyanlighter);
}
.cyanlightest  {
  color: var(--cyanlightest);
}
.yellowdarkest {
  color: var(--yellowdarkest);
}
.yellowdarker {
  color: var(--yellowdarker);
}
.yellow {
  color: var(--yellow);
}
.yellowlighter {
  color: var(--yellowlighter);
}
.yellowlightest {
  color: var(--yellowlightest);
}
.magentadarkest {
  color: var(--magentadarkest);
}
.magentadarker {
  color: var(--magentadarker);
}
.magenta {
  color: var(--magenta);
}
.magentalighter {
  color: var(--magentalighter);
}
.magentalightest {
  color: var(--magentalightest);
}
.keydarkest {
  color: var(--keydarkest);
}
.keydarker {
  color: var(--keydarker);
}
.key {
  color: var(--key);
}
.keylighter {
  color: var(--keylighter);
}
.keylightest {
  color: var(--keylightest);
}
.keywhite {
  color: var(--keywhite);
}
.backgroundcolor-cyandarkest {
  background-color: var(--cyandarkest);
}
.backgroundcolor-cyandarker {
  background-color: var(--cyandarker);
}
.backgroundcolor-cyan {
  background-color: var(--cyan);
}
.backgroundcolor-cyanlighter {
  background-color: var(--cyanlighter);
}
.backgroundcolor-cyanlightest  {
  background-color: var(--cyanlightest);
}
.backgroundcolor-yellowdarkest {
  background-color: var(--yellowdarkest);
}
.backgroundcolor-yellowdarker {
  background-color: var(--yellowdarker);
}
.backgroundcolor-yellow {
  background-color: var(--yellow);
}
.backgroundcolor-yellowlighter {
  background-color: var(--yellowlighter);
}
.backgroundcolor-yellowlightest {
  background-color: var(--yellowlightest);
}
.backgroundcolor-magentadarkest {
  background-color: var(--magentadarkest);
}
.backgroundcolor-magentadarker {
  background-color: var(--magentadarker);
}
.backgroundcolor-magenta {
  background-color: var(--magenta);
}
.backgroundcolor-magentalighter {
  background-color: var(--magentalighter);
}
.backgroundcolor-magentalightest {
  background-color: var(--magentalightest);
}
.backgroundcolor-keydarkest {
  background-color: var(--keydarkest);
}
.backgroundcolor-keydarker {
  background-color: var(--keydarker);
}
.backgroundcolor-key {
  background-color: var(--key);
}
.backgroundcolor-keylighter {
  background-color: var(--keylighter);
}
.backgroundcolor-keylightest {
  background-color: var(--keylightest);
}
.backgroundcolor-keywhite {
  background-color: var(--keywhite);
}
.bordercolor-cyandarkest {
  border-color: var(--cyandarkest);
}
.bordercolor-cyandarker {
  border-color: var(--cyandarker);
}
.bordercolor-cyan {
  border-color: var(--cyan);
}
.bordercolor-cyanlighter {
  border-color: var(--cyanlighter);
}
.bordercolor-cyanlightest  {
  border-color: var(--cyanlightest);
}
.bordercolor-yellowdarkest {
  border-color: var(--yellowdarkest);
}
.bordercolor-yellowdarker {
  border-color: var(--yellowdarker);
}
.bordercolor-yellow {
  border-color: var(--yellow);
}
.bordercolor-yellowlighter {
  border-color: var(--yellowlighter);
}
.bordercolor-yellowlightest {
  border-color: var(--yellowlightest);
}
.bordercolor-magentadarkest {
  border-color: var(--magentadarkest);
}
.bordercolor-magentadarker {
  border-color: var(--magentadarker);
}
.bordercolor-magenta {
  border-color: var(--magenta);
}
.bordercolor-magentalighter {
  border-color: var(--magentalighter);
}
.bordercolor-magentalightest {
  border-color: var(--magentalightest);
}
.bordercolor-keydarkest {
  border-color: var(--keydarkest);
}
.bordercolor-keydarker {
  border-color: var(--keydarker);
}
.bordercolor-key {
  border-color: var(--key);
}
.bordercolor-keylighter {
  border-color: var(--keylighter);
}
.bordercolor-keylightest {
  border-color: var(--keylightest);
}
.bordercolor-keywhite {
  border-color: var(--keywhite);
}
/* end export */

html {
  cursor: url('../img/cursor-pointer.svg'), auto;
}
a {
  cursor: url('../img/cursor-link.svg') 1 47, pointer;
  color: var(--keydarkest);
  transition: none;
}
a:visited {
   text-decoration-color: var(--magenta);
}
a:nth-of-type(odd), li:nth-of-type(odd) a {
  text-decoration-color: var(--cyan);
}
a:nth-of-type(odd):visited, li:nth-of-type(odd) a:visited {
  text-decoration-color: var(--keylighter);
}
a:nth-of-type(even), li:nth-of-type(even) a {
  text-decoration-color: var(--magenta);
}
a:nth-of-type(even):visited, li:nth-of-type(even) a:visited {
  text-decoration-color: var(--key);
}
a:nth-of-type(odd):hover, li:nth-of-type(odd):hover a {
  color: var(--cyan);
  transition: none;  
}
a:nth-of-type(even):hover, li:nth-of-type(even):hover a {
  color: var(--magenta);
  transition: none;  
}
a:focus {
   color: var(--keydarkest);
   transition: none;
}
.textshadow-white {
  text-shadow: 0px 0px 2px white, 0px 0px 4px white;
}
.height-90vh {
  height: 90vh;
}
.draggable {
  cursor: url('../img/cursor-pickup.svg') 18 47, move;
}
.draggablelink, .draggabletext {
  padding: 0.25em;
  color: black;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
}
.borderdottedcustom {
  border: 10px dashed var(--cyan);
}
.width-xxxxlarge {
  width: 32rem;
}
#events {
  transform: rotate(15deg);
  top: 35%; 
  left: 65%;
}
#collection {
  transform: rotate(-15deg);
  top: 45%; 
  left: 15%;
}
#learning {
  transform: rotate(5deg);
  top: 20%; 
  left: 50%;
}
#publication {
  transform: rotate(-10deg);
  top: 25%; 
  left: 20%;
}
#about {
  transform: rotate(20deg);
  top: 30%; 
  left: 35%;
}
#textbox-about {
  transform: rotate(-5deg);
  top: 15%; 
  left: 5%;  
}
#shop {
  transform: rotate(15deg);
  top: 40%; 
  left: 55%;  
}
#item99 {
  bottom: 0;
}
.rotatereset, .ui-draggable-dragging {
  transform: rotate(0) !important;
}

/* CSS TRICKS CSS-ONLY HAMBURGER */
/* The hamburger button hidden inside an input element */
#menuToggle input {
  opacity: 0; /* hide this */ 
  -webkit-touch-callout: none;
}
/*
 * Use absolute positioning to place the menu off-screen
 */
#menu {
  /* Hide the menu off-screen to the left */
  left: -100%;
  -webkit-transition: left 0.3s ease;
  -o-transition: left 0.3s ease;
  transition: left 0.3s ease; 
}
/*
 * Slide the menu in from left when the input is checked
 */
#menuToggle input:checked ~ ul {
  left: 0;
}
@media screen and (min-width:30em) {
  .draggablelink {
    transform: scaleX(0.95);
  }
  .height-90vh-ns {
    height: 90vh;
  }
  .width-xxxxlarge-ns {
    width: 32rem;
  }
}