/**
 * Colors for E-Reader 
 */
:root {
  --pot-pourri: #f5e6e2;
  --lavender: #a59be1;
  --lavender-dark: #9080d0;
  --gigas: #3d3da0;
  --steel-gray: #201f2c;
  --minsk: #2d2d76;
  --white: #ffffff;
  --near-black: #202020;
  --scrollback: #e0d0cc;
  --scampi: #635bab;
  --crystal: #af0042;
} 

/**
 * Load fonts
 */
@font-face {
	font-family: Steinschrift;
 	src: url("/fonts/Steinschrift.eot")
 	src: url("/fonts/Steinschrift.eot?#iefix") format("embedded-opentype"); 
}

@font-face {
	font-family: Steinschrift;
   src: url("/fonts/Steinschrift.woff") format("woff"),
	src: url("/fonts/Steinschrift.ttf")
}

@font-face {
	font-family: Palatino;
 	src: url("/fonts/Josefine.eot")
 	src: url("/fonts/Josefine.eot?#iefix") format("embedded-opentype"); 
}

@font-face {
	font-family: Palatino;
	src: url("/fonts/Josefine.ttf")
}

@font-face {
	font-family: "FiraSans";
	src: url("/fonts/FiraSans.ttf")
}

@font-face {
	font-family: SSB;
 	src: url("/fonts/StreetSemiBold.eot")
 	src: url("/fonts/StreetSemiBold.eot?#iefix") format("embedded-opentype"); 
}

@font-face {
	font-family: SSB;
	src: url("/fonts/StreetSemiBold.ttf")
}

/**
 * Page styles
 */
body {
    overflow: hidden;
    margin:0 auto;
    padding:0;
    font-size: 32px;
    overflow:hidden;
    font-family: FiraSans;
    font-weight: normal;
    color: var(--near-black);
    background-color:var(--pot-pourri);
}

@media (min-width: 1200px) {
    .container{
        max-width: 1200px;
    }
}

/**
 * The books
 */
#books {
    position: absolute; 
    bottom: 0px;
    right: 20px;
    width: 200px;
    height: 170px;
    background-position: left bottom;
    background-image: url("/images/Books.png");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 100;
    cursor: pointer;
}

/**
 * Impressum
 */
.imprint {
    font-size: 14px;
    line-height: 16px;
    color: #6c6c6c;
}

/**
 * Settings
 */
.settings {
    min-height: 325px;
    height: 325px;  
    position: relative;
    z-index: 30;
    background-position: left bottom;
    background-image: url("/images/Settings.png");
    background-repeat: no-repeat;
    background-size: cover;

}

.settingsContainer {
    margin-top:-330px;
}

/**
 * E-Reader Small Waves
 */
.smallwaves {
    min-height: 170px;
    height: 170px;  
    position: relative;
    z-index: 30;
    background-position: left bottom;
    background-image: url("/images/Smallwave.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.readerContainer {
    margin-top:-175px;
}

.OvalNav {
    z-index: 2;
    color: var(--lavender);
    font-size: 1.7rem;
    padding-left: 10px;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px 20px;
    background-color: var(--gigas);
}

.OvalMiddle {
    position: absolute;
    top: 20px; 
    width: 60px;
    height: 60px;
    z-index: 2;
    border-radius: 30px 30px;
    background-color: var(--gigas);
}

.OvalMini {
    position: absolute;
    width: 20px;
    z-index: 1;
    height: 20px;
    border-radius: 10px 10px;
    background-color: var(--gigas);
}

.OvalMicro {
    z-index: 1;
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 6px 6px;
    background-color: var(--gigas);
}

/**
 * E-Reader Lighthouse
 */
.lighthouse_base {
    position: relative;
    z-index: 31;
    min-height: 70px;
    max-height: 70px;
}

@media only screen and (max-width: 400px) {
  .lighthouse_base {
      min-height: 46px;
      max-height: 46px;
  }
}

.lighthouse_admin {
    position: relative;
    z-index: 31;
    min-height: 80px;
    max-height: 80px;
}

.lighthouse_work {
    position: relative;
    z-index: 31;
}

.lighthouse_settings {
    display: none;
    position: relative;
    z-index: 31;
}

.lighthouse_control {
    position: relative;
    z-index: 3;
}

.innerContainer {
    margin-top:-405px;
}

.innerContainerFull {
    margin-top:-505px;
}

.settingsView,
.readerView {
    display: none;
}

.scene {
    margin: 30px auto;
    position: relative;
    width: 320px; 
    height: 470px; 
    perspective: 1000px;
}

@media only screen and (max-width: 400px) {
  .scene {
      margin: 15px auto;
      width: 275px;
      height: 425px;
  }
}

.carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateZ(-2526px);
    transform-style: preserve-3d;
    transition: transform 1s;
}

