/******************/TRANSITION REQUIREMENTS/******************/


html,ol, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
.clear {
  width: 100%;
   height: 1px;
   clear: both;
    display: block;
     overflow: hidden;
   }

a,button{
   text-decoration:none;
   font-family: space_monoregular;
  }

body, html {
  height:100%;
  width:100%;
  font-size: 100%;
  padding: 0;
  margin: 0;
  color: #fff;
  background: black;
  overflow: hidden;
  font-family: arial;
}

.myfkpage{
  text-align: center;
  transform-style: preserve-3d;

}

.myfkpage> li.white{
    transform-style: preserve-3d;
  background-color: black;

}
.myfkpage> li.black{
    transform-style: preserve-3d;
  background-color: none;

}
/******************/CUSTOM FONTS/******************/
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 30, 2020 */

@font-face {
    font-family: 'arialregular';
    src: url('../fonts/arial-webfont.woff2') format('woff2'),
         url('../fonts/arial-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'arialterrible';
    src: url('../fonts/arial-terrible-webfont.woff2') format('woff2'),
         url('../fonts/arial-terrible-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'space_monoregular';
    src: url('../fonts/spacemono-regular-webfont.woff2') format('woff2'),
         url('../fonts/spacemono-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* NOTE: DESIGN RULES */

div.main{
  margin:auto;
  margin-top:2.5%;
  width:90%;
  height:90%;
  scroll-behavior: smooth;
  overflow-y: scroll;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
div.main::-webkit-scrollbar{
 display: none;
}
.arial{
  background-color: none;
  font-family: Arial;
  font-size:1em;
  letter-spacing:-0.05em;
  line-height:1;


}
.arial.scaleDown{
  background-color: none;
  font-size:0.5em;

}
.arialTerrible{
  font-family: arialterrible;
  font-size:0.5em;
  letter-spacing:-0.1em;
  line-height:2;
  background-color: none;

}
.arialTerrible.scaleDown{
  font-size:0.25em;
  background-color: none;
}
div.main>div.splash>span{
  font-size: 10vw;
  transition: font-size 1s;
  background-color: none;
}
/*HIER IST DIE GROESSE VON DER TITELSCHRIFT WENN SIE SICH KLEINMACHT*/
div.main>div.splash>span.scaleDown{
  font-size: 3vw;
}
div.main>div.splash>span>p{
  display: inline;
  padding: 0;
  margin: 0;
  /*transition: font-size 0.5s;*/
}

/*einstellungen für die the biennial schriftzug*/
div.main>div.splash{
  background-color: none;
  padding-right: 15%;
  padding-left: 15%;
  /*width:60%;*/
  /*height:100%;*/
  overflow: hidden;
  margin: auto;
  margin-top: 7%;
  margin-bottom: 2em;
  text-align: left;
  display: block;
  /*position: fixed;*/
  z-index: 0;
  transition: all 0.5s;
  transition-timing-function: ease-in;
}
li.black div.splash{
  background-color: none;
  margin-top: 0;
}
#about>div.splash{
  margin-top: -2.5%;
  margin-bottom: 5em;
  font-size: 10vw;
  transition: font-size 1s;
  background-color: none;
}

#about>div.splash p{
  display: inline;
  padding: 0;
  margin: 0;
}
#about>div.splash.scaleDown{
  font-size: 5vw!important;
  margin-bottom: 2.5vh;
}
div.main>div.splash.scaleDown{
/*  background-color: rgba(255,0,0,0.5)!important;*/
  height:auto;
}
/* GENERIC SECTION PROPERTIES */
section{
  padding-right: 15%;
  padding-left: 15%;
  display: block;
  height:auto;
  margin: auto;
}
section>div.body{
  /*background-color: none!important;*/
  /*border: solid 2px;*/
  border-color: red;
  width:100%;
  height:auto;
  margin-bottom: 5vw;
}
  section>div.body>p{
    border: solid 1px;
    border-color: darkgrey;
    font-family: arialTerrible;
    text-align: left;
    font-size: 1vw;
    line-height: 2.6vw;

  }
    section>div.body>p.alt{
	  /*border: solid 2px;*/
      /*border-color: red;*/
      font-family:arial;
      text-align: left;
      font-size: 2vw;
      line-height: 2vw;
    }


  section>div.title{
    text-align: left;
    /*border: solid 2px;
    /*border-left: solid 2px;
    /border-right: solid 2px;
    /border-color: black;*/
    background-color:none;
    padding: 0;
    display: block;
    width:60vw;
    /* height: calc(2vw*2.8); */
    height:fit-content;
  }

    .black section>div.title{
          border-color: white;
    }
  section>div.title>div{
    margin: auto;
    display: block;
    width:fit-content;
    background-color: none;
  }
    section>div.title>div>h2{
    font-size: 2vw;
    font-family: arialterrible;
    display:block;
    /* position:relative; */
    /* vertical-align:super; */
    text-align: center;
    width: auto;
    text-shadow: 0px -3px rgb(230,230,230);
    transform: translate(0,0);
    background-color: none;
    padding: 0!important;
    margin: 0;
  /*
    border-top: solid 2px;
    border-color: black;
    border-bottom: solid 2px;*/
  }

/* SPECIFIED SECTION PROPERTIES */
section.missionStatement{
  background-color: none;

    font-family: arialTerrible;
    text-align: left;
    font-size: 1vw;
    line-height: 2.6vw;


  /*margin-top: 50%;*/
}
section.generatedStory{
  background-color: none;
}
section.generatedStory>div.body{
    padding-top: 1vw;
}
section.general{
  background-color: none;
}
section.general>h2{
    border-color: white;
}
section.general>div.body{
    padding-top: 1vw;
}
#genAbout{
  padding-top:0em;
}
section.general>div.body>a{
    background-color: none;
    text-align:left;
    display: block;
    font-size:1vw; /*2vw*/
    padding-top: 0.5vw;
    text-decoration: none;
    color: white;
    font-family: arialTerrible;
}

section.general>div.body>a:hover{
  text-decoration: underline;
  cursor: pointer;

}

section.smallPrint{
  background-color: none;
  margin-bottom: 2vw;
  padding: 0;
}
section.smallPrint>div.logo{
  border: solid 2px none;
  width:14vw;
  height:10vw;
  margin-right: 2vw;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;

}
div#logo1{ background-image: url('../Logos/liverpool.png'); filter: invert(100%);margin-left: 2.5%}
div#logo2{ background-image: url('../Logos/federalInvert.png');}
div#logo3{ background-image: url('../Logos/stadtwienInvert.png');}
div#logo4{ background-image: url('../Logos/whitney.png');  filter: invert(100%); }
div#logo5{ background-image: url('../Logos/johnmoores.png');  margin-right: 0; filter: invert(100%); }

section.smallPrint>a{
  background-color: none;
  font-size:1vw;
  font-family: arialTerrible;
  text-decoration: none;
  background-color: none;
  color:white;
  position: relative;
  display: block;
  width:fit-content;
  margin-left: 4%;

}
section.smallPrint>a span{
  display: inline-block;
  background-color: none;
  border-bottom: solid 2px white;
}

section.smallPrint>a:hover span{
  background-color: none;
  cursor: pointer;
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.opening{
  background-image: url('../img/stomach1.jpg');
  background-position: center;
  background-repeat: no-repeat;
  height:100%;
  width:100%;
  left:0;
  top:0;
  position: absolute;
  z-index: 3;
  display: block;
}

.errorDisplay{
  background-position: center;
  background-repeat: no-repeat;
  height:100%;
  width:100%;
  left:0;
  top:0;
  position: absolute;
  z-index: 3;
  display: none;
  animation-name:shakeX;
  animation-duration: 0.25s; /* don't forget to set a duration! */
  animation-iteration-count: 2;
  background-color: none;
}
.errorDisplay.a{
  background-image: url('../img/CommandIcon2.png');
}
.errorDisplay.b{
  background-image: url('../img/CommandIcon1.png');
}

.cog,.home{
  background-image:url('../img/Cog.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width:7%;
  height:7%;
  position: fixed;
  background-color: none;
  right:7vw;
  top:5.5vh;
  z-index: 1;
  transform: rotate(0deg);
  transition: 0.5s;
}
.cog:hover{
  cursor:pointer;
  transform: rotate(30deg);
  cursor: pointer;
}

.home:hover{
  cursor:pointer;
  transform: rotate(30deg);
  cursor: pointer;
}
.home{
  background-image:url('../img/whiteX.png');
  display: none;
}
.info{
  background-image:url('../img/info.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width:7%;
  height:7%;
  position: fixed;
  background-color: none;
  right:7vw;
  top:10vh;
  z-index: 1;
  transform: rotate(0deg);
  transition: 0.5s;
  display: none;
}
.info:hover{
  cursor:pointer;
  transform: rotate(30deg);
}
li#backend>div.cog{
  background-image:url('../img/X.png');
  width:5%;
  height:5%;
  top:6.5vh;
}
li#backend>div.cog:hover{
  transform: rotate(-15deg);
}
.loadingBar{
  width:40vw;
  height:3vh;
  position:fixed;
  display: block;
  background-color: black;
  z-index: 2;
  padding: 1px;
  overflow: hidden;
  transition: all 0.5s;
}
li#backend>.loadingBar{
  background-color: #00FF02;

}
.loadingBar>div{
  height:3vh;
  width:1%;
  background-color: rgb(230,230,230);
  transition: all 0.5s;
}
.loadingBar:hover{
    cursor: pointer;
    background-color: rgba(84, 87, 86);
}
.myfkpage> li.black>.loadingBar{
  background-color:  rgb(230,230,230);
}
.myfkpage> li.black>.loadingBar>div{
  background-color: black;
}
.myfkpage> li.black>.loadingBar:hover{
  background-color:  rgba(150,150,150);
}

/* ALLE INFOS FÜR DIE LOADINGBARS */
/* ALLE INFOS FÜR DIE LOADINGBARS */
/* ALLE INFOS FÜR DIE LOADINGBARS */

.loadingBar#lodapp3{
  top:2.4vw;
  left:9.5vw;
}
.loadingBar#lodapp2{ /*RIGHT BAR*/
  top:30vh;
  right:-14.2vw;
  transform:rotate(90deg) scaleX(0.65);
}
.loadingBar#lodapp1{ /*LEFT BAR*/
  bottom:30vh;
  left:-14.2vw;
  transform: rotate(90deg) scaleX(0.65);
}
.loadingBar#lodapp0{
  bottom:5.5vh;
  right:9.5vw;
}

