@font-face {
  font-family: "phenomena";
  src: url("files/fonts/phenomena/phenomenablack.otf");
  font-weight: 600;
}
@font-face {
  font-family: "phenomena";
  src: url("./files/fonts/phenomena/phenomenalight.otf");
  font-weight: 200;
}
@font-face {
  font-family: "simplifica";
  src: url("./files/fonts/simplifica.ttf");
}
*{
  margin: 0;
  padding: 0;
}
body{
   /*font-family: "Lato", sans-serif;*/
  color: #33313e;
  text-align: center;
  /*overflow-y: hidden;*/
  transition: background-color 2s ease;
  font-family: "phenomena", sans-serif;
}
/* This is for the spreadTable rows of districts */
th{
   background-color: #202121;
   color: white;
}
input,input:focus,input:active{
  outline: 0;
}
main, body{
   scroll-behavior: smooth;
   /*background-color: transparent;*/
   position: absolute;
   top:0;
   left:0;
   height: 100%;
   width: 100%;
}
b{
   font-weight: 800;
}
#about{
   cursor: pointer;
   font-size:50px;
   background-color: #130314;
   color:#E4D1E6;
   position: absolute;
   height: 100px;
   width: 100%;
   bottom:0;
   box-shadow: 2px 5px lightgrey;
}
#about:hover{
   opacity: 0.9;
}
#gameInformationPage{
   position: relative;
   top:100%;
   /*transform: translateY(100%);*/
   width: 100%;
   margin: 0 auto;
   display: block;
}
#pages{
   display: none;
}
#pages img{
   box-shadow: 1px 1px 2px 2px lightgray;
}
#contentsInfo{
   /*display: none;*/
   font-size: 30px;
   width: 900px;
   background-color: #fff;
   text-align: center;
   margin: 1em auto;
}
/*#info1,#info2,#info3,#info4,#info5,#info6,#info7,#info8,#info9,#info10,#info11{
   display: none;
}*/
#contentsInfo{
   box-shadow: 1px 1px 2px 2px lightgray;
}
#contentsInfo a{
   display: block;
   padding: 0;
   text-decoration: none;
   color: #080808;
   transition: all .3s ease;
   margin-top: .5em;
   margin-bottom: .5em;
}
#contentsInfo a ul{
   margin: 0.5em auto;
}
#contentsInfo a:hover{
   background-color: lightgray;
}
/*#toTopButton{
   position: fixed;
   right: 10px;
   z-index: 13;
}*/
/*#logoBanner img:hover #play{

}*/
/*#startButton{
   /*pointer-events: all;
      display: block;
   margin: 1em auto;
   position: relative;
   background-size:40px;
   height: 38px;
   width: 250px;
   font-size: 25px;
   box-shadow: 2px 2px 5px 2px lightgrey;
   transition: opacity 0.3s ease;
   z-index: 100;
}
#startButton:hover{
   opacity: 0.5;
}*/
#gameInformationPage img{
   margin-bottom: 10px;
}
#version{
   font-size: 50px;
   bottom: 40px;
}
#logoBanner,#recessionBanner{
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: white;
   top:0;
   left:0;
}
#promoVideo,#promoVideo frame{
   left:100px;
   top:100px;
   position: absolute;
   display: inline-block;
}
#logoBanner{
   height: 100%;
   transition: all 0.5s ease;
   box-shadow: 0 0 2px 4px lightgrey;
   text-align: right;
}
#logoBanner img{
   width:220px;
   display: inline-block;
   top:170px;
   left:110px;
   position: relative;
   /*position: absolute;*/
   /*right:5%;*/
   /*bottom:10%;*/
}
#play{
   opacity:0;
   background-image: url("icons/playDark.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 140px;
   display:inline-block;
   position: relative;
   width: 220px;
   top:170px;
   left:-110px;
   height: 220px;
   z-index: 100;
   transition: all 0.4s ease;
}
#playDiv{
   transition: all 0.3s ease;
}
#playDiv:hover{
   transform: translate(-2px,2px);
}
#play:hover, #logoBanner img:hover{
   opacity: 1;
}
#recessionBanner{
   z-index: 3;
   opacity: 0.7;
}
#recTitle{
   height: 120px;
   margin-top: 1em;
   margin-bottom:0;
   font-weight: 600;
   font-size: 100px;
   color: #C53735;
}
#recSubTitle{
   margin-bottom: 60px;
   color: #C53735;
   font-size:22px;
   font-weight: 300;
}
#recText{
   color:black;
   font-size: 34px;
}
#hud ul{
   margin: 1em auto;
   text-align: center;
}
#hud ul li{
   margin: 1em auto;
   cursor: pointer;
}
#hud ul li:hover{
   opacity: .5;
}
#hud ul li img{
   height: 40px;
}
#back-left,#back-right{
   height: 200%;
   width: 50%;
   position: fixed;
   display: block;
   z-index: -1;
   pointer-events: none;
   top:-100%;
   transition: filter 1s ease;
}
#back-left{
   background: linear-gradient(90deg,#D9D9DB,#fafaf4);
}
#back-right{
   left: 50%;
   background: linear-gradient(90deg,#fafaf4,#D9D9DB);
}
ul{
  list-style: none;
}
.hidden{
  display: none;
}
#game{
  position: fixed;
  top:0;
  left:0;
  width:  100%;
  height: 100%;
  transition: opacity 1s ease;
  z-index: -1;
}
#districts,#spreadDiv{
   width: 50%;
   height: 85%;
   margin: 5em 25%;
   display: block;
}
#spreadDiv{
   overflow-y: scroll;
}
#spreadTable{
   background-color: black;
}
#columnNames{
   color: white;
}
#clock{
   width: 80px;
   margin-left: 1em;
}
#crediTime{
  font-size: 1.5em;
  position: absolute;
  top:1em;
  right:3em;
}
#p4Credits{
   font-size: 1.5em;
   position: absolute;
   top:1em;
   right:15%;
}
#curTerr{
  display: block;
}
.district{
  display: inline-block;
  max-width: 40%;
  max-height: 60%;
}
.districtImg{
   border-radius: 1em;
   border-width: 1px;
   /*box-shadow: 2px 2px 5px 2px lightgrey;*/
   max-width: 100%;
   max-height: 100%;
}
.districtNum{
   margin: 1em auto;
  pointer-events: none;
  width: 16%;
  transform: translate(.7em,0);
  /*background-color: white;*/
  font-weight: 600;
  color:#222423;
  text-shadow:
   -1px -1px 0 #aed9bb,
    1px -1px 0 #aed9bb,
    -1px 1px 0 #aed9bb,
     1px 1px 0 #aed9bb;
  font-size: 2.5em;
  position: absolute;
  font-family: "phenomena", sans-serif;

}
.district:hover{
  opacity: 0.7;
}
/*Phase 2 game screen*/
.mainDistrict{
   /*position: absolute;*/
   height: 100%;
}
#svgContainer img{
   position: absolute;
   height: 750px;
   width: auto;
   display: block;
}
svg{
   top:-50%;
   display: block;
   height: 750px;
   width: 750px;
}
#svgContainer{
   position: absolute;
   top:-5%;
}
/*#reg1:active,#reg2:active,#reg3:active,
#reg1:focus,#reg2:focus,#reg3:focus{
   fill:#ad545d;
}*/
#reg1,#reg2,#reg3{
/*fill:#53545d;*/
opacity: .67;
}
#reg1:hover,#reg2:hover,#reg3:hover{
   opacity: 0.5;
}
/*#reg1{
   transform: translate(0,-101%);
}
#reg2{
   transform: translate(0,-202%);
}
#reg3{
   transform: translate(0,-37%);
}*/
#description{
  width:30%;
  margin: 2em auto;
  transition: opacity 1.3s ease;
  font-weight: 100;
  font-size: 25px;
  font-family: "phenomena", sans-serif;
  text-align: center;
  /*font-family: "Lato", sans-serif;*/
}
#question, #answers{
  width:100%;
  transition: opacity 1.3s ease;
  text-align: center;
  font-size: 30px;
  font-weight: 100;

  /*font-family: "Lato", sans-serif;*/
  font-family: "phenomena", sans-serif;
  margin-top: 7em;
}
#answers{
  margin-top: 2em;
}
button.answer{
   pointer-events: none;
   border-style: none;
   height: 2em;
   width: 14em;
   background-color: #080808;
   border-radius: 6px;
   color:white;
   /*font-family: "simplifica", sans-serif;*/
   /*font-weight: 600;*/
   font-size: 0.6em;
}
button.answer4{
   pointer-events: none;
  border-style: none;
  height: 2em;
  width: 2em;
  margin-right: 1em;
  background-color: #080808;
  border-radius: 10px;
  color:white;
  /*font-family: "simplifica", sans-serif;*/
  /*font-weight: 600;*/
  font-size: 0.6em;
}
button.answerFinal{
   pointer-events: none;
   border-style: none;
   height: 2em;
   width: 2em;
   background-color: #DDDFD1;
   border-radius: 10px;
   color:black;
   margin-right: 1em;
   /*font-family: "simplifica", sans-serif;*/
   /*font-weight: 600;*/
   font-size: 0.6em;
}
.titleP1, .titleP2, .titleP3{
   font-size: 60px;
   margin-top: 2em;
   margin-left: 30%;
   margin-right: 30%;
   width:40%;
}
.titleP4{
    font-size: 30px;
    margin-top: 2em;
}
.titleFinal{
   font-size: 30px;
   margin-top: 2em;
   color: white;
}
.finalProblem{
   color: white;
}
.hidden{
   display: none;
   opacity: 0;
}
.visible{
   display: inline-block;
   opacity: 1;
}
.descriptionP1{}
.titleChDist{
   position: absolute;
   opacity:1;
   right:0;
   top:30%;
   margin-right: 0;
   transform: scale(0.7);
   font-size: 60px;
}
.descriptionChDist{}
#title{
   font-family: "phenomena", sans-serif;
   pointer-events: none;
}
#title span.t1{
   font-weight: 200;
}
#title span.t2{
   font-weight: 600;
}
#answers li{
  min-width: 50px;
  margin: 0 20px 0 20px;
  display: inline-block;
}
#answers li:hover{
  cursor: pointer;
  opacity:0.75;
}
.nonScrollFrame{
   border-radius: 1em;
   border-style: solid;
   border-width: 1px;
   box-shadow: 2px 2px 5px 2px lightgrey;
   height: 600px;
   max-height: 90%;
   width: 600px;
}
#indicators{
  pointer-events: none;
  position: absolute;
  bottom: 30px;
  left:0;
  margin-top: 4em;
  width:250px;
}
@keyframes marquee {
   from {left: 100%;}
   to {left: -100%;}
}
#fluxTable{
  overflow-x: hidden;
  position: absolute;
  left:0;
  bottom:0;
  background-color: black;
  color: white;
  width: 100%;
}
#fluxes{
  animation: marquee 10s infinite linear;
  position: relative;
}
.fluxEntry{
   text-align: right;
   margin-left: 30px;
   margin-top: 0.6em;
   display: block;
}
.falling, .rising{
   text-align: right;
   display: inline-block;
   width: 50px;
   font-weight: 700;
   margin-right: 20px;
}
.rising{
   color:#3DE424;
}
.falling{
   color: #FF2829;
}
#indicators ul li {
   display: inline;
}
#indi1,#indi2,#indi3{
  vertical-align: middle;
  display: inline-block;
  border-style: none;

  height: 100px;
  width: 100px;
  margin: 0;
}
.indiTitle{
  transition: all 5s ease;
  font-weight: 300;
  display: inline-block;
  margin-left: 10px;
  opacity: 0;
}