.carousel__cell {
    position: absolute;
/*
    width: 300px;
    height: 450px;
*/
    width:80%; height:80%;
    left: 10px;
    top: 10px;
    /*border: 2px solid #ffffff;*/
    transition: transform 1s, opacity 1s;
    transform: translateZ(2526px);
    background: hsla(100%, 100%, 100%, 1.0);
    background-image: url("/images/book.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.login {
    display: none;
    position: absolute;
    top: -30px;
    width: 100%;
    left: 0px;
    height: 0px;
    border: 2px solid var(--pot-pourri);
    border-radius: 8px 8px;
    background-color: var(--gigas);
}

.logindata {
    display: none;
    position: absolute;
    top: -15px;
    width: 100%;
    height: 40px;
    border: 1px solid var(--pot-pourri);
    border-radius: 8px 8px;
    background-color: var(--gigas);
}

.logindata small {
    font-size: 13px;
    line-height: 40px;
}

@media only screen and (max-width: 900px) {
  .logindata small {
    font-size: 11px;
  }
  .login {
    left: 0;
  }
}

@media only screen and (max-width: 400px) {
  .logindata small {
    font-size: 9px;
  }
  .login {
    left: 0;
  }
}


.boardIMG {
    position: absolute;
    border-radius: 25px 25px;
    opacity: .75;
    top: 50px;
    left: 15%; 
    text-align: center;
    width: 80%;
    transform: rotate(-2deg);
}

.boardIMG img {
    width: 80%;
}

.boardID {
    position: absolute;
    border-radius: 25px 25px;
    opacity: .75;
    top: 80px;
    left: 20%; 
    text-align: center;
    font-size: 24px;
    font-family: STB;
    font-weight: bold;
    width: 70%;
    transform: rotate(-2deg);
}

.boardID span {
    text-transform: uppercase;
    color: var(--pot-pourri);
    filter: contrast(200%);
}

.photoholder {
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.photoholder img {
    opacity: .9;
    border: 1px solid #ffffff;
}

#selector {
    /*position:absolute;*/
    overflow:auto;
    z-index: 10;
    left: 0;
    height: 100%;
}

.lighthouse {
    min-height: 400px;
    height: 400px;  
    position: relative;
    z-index: 3;
    background-position: left bottom;
    background-image: url("/images/Lighthouse.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.lighthousefull {
    min-height: 500px;
    height: 500px;  
    position: relative;
    z-index: 3;
    background-position: left bottom;
    background-image: url("/images/FullLighthouse.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.lighthousefullplain {
    min-height: 500px;
    height: 500px;  
    position: relative;
    z-index: 3;
}

.letsGo {
    margin-top: 20px;
    position: relative;
    display: none;
}

.OvalSmall {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 13px 13px;
    margin: 0 49px 4px 0;
    background-color: var(--gigas);
}

.Oval {
    position: absolute;
    top: 5px; 
    left: 30px;
    width: 73px;
    height: 71px;
    border-radius: 35px 35px;
    background-color: var(--gigas);
}

.Button {
    position: absolute;
    border-radius: 5px 5px;
    height: 40px;
    width: 120px;
    color: var(--pot-pourri);
    background-color: var(--lavender);
}

.buttonRow {
    text-align: center;
    width: 100%;
}

.ButtonC {
    width: 100%;
    display: table;
    margin: 15px auto;
}

.CircleButton {
    width: 60px;
    height: 60px;
    background-color: var(--lavender-dark);
    border-radius: 50% 50%;
    position: relative;
    left: -5px;
    top: -55px;
}

.ButtonQC {
    display: table;
    margin: 5px 5px;
    float: left;
}

.Qinactive {
    background-color: #cdcdcd !important;
    color: #a0a0a0 !important;
}
 
.Qactive {
    color: var(--near-black) !important;
    background-color: var(--lavender);
    background-position: right top;
    background-image: url("/images/read.png");
    background-repeat: no-repeat;
    cursor: pointer;
}

.ButtonQ {
    border-radius: 5px 5px;
    height: 40px;
    width: 200px;
    color: var(--pot-pourri);
    background-color: var(--lavender);
    display: table;
    margin: 5px 5px; /* auto */
}

.ButtonR {
    border-radius: 5px 5px;
    width: 100%;
    color: var(--pot-pourri);
    background-color: var(--lavender);
    margin: 20px auto;
    max-width: 300px;
}

.ButtonW {
    border-radius: 5px 5px;
    width: 100%;
    color: var(--pot-pourri);
    background-color: var(--crystal);
    margin: 20px auto;
    max-width: 300px;
}

.isNotLoggedIn {
    display: none;
}

.hideBook {
    opacity: .3;
}

.ButtonD {
    border-radius: 5px 5px;
    width: 100%;
    color: var(--pot-pourri);
    background-color: #800000;
    margin: 20px auto;
    max-width: 300px;
}

.ButtonQ span {
    cursor: pointer;
    font-weight: bold;
    font-size: 1.0rem;
    line-height: 40px;
    margin-left: 5px;
}

.ButtonD span,
.ButtonW span,
.ButtonR span {
    cursor: pointer;
    font-weight: bold;
    font-size: 1.0rem;
    line-height: 40px;
    /*margin-left: 50px;*/
}

@media only screen and (max-width: 400px) {
  .ButtonW span,
  .ButtonR span {
    font-size: 0.8rem;
    margin: 5px auto;
  }
}

.Button span {
    cursor: pointer;
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 40px;
    margin-left: 50px;
}

.OvalButton {
    z-index: 1;
    cursor: pointer;
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 40px 40px;
    border: 2px solid var(--lavender);
    background-color: var(--gigas);
}

.SelectButton {
    z-index: 1;
    cursor: pointer;
    width: 100%;
/*    height: 100%;*/
    border-radius: 40px 40px;
    border: 2px solid var(--lavender);
    background-color: var(--lavender);
    margin:0 auto;
    display:table;
    max-width: 90px;
}

.SelectButton img {
    vertical-align: middle;
    width: 100%;
    height: 100%; 
}

img.rot {
    transform: rotate(180deg);
}

.Bitmap {
    width: 18px;
    height: 54px;
    transform: rotate(45deg);
}

.eTitle {
    font-family: Steinschrift;
    font-size: 1.1rem;
    color: var(--pot-pourri);
    margin-top: 24px;
}

.eTitleQuestion {
    font-family: Steinschrift;
    font-size: 1.1rem;
    color: var(--pot-pourri);
    margin-top: 24px;
    text-align:center;
    font-weight:bold;
}

.LoginCheck,
.LoginTitle {
  display: table;
  margin: 0px auto;
  font-family: Steinschrift;
  font-size: 22px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--lavender);
  margin-top: 20px;
}

.LoginCheck {
  margin: 100px auto 10px auto;
  color: var(--gigas);
}

.BookTitle {
  display: table;
  margin: 0 auto;
  font-family: Steinschrift;
  font-size: 20px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--minsk);
}

@media only screen and (max-width: 400px) {
  .LoginTitle {
    font-size: 18px;
  }
  .BookTitle {
    font-size: 14px;
  }
}

@media only screen and (max-width: 900px) {
  .LoginTitle {
    font-size: 20px;
  }
}
.loginWelcome,
.loginError {
  display: none;
  margin: 0 auto;
  font-family: Steinschrift;
  font-size: 15px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--pot-pourri);
}

.loginWelcome {
  display: table;
  font-size: 24px;
}

.BookInfo {
  display: table;
  margin: 0 auto;
  font-family: Steinschrift;
  font-size: 11px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--scampi);

}

.Phontasia-Games {
    width: 100%;
    margin: 5px 0 4px;
}

.randomWord {
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 32px;
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 64 64' class='icon icon-alarm' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath data-name='layer1' d='M17.662 25.152l-2.755 2.349a17.985 17.985 0 0 1 30.135-8.232l4.242-4.244A23.998 23.998 0 0 0 8.981 26.403L7 24l-5 3 8.943 11.768 10.613-9.05zM62 37l-8.39-12.054-10.442 9.388 4.012 4.462 2.54-2.284a17.983 17.983 0 0 1-30.134 8.215l-4.24 4.245A24 24 0 0 0 55.607 37.78l1.76 2.39z' fill='%23f5e6e2'%3E%3C/path%3E%3C/svg%3E");
}

.OneWordEntry {
    position: relative;
   /* z-index: 10;*/
    margin-top: 4px;
    min-height: 32px;
    min-width: 32px;
   /* overflow: hidden;*/
}

.Scroller {
    position: absolute;
    right: 0;
    top: 130px;
    width: 30px;
    overflow: hidden;
    background-color: var(--scrollback);
    border-radius: 15px 15px;
}

.Scrollbar {
    cursor: pointer;
    background-color: var(--lavender);
    width: 26px;
    position: absolute;
    left: 2px;
    top: 2px;
    height: 60px;
    border-radius: 13px 13px;
    z-index: 3;
}

.adminError {
    font-size: 1.1rem;
    color: #800000;
}