.loadingBar#lodabout4{
  top:4.5vh;
  left:9.5vw;
}
.loadingBar#lodabout3{ /*RIGHT BAR*/
  top:30vh;
  right:-14.2vw;
  transform:rotate(90deg) scaleX(0.65);
}
.loadingBar#lodabout2{/*LEFT BAR*/
  bottom:30vh;
  left:-14.2vw;
  transform: rotate(90deg) scaleX(0.65);
}
.loadingBar#lodabout1{
  bottom:5.5vh;
  right:9.5vw;
}

.loadingBar#lodback4{
  top:4.5vh;
  left:9.5vw;
}
.loadingBar#lodback3{ /*RIGHT BAR*/
  top:30vh;
  right:-14.2vw;
  transform:rotate(90deg) scaleX(0.65);
}
.loadingBar#lodback2{/*LEFT BAR*/
  bottom:30vh;
  left:-14.2vw;
  transform: rotate(90deg) scaleX(0.65);
}
.loadingBar#lodback1{
  bottom:5.5vh;
  right:9.5vw;
}

#scrolltarget{
  background-color: none;
  width:100px;
  height:20px;
  display:block;

}
.myfkpage> li.white>div.main{
  background-color: rgb(230,230,230);
  color:black;
}
.myfkpage> li.black>div.main{
  background-color: black;
  color: rgb(230,230,230);
  padding-top: 10vh;
  height:80%;
}