#hud{
   box-shadow: 0px 2px 5px 2px rgba(81,82,89,0.7);
   background-color: #35343d;
   position: fixed;
   left:0;
   bottom: 0;
   top:0 ;
   text-align: left;
   width:80px;
   z-index: 2;
}
#add2cart{
   width: 100px;
   /*background-color: white;*/
   color:white;
   border-color: white;
   border-radius: 10px;
   background-color: rgba(0,0,0,0);
   transition: all 0.5s ease;
   border-style: solid;
   margin-left: 1em;
   font-size: 1.1em;
   font-family: "phenomena";
   font-weight: 600;
}
#add2cart:hover{
   opacity: 0.7;
}

.sellBut,.investBut,.investlist{
   width: 100px;
  background-color:transparent;
  border-color: white;
  color: white;
  border-radius: 5px;
  border-width: 2px;
  transition: all 0.5s ease;
  border-style: solid;
  height: 2em;
  margin-left: 1em;
}
.investBut,.investlist{
   color: black;
   border-color: black;
}
.investlist{
   appearance: none;
   margin-right: 1em;
}
.rowEven,.rowOdd{
   height: 3em;
   width: 100%;
}
.rowEven{
   background-color: white;
}
.rowOdd{
   background-color: lightgrey;
}
#add2cart{
  margin: 1em auto;
  display: block;
  padding: 1em 1em 1em 1em;
}
.sellBut:hover,.investBut:hover{
  background-color: black;
  color: white;
}
.invIcon{
   display: block;
}
#cartImg,#fluxImg{
   margin: 1em 1em;
   cursor: pointer;
   height: 40px;
   vertical-align: middle;
}
#cartImg:hover{
 opacity: 0.7;
}
#territoriesTxt,#curTerr{
  position: relative;
  margin-top: 3em;
}
#cart,#flux{
  background-color:rgba(97, 98, 114,0.0);
  box-shadow: 0px 2px 5px 2px rgba(81,82,89,0.7);
  overflow-y: scroll;
  transition: all 1s ease;
  color: white;
  width:300px;
  position: fixed;
  left:-300px;
  top:0;
  height: 100%;
  text-align: left;
  z-index: 1;
}
#flux{
   overflow-y: hidden;
}
#cartTitle,#fluxTitle{
   display: block;
   background-color: rgba(0,0,0,0.3);
   font-size: 1.5em;

}
#cartList{
  margin: 1em 0.5em;
  display: block;
}
#cartList li{
   margin: 1em auto;
}
/*--- general phase 2,3 ---*/
#spam{
  height: 100px;
  width: 100%;
  background-color: red;
  color: white;
  position: fixed;
  top:-150px;
  transition: all 1s ease;
  z-index: 3;
  font-size: 1em;
}
/*--- Phase 3 ---*/
#spamExit{
  position: absolute;
  font-family: sans-serif;
  right: 1em;
  font-size: 20px;
}
#spamTxt{
  font-family: "phenomena";
  position: relative;
  margin:1em auto;
  top:1em;
  font-size: 20px;
}
#loanPopup,#buyPopup{
   border-radius: 10px;
  position: absolute;
  z-index: 4;
  background-color: #35343D;
  border-color: black;
  border-width: thick;
  top:30%;
  left:40%;
  width: 350px;
  height: 150px;
  border-style: solid;
  padding-top: 70px;
  color:white;
}
#closeLoanPop{
  font-family: sans-serif;
  font-weight: bolder;
  display: block;
  position: absolute;
  right:1em;
  top:1em;
  cursor: pointer;
}