body {
    padding:0;
    margin:0;
    background-color: #000;
    color: #fff;
}
@import url('https://fonts.googleapis.com/css?family=IM+Fell+English+SC');

:root {
  font-size:4vw;
}

html,body {min-height:100vh}
body {
  display:flex table-column;
  flex-flow:column nowrap;
}

/* 
Counters 
*/

.menu ol { 
  counter-reset: menu;
}



/*
Regular menu items
*/

.menu-item a {
  display:flex;
  justify-content:flex-start; /*shrink towards text*/
  color:currentColor;
  text-decoration:none;
  padding:0.3rem 0; /* avoid flickin' */
  order:0;
}

.menu-item a::before { /* dots */
  content:"";
  display:inline-block;
  border-bottom:1px dotted black;
  position:relative; top:-3px;
  flex:1 1 auto;
  margin:0 1rem;
  order:1;
}

.menu > ol > .menu-item > a::after { /* item ids */
  
  counter-increment:menu;
  content:counters(menu, ".");
  flex:0 0 auto;
  order:2;
  transform:rotate(30deg)scale(1.2);
  text-decoration:underline;
}



/* 
Sub menu & items
*/

.sub-menu {
  font-size:1.6rem;
  font-weight:normal;
}

.sub-menu > li > a {
  text-indent:0ch; /*
    Chrome indentS the "dots" elm, i.e. it counts pseudo-elm.
    FF and Edge indents first non pseudo-elm. 
    Turn it off for consistency.
  */
  padding:0.5rem 0 0.5rem 2ch;
  margin:0;
}



/*
Main menu
*/

.menu {
  padding: 6vw;
  width:20vw;
  min-width:15ch;
  display:flex;
  flex-flow:column nowrap;
  font:bold 2.4rem/1 'IM Fell English SC', serif;
  position:relative;
}

.menu::before {
  content:"/";
  align-self:center;
  transform:rotate(30deg);
  margin-bottom:1rem;
}

.menu::after {
  content:"/";
  align-self:center;
  transform:rotate(30deg);
  margin-top:1rem;
  
}



/*
Fx
*/

.menu { transition:transform 0.3s; }
.menu:hover { transform:rotate(0); }

.menu::before { transition:transform 0.5s; }
.menu:hover::before { transform:rotate(0); content:"__"; }
.menu::after { transition:transform 0.5s; }
.menu:hover::after { transform:rotate(0); content:"__"; }

.menu .menu-item a::after { transition:transform 0.3s }
.menu:hover .menu-item a::after { transform:rotate(0) }

.menu:hover > ol > .menu-item { opacity:0.3; }

.menu-item:hover {
  transition:background-color 0.3s;
  background:rgba(255,255,0,0.15);
  opacity:1 !important;
}

.menu-item:hover a::after {
  text-decoration:none;
}

.menu-item:hover > a::before {
  transition:flex-grow 0.3s;
  width:0; flex-grow:0;
  transform-origin:center bottom;
}

/*
Collapse
*/

.sub-menu > .menu-item {
  max-height:1ch;
  transform:scaleY(0.1);
  transform-origin:center top;
  transition:transform 0.2s, max-height 0.5s;
}

.menu:hover .sub-menu .menu-item {
  max-height:10em;
  transform:scaleY(1);
}


.introClass {
     @supports (background-clip: text) or (-webkit-background-clip: text) {
    background-image: 
      url("./img/blueBackground.jpg");
  min-height: 35vh;
  display: flex;
  justify-content: center;
    background-size: 110% auto;
    background-position: center;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 900;
    font-size: 6vw;
}}

.introText {
    background: #000405;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Work Sans', sans-serif;
  font-weight: 900;
  font-size: 1vw;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}
.banner {
  display:flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
}

.banner .content .title {
  font-family: 'Hallowed Grounds';
  font-size: 10vh;
  padding: 30px;
}

.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url(./img/bgImage.png);
  background-size: cover;
  background-position: center;
  z-index: -1;
  mask-image: url(./img/bgimage2.gif);
  mask-size: cover;
  mask-position: center;
}

.banner .content .title img {
  max-width: 60vw; /* Adjust this value as needed */
  height: auto;
}

.collapsible {
  
  background-color: black;
  color: #1F51FF;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 16px;
}

.authorIntro {
   display: none; /* Initially hide the content */
     @supports (background-clip: text) or (-webkit-background-clip: text) {
    background-image: 
      url("./img/blueBackground2.jpg");
  min-height: 35vh;
  display: flex;
  justify-content: center;
    background-size: 110% auto;
    background-position: center;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 900;
    font-size: 6vw;
}}

.authorBio {
  display: none; /* Initially hide the content */
     @supports (background-clip: text) or (-webkit-background-clip: text) {
    background-image: 
      url("./img/blueBackground.jpg");
  min-height: 35vh;
  display: flex;
  justify-content: center;
    background-size: 110% auto;
    background-position: center;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 900;
    font-size: 6vw;
}}