.adminTab {
    border: 1px solid #000000;
    padding: 2px 5px;
    float: left;
    background-color: #dfdfdf;
    box-shadow: 3px 7px #888888;
    font-size: 1.5rem;
    letter-spacing: 0px;
    font-family: SSB;
    min-width: 150px;
    max-width: 150px;
    overflow: hidden;
}

.keyRow {
    margin-top: 15px;
    background-color: #00e000;
    position: relative;
    z-index: 1000;
}

.saveBlock {
    position: relative;
    z-index: 999;
    text-align: center;
}

.clickIcon {
    cursor: pointer;
}

.clearBoth {
    clear: both;
}

.adminTabValue {
    border: 1px solid #000000;
    padding: 2px 5px;
    float: left;
    background-color: #ffffff;
    box-shadow: 3px 7px #888888;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0px;
    font-family: SSB;
    min-width: 120px; 
    max-width: 120px;
    overflow: hidden;
}

.rowLast {
    margin-bottom: 15px;
}

.theStory {
    z-index: 1;
    margin-right: 25px;
    /*position: relative;*/
    overflow: scroll;
    filter: blur(10px);
    -webkit-filter: blur(10px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 20px;
    line-height: 60px;
    font-family: Steinschrift;
/*    max-height:740px;
    height: auto;*/
}

.question {
    position: absolute;
    display: none;
    z-index: 10;
    width: 96%;
    height: 420px;
    border-radius: 5px 5px;
    left: 5%;
    top: 10%;
    overflow: hidden;
    box-shadow: 5px 10px 8px #888888;
    background-color:var(--pot-pourri);
    background-position: left top;
    background-image: url("/images/Smallwave.png");
    background-repeat: no-repeat;
}

.questionBlock {
    position:relative;
    margin:10px 10px;
}

.questionData {
    margin: 65px 10px 10px 10px;
    text-align: center;
    max-height: 240px;
    overflow: hidden;
}

.questionFooter {
    overflow: hidden;
    height: 50px;
    text-align: center;
}

.questionData span {
    font-family: FiraSans;
/*    color: var(--near-black);*/
}

.qTitle {
    font-size: 2.0rem;
}

.adminGrid {
    z-index: 100;
    padding-left: 25px;
/*    position: relative;*/
    font-size: 30px;
    line-height: 40px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.adminGrid small {
    font-size: 0.9rem;
    letter-spacing: -1px;
}

.adminGrid p,
.theStory p {
}

.checkserver,
.singleWord {
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1.3rem;
    line-height: 32px;
    color: var(--pot-pourri);
    margin-left: 30px;
}

.wordError {
    width: 95%;
    margin-left: 32px;
    border-radius: 8px 8px;
    border: 2px solid var(--lavender);
    background-color: var(--crystal);
    max-height: 400px;
    height: 300px;
    overflow: hidden;
    position: absolute;
    z-index: 200;
}

.missingWord {
    font-weight: bold;
    font-size: 1.6rem;
}

.wordError small {
    font-size: 0.75rem;
    line-height: 1.5rem;
    padding: 4px;
    text-align: justify;
    display: block;
    color: var(--pot-pourri);
}

.alternativeWords {
    width: 85%;
    margin-left: 32px;
    border-radius: 8px 8px;
    border: 2px solid var(--lavender);
    background-color: var(--gigas);
    max-height: 400px;
    height: 200px;
    overflow: hidden;
    position: absolute;
    z-index: 200;
}

.wordError span,
.alternativeWords span {
    cursor: pointer;
    display: block;
    padding: 2px 4px;
    color: var(--pot-pourri);
    font-size: 1.3rem;
}

.singleWordInCheck {
    margin-right: 4px;
    display: inline-block;
    width: 86%;
    padding: 2px;
    border: 2px dashed var(--lavender);
    background-color: var(--gigas);
    border-radius: 4px 4px;
}

.singleWordChecked {
    margin-right: 4px;
    display: inline-block;
    width: 86%;
    padding: 2px;
    border: 2px solid var(--lavender);
    background-color: var(--gigas);
    border-radius: 4px 4px;
    background-position: right center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title'%0Aaria-describedby='desc' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cdesc%3EA line styled icon from Orion Icon Library.%3C/desc%3E%3Cpath data-name='layer1' fill='none' stroke='%23a59be1' stroke-miterlimit='10' stroke-width='2' d='M2 30l21 22 39-40' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
}

.LargeSmall {
    position: relative;
    width: 160px;
    left: 100px;    
}

.LightDark {
    height: 40px;
    width: 80px;
    position: relative;
}

.SmallerChars {
    cursor: pointer;
    width: 64px;
    height: 64px;
    top: 18px;
    left: 110px;
/*    left: 344px; */
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cg%3E%3Cg transform='translate(-808 -143) translate(392 136) translate(416 7)'%3E%3Ccircle cx='34.24' cy='32.96' r='29.76' fill='%233D3DA0'/%3E%3Ccircle cx='14.08' cy='14.08' r='14.08' fill='%233D3DA0'/%3E%3Cpath fill='%232D2D76' d='M46.237 21.119c1.61 2.427 1.846 8.394 1.613 12.335-.233 3.941.914 7.04 1.178 9.57.264 2.528-.277 2.955-1.576 3.617-1.416.723-2.401.323-3.161 0-.395-.167-1.133-.88-2.215-2.141-.603-.703-1.608-.9-2.431-.477l-1.258.646c-8.725 4.124-14.275 2.998-16.648-3.38-1.891-5.08 1.103-8.275 5.602-9.692 1.984-.624 6.266-1.088 8.16-1.549.976-.238 2.256-.644 3.84-1.22l.402-.147c.797-.294 1.32-1.06 1.307-1.909-.02-1.164-.59-2.107-1.714-2.829-2.36-1.516-5.72-1.336-7.513-.64-1.792.696-3.594 1.964-4.254 3.471-.66 1.507-1.627 1.66-2.786 1.386-1.16-.275-2.185-.658-2.185-2.24 0-1.582 1.855-5.409 5.638-7.177 5.674-2.652 14.669-2.652 18.001 2.376zm-6.659 11.396c-8.73.84-12.612 3.025-11.643 6.556 1.519 5.531 6.828 3.767 9.64 1.675 1.624-1.21 2.64-3.457 3.049-6.745l.044-.383c.059-.55-.338-1.043-.888-1.101-.067-.008-.135-.008-.202-.002z'/%3E%3Cpath fill='%23A59BE1' d='M43.677 21.119c1.61 2.427 1.846 8.394 1.613 12.335-.233 3.941.914 7.04 1.178 9.57.264 2.528-.277 2.955-1.576 3.617-1.416.723-2.401.323-3.161 0-.395-.167-1.133-.88-2.215-2.141-.603-.703-1.608-.9-2.431-.477l-1.258.646c-8.725 4.124-14.275 2.998-16.648-3.38-1.891-5.08 1.103-8.275 5.602-9.692 1.984-.624 6.266-1.088 8.16-1.549.976-.238 2.256-.644 3.84-1.22l.402-.147c.797-.294 1.32-1.06 1.307-1.909-.02-1.164-.59-2.107-1.714-2.829-2.36-1.516-5.72-1.336-7.513-.64-1.792.696-3.594 1.964-4.254 3.471-.66 1.507-1.627 1.66-2.786 1.386-1.16-.275-2.185-.658-2.185-2.24 0-1.582 1.855-5.409 5.638-7.177 5.674-2.652 14.669-2.652 18.001 2.376zm-6.659 11.396c-8.73.84-12.612 3.025-11.643 6.556 1.519 5.531 6.828 3.767 9.64 1.675 1.624-1.21 2.64-3.457 3.049-6.745l.044-.383c.059-.55-.338-1.043-.888-1.101-.067-.008-.135-.008-.202-.002z'/%3E%3Cpath fill='%23635BAB' d='M46.468 43.023c.264 2.529-.277 2.956-1.576 3.618-1.416.723-2.401.323-3.161 0-.395-.167-1.133-.88-2.215-2.141-.603-.703-1.608-.9-2.431-.477l-1.258.646c-8.725 4.124-14.275 2.998-16.648-3.38 1.528 2.307 3.934 4.098 7.995 4.098 2.037 0 8.235-1.529 10.38-2.62 2.145-1.09 3.118 2.62 5.915 2.62 2.798 0 2.961-2.726 3-2.364z'/%3E%3Cpath fill='%23F5E6E2' d='M28.741 16.05c.56-.675 1.428-.474 1.692.218.264.693-.155 1.621-.285 3.155-.129 1.534.481 2.115.164 2.735-.317.62-1.237.927-1.729.293-.491-.633-.608-1.627-.568-3.255.04-1.628.167-2.471.726-3.146z' transform='rotate(77 29.263 19.217)'/%3E%3Cpath fill='%23F5E6E2' d='M23.643 19.987c.53 0 .96.43.96.96v1.92c0 .53-.43.96-.96.96s-.96-.43-.96-.96v-1.92c0-.53.43-.96.96-.96z' transform='rotate(45 23.643 21.907)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.BiggerChars {
    cursor: pointer;
    width: 64px;
    height: 64px;
    top: 18px;
/*    left: 110px; */
    left: 344px;
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cg%3E%3Cg transform='translate(-536 -143) translate(392 136) translate(144 7)'%3E%3Ccircle cx='37.12' cy='28.16' r='26.88' fill='%233D3DA0'/%3E%3Ccircle cx='18.24' cy='43.84' r='18.24' fill='%233D3DA0'/%3E%3Cpath fill='%232D2D76' d='M34.33 10.688c3.12 0 4.717 1.63 5.59 3.172l.12.22.113.222.104.219.095.214.055.134 11.697 30.472c.697 1.815-.21 3.851-2.024 4.548-1.77.68-3.75-.165-4.493-1.89l-.055-.135-2.729-7.107c-.095-.247-.332-.41-.597-.41H26.452c-.265 0-.503.163-.597.41l-2.728 7.107c-.697 1.815-2.733 2.722-4.548 2.025-1.814-.697-2.72-2.733-2.024-4.548l11.74-30.581.093-.223.103-.226.055-.114.118-.23c.867-1.61 2.536-3.279 5.666-3.279zm.208 7.983c-.306-.119-.648.013-.798.297l-.03.068-5.465 14.039c-.029.074-.044.153-.044.232 0 .328.247.599.566.636l.074.004H39.77c.08 0 .158-.015.232-.044.306-.119.468-.447.387-.757l-.023-.071-5.464-14.04c-.065-.166-.197-.299-.364-.364z'/%3E%3Cpath fill='%23A59BE1' d='M32.024 10.661c3.121 0 4.718 1.63 5.59 3.172l.12.22.114.222.104.219.095.214.055.134 11.697 30.472c.696 1.815-.21 3.851-2.025 4.548-1.77.68-3.75-.165-4.493-1.89l-.055-.135-2.728-7.106c-.095-.248-.333-.411-.598-.411H24.147c-.265 0-.503.163-.598.41l-2.727 7.107c-.697 1.815-2.733 2.722-4.548 2.025-1.815-.697-2.721-2.733-2.025-4.548l11.74-30.581.093-.223.103-.226.055-.114.119-.23c.867-1.61 2.535-3.279 5.665-3.279zm.208 7.983c-.306-.119-.647.013-.797.297l-.031.068-5.465 14.039c-.028.074-.043.153-.043.232 0 .328.247.599.565.636l.075.004h10.928c.08 0 .158-.015.232-.044.306-.119.469-.447.388-.757l-.023-.071-5.465-14.04c-.065-.166-.197-.299-.364-.364z'/%3E%3Cpath fill='%23635BAB' d='M23.549 40.73l-2.727 7.107c-.697 1.815-2.733 2.722-4.548 2.025-1.385-.532-2.24-1.843-2.26-3.24-.002-.187 2.505 2.25 4.53 1.005 1.229-.756 1.93-3.44 2.827-4.875 1.059-1.694 2.207-2.098 2.178-2.021z'/%3E%3Cpath fill='%23635BAB' d='M50.046 40.73l-2.727 7.107c-.697 1.815-2.733 2.722-4.548 2.025-1.384-.532-2.24-1.843-2.259-3.24-.002-.187 2.504 2.25 4.529 1.005 1.229-.756 1.93-3.44 2.827-4.875 1.059-1.694 2.208-2.098 2.178-2.021z' transform='matrix(-1 0 0 1 90.559 0)'/%3E%3Cpath fill='%23F5E6E2' d='M26.6 15.43c.707 0 1.28.573 1.28 1.28v6.4c0 .707-.573 1.28-1.28 1.28-.707 0-1.28-.573-1.28-1.28v-6.4c0-.707.573-1.28 1.28-1.28z' transform='rotate(20 26.6 19.91)'/%3E%3Cpath fill='%23F5E6E2' d='M23.416 25.146c.707 0 1.28.573 1.28 1.28v2.56c0 .707-.573 1.28-1.28 1.28-.707 0-1.28-.573-1.28-1.28v-2.56c0-.707.573-1.28 1.28-1.28z' transform='rotate(20 23.416 27.706)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E ");
}

.largeChar {
    border-radius: 4px 4px;
    position: absolute;
    top: 12px;
    left: 0;
    height: 8px;
    width: 140px;
    z-index: 1;
    background-color: var(--gigas);
}

.smallChar {
    border-radius: 2.5px 2.5px;
    position: absolute;
    top: 14px;
    left: 0;
    height: 5px;
    width: 20px;
    z-index: 1;
    background-color: var(--lavender);
}

.charBubble {
    cursor: pointer;
    position: absolute;
    top: 7px;
    left: 120px;
    border-radius: 10px 10px;
    height: 20px;
    width: 20px;
    z-index: 2;
    background-color: var(--lavender);
}

.PlayStory {
    cursor: pointer;
}

.AskQuestion {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 3px;
    width: 70px;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='80' viewBox='0 0 70 80'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cg transform='translate(-1033 -24) translate(1033.27 24)'%3E%3Ccircle cx='31.103' cy='43.241' r='30.414' fill='%233D3DA0'/%3E%3Cellipse cx='54.759' cy='24.345' fill='%233D3DA0' rx='14.207' ry='13.724'/%3E%3Cellipse cx='8.69' cy='64.483' fill='%233D3DA0' rx='8.69' ry='8.345'/%3E%3Cpath fill='%232D2D76' d='M9.352 43.174c4.05-2.408 7.23-4.617 9.539-6.63 2.31-2.011 5.5-5.352 9.575-10.02l10.366 29.075c-6.02-1.064-10.477-1.597-13.368-1.597-2.892 0-6.806.533-11.745 1.597-2.166-1.4-3.622-3.161-4.367-5.28-.745-2.12-.745-4.502 0-7.145z'/%3E%3Cpath fill='%233D3DA0' d='M9.06 44.03c4.29-2.666 7.49-4.917 9.597-6.751 2.108-1.835 5.126-4.898 9.054-9.19l.992 8.73-19.91 8.786.118-.865.149-.71z'/%3E%3Cpath fill='%23635BAB' d='M28.466 26.523c-1.507 1.069-1.122 7.618 1.936 16.397 3.059 8.78 6.755 12.86 8.43 12.68 1.674-.181 1.674-7.141-1.39-15.73-3.066-8.588-7.469-14.416-8.976-13.347z'/%3E%3Cpath fill='%23A79AE6' d='M29.1 38.775c.627 2.143 1.137 3.736 1.53 4.778.393 1.042.999 2.49 1.817 4.345 2.714-1.777 3.551-3.925 2.512-6.446-1.04-2.52-2.993-3.413-5.86-2.677z'/%3E%3Cpath fill='%23F8E5E1' d='M29.558 38.685c1.487.42 2.696 1.132 3.627 2.135.932 1.004 1.464 2.599 1.598 4.785 1.069-2.018.946-3.817-.37-5.395-1.303-1.485-2.921-1.993-4.855-1.525z'/%3E%3Cpath fill='%232D2D76' d='M22.848 54.071c.125 1.806.404 3.33.837 4.574.65 1.866 1.874 4.752 2.305 5.41.43.656 1.007.54 1.314.428.306-.112 3.24-2.18 3.572-2.545.33-.364.49-.762-.156-1.219-.29-.204-1.982-1.629-2.908-3.637-.303-.656-.472-1.752-.508-3.287l-4.456.276z'/%3E%3Cpath fill='%23A59BE1' d='M36.755 31.462c4.367.46 7.19 2.567 8.47 6.323 1.278 3.757.484 7.127-2.382 10.113-.311.168-.583.102-.814-.199-.232-.3-.232-.586 0-.859 2.349-2.419 3-5.262 1.953-8.529-1.046-3.267-3.455-5.085-7.227-5.454-.275.01-.412-.211-.412-.664 0-.452.137-.696.412-.73z'/%3E%3Cpath fill='%23A59BE1' d='M39.288 24.345c-.468-.073-.702.18-.702.76 0 .58.22.87.66.87 6.196.623 10.303 3.547 12.32 8.772 2.016 5.225 1.142 10.338-2.621 15.338-.477.383-.533.762-.167 1.137s.753.375 1.16 0c4.475-5.71 5.486-11.453 3.036-17.231-2.45-5.778-7.012-8.993-13.686-9.646z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.CloseLogin {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 42px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='40' viewBox='0 0 83 80'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cg transform='translate(-1118 -24) translate(1118.24 24)'%3E%3Ccircle cx='46.552' cy='43.241' r='30.414' fill='%233D3DA0'/%3E%3Cellipse cx='16.138' cy='59.103' fill='%233D3DA0' rx='16.138' ry='15.793'/%3E%3Cellipse cx='76.138' cy='73.517' fill='%233D3DA0' rx='6.621' ry='6.483'/%3E%3Ccircle cx='46.483' cy='43.31' r='1' stroke='%232D2D76' stroke-width='54'/%3E%3Cpath fill='%232D2D76' d='M50.193 24.71l2.243.82.726.267 1.41.526.578.218.396.153.271.107.11.045.078.034.03.015.007.004c.231.128.299.228.347.376l.013.044.034.124.044.164.086.325.042.16.081.318.078.312.038.154.073.305c.202.855.365 1.648.488 2.379l.014.088.724.805.382.42.178.19.076.08.035.035.016.015.15.122.036.028c.034.026.062.045.087.058l.025.01.201.08.29.109 3.87 1.438.466.178.126.05.03.014.004.003c.149.089.22.176.281.353l.02.058.359 1.177.453 1.5.425 1.422.217.74.162.565.074.266.04.15.022.091.008.037.003.018c.038.271-.005.384-.102.518l-.029.038-3.534 4.552-.457 1.582-.13.464-.02.077-.043.206-.008.042-.005.036-.003.047.002.027.013.135.033.309.468 4.033.05.449.028.286.004.053v.028c-.012.173-.057.276-.187.411l-.254.248-1.54 1.48-1.263 1.206-.569.538-.5.468-.224.205-.094.084-.058.05-.041.034-.015.01c-.203.142-.32.166-.462.15l-.045-.006-.048-.008-.106-.02c-1.47-.282-3.004-.525-4.599-.73l-2.557.351-1.124.16-.342.052-.08.014-.039.007-.21.052-.04.012c-.039.011-.067.022-.091.036l-.103.063-.37.232-1.087.695-2.361 1.511-.37.234-.132.08-.05.03-.03.017-.004.002c-.16.064-.273.068-.45.012l-.072-.025-2.12-.775-.981-.363-1.319-.492-.722-.274-.343-.134-.154-.062-.096-.04-.053-.024-.026-.013c-.242-.135-.304-.238-.353-.398l-.013-.045-.027-.1c-.344-1.27-.643-2.594-.897-3.972l-1.315-1.146-.237-.203-.145-.117-.036-.028c-.04-.03-.07-.051-.1-.063l-.1-.04-.278-.107-.889-.332-2.898-1.075-.497-.188-.248-.097-.064-.026-.021-.01-.004-.002c-.148-.089-.22-.177-.281-.353l-.017-.053-.505-1.654-.356-1.182-.417-1.398-.25-.854-.132-.467-.068-.25-.024-.096-.009-.042-.005-.028c-.038-.272.006-.384.102-.518l.03-.039.065-.085c.92-1.184 1.94-2.407 3.058-3.67l.281-.315.567-1.838.242-.801.096-.327.028-.105.002-.01.04-.206.007-.043.005-.036c.001-.017.002-.033.001-.047l-.002-.027-.02-.178-.072-.563-.501-3.74-.064-.499-.026-.222-.004-.052-.002-.017v-.011c.01-.172.053-.276.18-.412l.036-.039.182-.183 1.215-1.211.643-.638.826-.816.888-.868.402-.387.146-.136.077-.07.045-.039.022-.017c.233-.169.353-.177.529-.15l.075.013.055.01c1.544.268 3.13.626 4.76 1.074l.108.03 3.683-.775.26-.057.19-.048.044-.011c.048-.014.083-.026.11-.042l.088-.053.183-.114.396-.251 3.067-1.964.42-.266.272-.17.066-.037.016-.009c.17-.069.287-.069.486 0zm-11.32 20.862c.851 4.424 6.398 6.17 9.807 5.428 3.41-.74 6.658-5.584 5.45-9.522-1.209-3.937-5.094-7.267-9.75-5.924-4.656 1.344-6.36 5.594-5.508 10.018z'/%3E%3Cpath fill='%23A59BE1' d='M46.483 30.483c7.084 0 12.827 5.743 12.827 12.827 0 7.085-5.743 12.828-12.827 12.828-7.085 0-12.828-5.743-12.828-12.828 0-7.084 5.743-12.827 12.828-12.827zm-.07 1.655c-6.131 0-11.103 4.971-11.103 11.103 0 6.133 4.972 11.104 11.104 11.104 6.132 0 11.103-4.971 11.103-11.104 0-6.132-4.97-11.103-11.103-11.103z'/%3E%3Cpath fill='%23635BAB' d='M56.701 35.555c1.637 2.154 2.61 4.841 2.61 7.755 0 7.085-5.744 12.828-12.828 12.828-1.838 0-3.586-.387-5.167-1.083l.518-1.698.303.134c1.316.55 2.761.854 4.277.854 6.132 0 11.103-4.971 11.103-11.104 0-2.345-.727-4.52-1.967-6.312l1.151-1.374z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}


.LoginLogout,
.SettingsCOG {
    cursor: pointer;
}

.Pencil {
    cursor: pointer;
}

.Qstion {
    cursor: pointer;
}

.Rocket2 {
    z-index: 10;
    cursor: pointer;
    /*position: relative;
    left: 20px;
    top: -86px;*/
/*    width: 82px;
    height: 83px;*/
background-size: contain;
background-repeat: no-repeat;
background-position: 25px center;
    background-image: url("/images/Rocket.png");
}


.Rocket3 {
    z-index: 10;
    cursor: pointer;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
    background-image: url("/images/Rocket.png");
}

.Rocket {
    z-index: 10;
    cursor: pointer;
    position: relative;
    left: 6px;
    top: 5px;
    width: 112px;
    height: 113px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='113' viewBox='0 0 112 113'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cg%3E%3Cg transform='translate(-608 -363) translate(608 363) translate(0 .5)'%3E%3Cpath fill='%237369C8' d='M52.767 104.472c27.278 0 49.392-22.114 49.392-49.392 0-27.278-22.114-49.392-49.392-49.392-27.279 0-49.392 22.114-49.392 49.392 0 4.081 1.025 9.784 3.075 17.108-1.604 1.379-2.744 2.729-3.419 4.05-1.013 1.982-.23 4.906.344 5.96.515.945 1.497 2.874 4.508 3.23 2.007.236 3.727-.093 5.16-.99C6.49 89.653 2.664 94.15 1.57 97.928c-1.642 5.67.064 9.384 1.462 10.874 1.398 1.49 4.192 4.454 10.012 3.496 3.88-.64 6.703-2.22 8.47-4.74.97 3.912 3.734 5.376 8.293 4.391 2.312-.78 5.83-3.912 10.555-9.395 5.735 1.279 9.87 1.918 12.406 1.918z'/%3E%3Cpath fill='%23A59BE1' d='M46.905 87.983l-4.226-3.822c-2.697 2.918-4.464 4.783-5.303 5.593-1.106 1.07-1.925 1.908-2.232 2.079-.534.296-1.059.036-1.165-.14-.159-.264-.302-.37-.096-.988.215-.645 8.963-9.472 8.796-9.75l-.97-1.614c-7.428 7.535-12.302 12.341-14.622 14.417-1.28 1.145-3.002.117-3.277-.319-.399-.63-.978-1.727-.382-2.989.648-1.372 3.112-3.689 6.77-7.427 1.394-1.425 3.873-4.027 7.436-7.808l4.98-15.3c-5.483-10.57-8.55-17.745-9.199-21.525-.942-5.49 4.35-7.247 15.875-5.27l28.713-18.015c-9.287-3.24-16.567-4.859-21.84-4.859-24.619 0-46.844 18.937-46.844 44.298 0 3.053 2.591 8.26 2.78 13.411.19 5.151-2.78 9.15-1.707 11.386 1.073 2.237 2.356 2.42 8.494 2.42s.222 14.273 4.924 18.154c3.488 2.88 10.346 2.599 14.676-1.416 2.47-2.29 5.276-5.795 8.419-10.516z'/%3E%3Cpath fill='%23E0CFE3' d='M12.524 67.46c-.44-.455.304-4.638 1.938-8.588 2.059-4.976 5.23-9.91 5.85-10.243.56-.3.32.612 5.516 5.99s6.05 5.107 5.796 5.718c-.277.67-5.462 3.641-10.445 5.487-4.143 1.533-8.204 2.102-8.655 1.636zM39.628 94.34c-.44-.455.304-4.638 1.938-8.588 2.059-4.976 5.23-9.91 5.85-10.243.56-.3.32.612 5.516 5.99s6.05 5.107 5.796 5.718c-.277.67-5.462 3.641-10.445 5.487-4.143 1.533-8.204 2.102-8.655 1.636zM31.765 75.33c-.357-.37.247-3.765 1.578-6.972 1.675-4.039 4.256-8.045 4.762-8.315.455-.243.26.497 4.488 4.863 4.23 4.366 4.925 4.145 4.719 4.641-.226.544-4.446 2.957-8.503 4.454-3.372 1.245-6.677 1.707-7.044 1.329z'/%3E%3Cpath fill='%232D2D76' d='M68.992 3.672c2.704 0 10.752 10.043 16.8 29.256 4.032 12.809 4.032 26.054 0 39.736-3.942 1.265-9.535 1.898-16.78 1.898-7.245 0-12.852-.633-16.82-1.898-3.979-13.714-3.979-26.959 0-39.736 5.968-19.165 14.096-29.256 16.8-29.256z' transform='rotate(45 69.012 39.117)'/%3E%3Cpath fill='%233D3DA0' d='M62.048 62.015c5.376 0 10.752 15.113 10.752 19.161 0 1.715-6.024 2.11-10.752 2.15-4.704.038-10.752-.282-10.752-2.15 0-3.924 5.376-19.161 10.752-19.161z' transform='rotate(45 62.048 72.672)'/%3E%3Cpath fill='%233D3DA0' d='M34.944 35.359c5.376 0 10.752 15.113 10.752 19.161 0 1.715-6.024 2.11-10.752 2.15-4.704.038-10.752-.282-10.752-2.15 0-3.924 5.376-19.161 10.752-19.161z' transform='rotate(45 34.944 46.016)'/%3E%3Cpath fill='%23F5E6E2' d='M35.98 71.126c-.214-.22.149-2.237.947-4.143 1.005-2.4 2.554-4.78 2.857-4.94.273-.145.156.295 2.694 2.889 2.537 2.594 2.954 2.463 2.83 2.758-.135.323-2.667 1.757-5.1 2.647-2.024.74-4.007 1.014-4.227.789zM17.409 62.364c-.286-.294.198-3.001 1.262-5.557 1.34-3.22 3.405-6.413 3.81-6.628.364-.194.207.396 3.59 3.876 3.384 3.48 3.94 3.304 3.775 3.7-.18.433-3.557 2.356-6.802 3.55-2.697.992-5.342 1.36-5.635 1.059zM44.737 89.468c-.286-.294.198-3.001 1.262-5.557 1.34-3.22 3.405-6.413 3.81-6.628.364-.194.207.396 3.59 3.876 3.384 3.48 3.94 3.304 3.775 3.7-.18.433-3.557 2.356-6.802 3.55-2.697.992-5.342 1.36-5.635 1.059z'/%3E%3Cpath fill='%233D3DA0' d='M86.75 10.956c2.01 0 8.149 6.992 12.692 17.813 1.57 3.743-26.9 3.821-25.531.615 5.171-12.118 10.701-18.428 12.84-18.428z' transform='rotate(45 86.684 21.322)'/%3E%3Ccircle cx='66.528' cy='41.528' r='10.752' fill='%23635BAB'/%3E%3Cpath fill='%23A59BE1' d='M74.662 37.766c-1.422-3.07-4.53-5.198-8.134-5.198-4.948 0-8.96 4.012-8.96 8.96 0 2.498 1.022 4.757 2.671 6.382.81.798-.35-3.837 5.011-7.63 5.36-3.791 9.677-1.943 9.412-2.514z'/%3E%3Ccircle cx='93.856' cy='79.384' r='17.024' fill='%23A59BE1'/%3E%3Cpath fill='%237369C8' d='M94.08 94.392c1.787 0 4.241-.654 7.362-1.96-.877-1.326-2.314-2.28-4.31-2.862-2.996-.873-3.357.54-5.203-1.153-1.845-1.693-.277-3.876-1.56-6.493-1.283-2.616-3.002-1.493-4.482-5.78-1.48-4.288 5.436-11.074 4.893-10.95-6.576 1.499-11.484 7.383-11.484 14.414 0 8.165 6.619 14.784 14.784 14.784z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.LineSpacePlus {
    cursor: pointer;
    position: relative;
    left: 220px;
    top: -4px;
    width: 48px;
    height: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='44' viewBox='0 0 48 44'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23A59BE1'%3E%3Cg%3E%3Cg transform='translate(-936 -155) translate(392 136) translate(543 18)'%3E%3Cpath d='M8.84 2.653l3.2 4.267c.663.884.484 2.137-.4 2.8-.346.26-.767.4-1.2.4h-6.4c-1.105 0-2-.895-2-2 0-.433.14-.854.4-1.2l3.2-4.267c.663-.883 1.916-1.062 2.8-.4.152.114.286.249.4.4z'/%3E%3Cpath d='M5.32 9.64H9.16V37H5.32z'/%3E%3Cpath d='M8.84 37.213l3.2 4.267c.663.884.484 2.137-.4 2.8-.346.26-.767.4-1.2.4h-6.4c-1.105 0-2-.895-2-2 0-.433.14-.854.4-1.2l3.2-4.267c.663-.883 1.916-1.062 2.8-.4.152.114.286.249.4.4z' transform='matrix(1 0 0 -1 0 79.76)'/%3E%3Crect width='30.72' height='3.36' x='18.28' y='21.16' rx='1.68'/%3E%3Crect width='30.72' height='3.36' x='18.28' y='35.08' rx='1.68'/%3E%3Crect width='30.72' height='3.36' x='18.28' y='7.24' rx='1.68'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.LineSpaceMinus {
    cursor: pointer;
    position: relative;
    left: 260px;
    top: -4px;
    width: 48px;
    height: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='44' viewBox='0 0 48 44'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23A59BE1'%3E%3Cg%3E%3Cg transform='translate(-1000 -155) translate(392 136) translate(607 19)'%3E%3Cpath d='M8.84 25.173l3.2 4.267c.663.884.484 2.137-.4 2.8-.346.26-.767.4-1.2.4h-6.4c-1.105 0-2-.895-2-2 0-.433.14-.854.4-1.2l3.2-4.267c.663-.883 1.916-1.062 2.8-.4.152.114.286.249.4.4z'/%3E%3Cpath d='M3.16 35.52h8.16c.928 0 1.68.752 1.68 1.68 0 .928-.752 1.68-1.68 1.68H3.16c-.928 0-1.68-.752-1.68-1.68 0-.928.752-1.68 1.68-1.68z' transform='rotate(90 7.24 37.2)'/%3E%3Crect width='30.72' height='3.36' x='18.28' y='14.88' rx='1.68'/%3E%3Crect width='30.72' height='3.36' x='18.28' y='25.44' rx='1.68'/%3E%3Crect width='30.72' height='3.36' x='18.28' y='36' rx='1.68'/%3E%3Crect width='30.72' height='3.36' x='18.28' y='4.32' rx='1.68'/%3E%3Cpath d='M8.84 12.693l3.2 4.267c.663.884.484 2.137-.4 2.8-.346.26-.767.4-1.2.4h-6.4c-1.105 0-2-.895-2-2 0-.433.14-.854.4-1.2l3.2-4.267c.663-.883 1.916-1.062 2.8-.4.152.114.286.249.4.4z' transform='matrix(1 0 0 -1 0 30.72)'/%3E%3Cpath d='M3.16 4.32h8.16c.928 0 1.68.752 1.68 1.68 0 .928-.752 1.68-1.68 1.68H3.16c-.928 0-1.68-.752-1.68-1.68 0-.928.752-1.68 1.68-1.68z' transform='matrix(0 -1 -1 0 13.24 13.24)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.toDark {
    cursor: pointer;
    position: absolute;
    left: 2px;
    top: 2px;
    width: 80px;
    height: 40px;
    background-color: var(--minsk);
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='81' viewBox='0 0 80 81'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cg%3E%3Cg transform='translate(-392 -136) translate(392 136) translate(0 .6)'%3E%3Crect width='78' height='38' x='1' y='21' fill='%23A59BE1' stroke='%233D3DA0' stroke-width='2' rx='19'/%3E%3Ccircle cx='20' cy='40' r='16' fill='%232D2D76'/%3E%3Ccircle cx='20' cy='40' r='7.2' fill='%23A59BE1'/%3E%3Cpath fill='%23A59BE1' d='M20.78 48.976l1.12 1.4c.345.43.275 1.06-.156 1.405-.177.142-.398.219-.625.219h-2.238c-.553 0-1-.448-1-1 0-.227.077-.447.219-.625l1.12-1.399c.344-.431.973-.501 1.405-.156.057.046.11.098.156.156z' transform='matrix(1 0 0 -1 0 100)'/%3E%3Cpath fill='%23A59BE1' d='M20.78 28.976l1.12 1.4c.345.43.275 1.06-.156 1.405-.177.142-.398.219-.625.219h-2.238c-.553 0-1-.448-1-1 0-.227.077-.447.219-.625l1.12-1.399c.344-.431.973-.501 1.405-.156.057.046.11.098.156.156z'/%3E%3Cpath fill='%23A59BE1' d='M30.78 38.576l1.12 1.4c.345.43.275 1.06-.156 1.405-.177.142-.398.219-.625.219h-2.238c-.553 0-1-.448-1-1 0-.227.077-.447.219-.625l1.12-1.399c.344-.431.973-.501 1.405-.156.057.046.11.098.156.156z' transform='rotate(90 30 39.6)'/%3E%3Cpath fill='%23A59BE1' d='M10.38 38.576l1.12 1.4c.345.43.275 1.06-.156 1.405-.177.142-.398.219-.625.219H8.481c-.553 0-1-.448-1-1 0-.227.077-.447.219-.625l1.12-1.399c.344-.431.973-.501 1.405-.156.057.046.11.098.156.156z' transform='matrix(0 1 1 0 -30 30)'/%3E%3Cpath fill='%23A59BE1' d='M13.18 45.776l1.12 1.4c.345.43.275 1.06-.156 1.405-.177.142-.398.219-.625.219h-2.238c-.553 0-1-.448-1-1 0-.227.077-.447.219-.625l1.12-1.399c.344-.431.973-.501 1.405-.156.057.046.11.098.156.156z' transform='rotate(-135 12.4 46.8)'/%3E%3Cpath fill='%23A59BE1' d='M28.38 45.776l1.12 1.4c.345.43.275 1.06-.156 1.405-.177.142-.398.219-.625.219h-2.238c-.553 0-1-.448-1-1 0-.227.077-.447.219-.625l1.12-1.399c.344-.431.973-.501 1.405-.156.057.046.11.098.156.156z' transform='scale(1 -1) rotate(45 140.585 0)'/%3E%3Cpath fill='%23A59BE1' d='M13.58 31.376l1.12 1.4c.345.43.275 1.06-.156 1.405-.177.142-.398.219-.625.219h-2.238c-.553 0-1-.448-1-1 0-.227.077-.447.219-.625l1.12-1.399c.344-.431.973-.501 1.405-.156.057.046.11.098.156.156z' transform='scale(-1 1) rotate(45 0 1.498)'/%3E%3Cpath fill='%23A59BE1' d='M27.98 31.376l1.12 1.4c.345.43.275 1.06-.156 1.405-.177.142-.398.219-.625.219h-2.238c-.553 0-1-.448-1-1 0-.227.077-.447.219-.625l1.12-1.399c.344-.431.973-.501 1.405-.156.057.046.11.098.156.156z' transform='rotate(45 27.2 32.4)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.toLight {
    cursor: pointer;
    position: absolute;
    left: 2px;
    top: 2px;
    width: 80px;
    height: 40px;
    background-color: var(--minsk);
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cg transform='translate(-392 -135) translate(392 135)'%3E%3Crect width='78' height='38' x='1' y='21' fill='%233D3DA0' stroke='%233D3DA0' stroke-width='2' rx='19'/%3E%3Ccircle cx='60.8' cy='40' r='16' fill='%232D2D76'/%3E%3Cpath fill='%23A59BE1' d='M53.176 52c6.407 0 11.6-5.193 11.6-11.6s-5.193-11.6-11.6-11.6c-1.205 0-2.368.184-3.461.525-2.395.748 7.169 2.632 7.353 11.075.184 8.443-9.675 10.35-7.354 11.074 1.093.342 2.256.526 3.462.526z' transform='matrix(-1 0 0 1 114.107 0)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E ");   
}

.inlineInput {
    margin-left: 32px;
    padding: 4px; 
    height: 34px;
    border: solid 1px var(--pot-pourri); 
    outline: 0; 
    font-size: 1.25rem;
    font-family: FiraSans;
    color: #ffffff;
    width: 70%; 
    /*text-shadow: 2px 2px #000000;*/
    background: var(--gigas); 
    border-radius: 8px 8px;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 8px; 
/*
    background: -webkit-gradient(linear, left top, left bottom, from(#a59be1), to(#3d3da0)); 
    background: -moz-linear-gradient(top, #a59be1, #3d3da0);
*/
}

.curtain {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: var(--lavender);
    z-index: 16;
    display: none;
}


.loginInner {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
}

form {
    /*margin: 20px 65px 20px 65px;*/
    margin: 0;
    padding: 0;
}

span.ih {
    display: block;
    text-align:center;
    font-size: 20px;
}

.stopQuestion {
    cursor: pointer;
    color: var(--gigas);
}

.input { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    font-size: 22px;
    font-family: STB;
    color: #f2f2f2;
    width: 90%; 
    text-shadow: 1px 1px var(--gigas);
    background: #c33880; 
    border-radius: 8px 8px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; 
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#732d4b), to(#431a2f)); 
    background: -moz-linear-gradient(top, var(--pot-pourri), var(--scrollback));
}

.inputA { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    font-size: 14px;
    font-family: STB;
    color: #000000;
    width: 100%; 
    background: #c33880; 
    border-radius: 8px 8px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; 
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#732d4b), to(#431a2f)); 
    background: -moz-linear-gradient(top, var(--pot-pourri), var(--scrollback));
}

.inputQ { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    font-size: 14px;
    font-family: STB;
    color: #000000;
    width: 85%; 
    background: #f2f2f2; 
    border-radius: 8px 8px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; 
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#c0c0c0)); 
    background: -moz-linear-gradient(top, #f2f2f2, #c0c0c0);
}

.questionsA {
    font-size: 14px;
}

.lab {
    display: block;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    margin-top: 10px;
    text-transform: uppercase;
}

@media only screen and (max-width: 400px) {
  .lab {
    font-size: 12px;
  }
}

@media only screen and (max-width: 900px) {
  .lab {
    font-size: 14px;
  }
}

.labA {
    display: block;
    text-align: left;
    font-size: 16px;
    color: var(--gigas);
    margin-top: 10px;
    text-transform: uppercase;
}

.Qstion {
   display: none;
}

.textBase {
   margin: 0 auto;
   max-width: 800px;
}

.menuIcon {
   margin-top: 10px;
   max-height: 60px;
}

@media only screen and (max-width: 900px) {
  .menuIcon {
    max-height: 40px;
  }
}

@media only screen and (max-width: 400px) {
  .menuIcon {
    max-height: 24px;
  }
}