.diagramContainer{
  overflow: hidden;
  margin: auto;
  width:100%;
  height:100%;

}
#myDiagramDiv{
width:100vw;
height:120vh;
top:-15vh;
z-index: 0;
cursor: default;
overflow: hidden; /* Hide scrollbars */
}
li#backend{
  background-color: #00FF02;
}
/* NOTE: SCROLL BAR */

/* NOTE: BUTTONS */
button{background: none;
   border-radius: none;
   padding: 5px 10px;
    border:none;
    font-size: 1.5em;
    text-decoration: none;
    text-align: center;
    /*transition-property:all;*/
    /*transition-duration: 1s;*/
    /*transition-timing-function: cubic-bezier(0.7, 1.57, 0.5, 0.79);*/
  }

  button:hover{
   border-right: 2px solid black;
    cursor: pointer;
  }
  button:active{
      border-style:none!important;
      color:black;
  }
  button:focus{
    outline: none;
  }
  button:visited{
      border: none!important;
      text-decoration: none!important;
  }

  .myfkpage> li.white>.navBar>button{
    color:black;
  }
  .myfkpage> li.black>div.navBar>button{
    color:white;
  }
  li.black>div.navBar>button:hover{
    border-right: 2px solid white;
  }
  div.navBar{
    background-color: none;
    position: fixed;
    right:6.5vw;
    bottom:2vh;
    width:3em;
    height:20vh;
    overflow: visible;
    padding:0;
    z-index: 1;
  }
div.navBar.top{
    top:8vh;
    left:5.5vw;
}
  div.navBar>button{
      margin-bottom: 0;
      margin-left:0;
      background-color:none;
      text-align: left;
      padding: 0px;
      min-height: 50%;
      height:fit-content;
      overflow: visible;
      background-color: none;
  }
div.navBar>button>p{
      writing-mode: vertical-lr!important;
      background-color: none;
      text-align: center;
      margin: 0;
      transform: scale(-1,-1);
}