#relative {
  position: relative;
}

/* colour >//w//< */
body {
  background-color: rgb(47, 34, 53);
}

h1 { /* title */
  font-family: 'IncisedBlack Normal';
  color: rgb(217, 197, 178);
  text-align: center;
  font-size: 5vw;
  font-weight: normal;

}
h2 {
	font-family: 'Jacquard 24';
	color:  rgb(217, 197, 178);
	font-size: 3vw;
}

h4 {
  font-family: 'IncisedBlack Normal';
  color:  rgb(217, 197, 178);
  font-size: 3vw;
  margin-top: 0.5em;
  margin-bottom:  0%;
  margin-right:  0%;
  margin-left:  0.5em;
  font-weight: normal;
}

h5 { /* title subscript */
  font-family: 'IncisedBlack Normal';
  color: rgb(217, 197, 178);
  font-size: 1.5vw;
  font-weight: normal;
}

h6 {
  font-family: 'IncisedBlack Normal';
  color:  rgb(217, 197, 178);
  font-size: 1vw;
  margin-top: 0.5em;
  margin-bottom:  0%;
  margin-right:  0%;
  margin-left:  1em;
  font-weight: normal;
}

h7 {
  font-family: 'Monk Gothic';
  color:  rgb(217, 197, 178);
  font-size: 1.5vw;
  font-weight: normal;
}

h3 {
	font-family: 'IncisedBlack Normal';
    color:  rgb(217, 197, 178);
	font-size: 3em;
	text-align: center;
	margin-top: 0%;
	margin-bottom:  0%;
	margin-right:  0%;
	margin-left:  0.5em;
	font-weight: normal;
}
/* formatting for basic text */
#text{
  font-size: 1.5vw;
  color:  rgb(63, 50, 68);
  font-family: 'Jacquard 24';
  line-height: 80%;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.entrytext{
  font-size: 2vw;
  color:   rgb(217, 197, 178);
  font-family: 'Jacquard 24';
  line-height: 80%;
  margin-top: 0.1em;
  margin-bottom: 0.5em;
}
.entrytitle {
  font-family: 'Jacquard 24';
}
.entrytitle:hover {
  cursor: pointer;
}


#displaycontent {
  position: absolute;
  width: 70%;
  left: 15%;
}

#spaceused {
	display: inline-block;
	text-align: right;
	position: absolute;
	left: 65%;
	margin-bottom: 0%;
}

.spaceusedentry {
	display: inline-block;
	text-align: right;
	position: relative;
	margin-bottom: 0%;
}

.entrylink {
  font-size: 2vw;
  color:  rgb(217, 197, 178);
  font-family: 'Jacquard 24';
  line-height: 0%;
}

.entrylinktext {
  font-size: 2vw;
  color:  rgb(217, 197, 178);
  font-family: 'Jacquard 24';
  line-height: 0%;
  display: inline-block;
  margin: 0%;
  width: 85%;
}

/* formatting for text in main block*/
.content{
  font-size: 2vw;
  color:  rgb(217, 197, 178);
  font-family: 'IncisedBlack Normal';
  line-height: 100%;
  text-align: center;
}

/* formatting for background large text */
.chants{
  font-size: 2.5vw;
  color:   rgb(217, 197, 178);
  font-family: 'IncisedBlack Normal';
  line-height: 100%;
  text-align: center;
}

/* formatting for subscript under title */
#underword {
  position: absolute;
  top: 37.5%;
  left: 40%;
  right: 0%;
  bottom: 0%;

}

/* navigation menu, hides when page too big */
nav{
  font-size: 3vw;
  display: block;
  position: relative;
}

#dough{
  text-align: left;
  position: absolute;
  top: 7em;
  left: 20%;
}

#commune{
  text-align: left;
  position: absolute;
  top: 9em;
  left: 20%;

}

#library{
  text-align: left;
  position: absolute;
  top: 11em;
  left: 20%;

}

#blessing{
  text-align: left;
  position: absolute;
  top: 7em;
  left: 70%;

}

#guilded{
  text-align: left;
  position: absolute;
  top: 9em;
  left: 70%;

}

#star{
  text-align: left;
  position: absolute;
  top: 11em;
  left: 70%;

}


/* ------------------------------------- */

/* chants are hidden when page too small */


/* ------------------------------------- */


/* formatting for links */
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  cursor: pointer;
  transition: 0.1s ease-out;
}

a:active {
  text-decoration: none;
}


/* transparent background for main block */
#overlay {
  position: fixed;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  /*! background-color: rgba(47, 34, 53, 0); */
  z-index: 5;
  /* remove scrollbar */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#overlay2 {
  position: fixed;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  /*! background-color: rgba(47, 34, 53, 0); */
  z-index: 4;
  /* remove scrollbar */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* remove scrollbar */
#overlay::-webkit-scrollbar {
  display: none;
}

/* makes the background none scrollable */
#background {
  position: fixed;
  overflow-y: hidden;
}

#image {
  width: 25%;
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
}

.imageentry {
  width: 25%;
  display: none;
  height: auto;
  margin-left: auto;
  margin-right: 5px;
  border-radius: 8px;
}

#reviewblock {
	position: absolute;
	background-color: rgba(47, 34, 53, 0.9);
	width: 80%;
	height: auto;
	left: 10%;
	top: 50em;
	z-index: 8;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	border-radius: 25px;
}

#imagesmall {
  width: 25%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  margin-bottom: 1em;
}

/* formatting for segment shape */

.cardtext{
  font-size: 1.7vw;
  color:   rgb(217, 197, 178);
  font-family: 'Jacquard 24';
  line-height: 80%;
  margin-top: 0.1em;
  margin-bottom: 1em;
  margin-left:  25px;
  margin-right:  25px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 20%;
 
}

.column4 {
  float: left;
  width: 25%;
  
}

.badges {
	text-align: center;
	position: fixed;
	left: 0%;
	bottom: 0%;
}

/* Remove extra left and right margins, due to padding in columns */
.row {
	margin: 0 -5px;
	margin-left: auto;
    margin-right: auto;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.card {
  /*! box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */ /* this adds the "card" effect */
  padding: 5px;
  background-color: rgba(39,29,42,0.5);


}

#cardimage {
	width: 100%;
}


.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  border: 3px solid rgb(217, 197, 178);
  margin:6px;
  box-shadow:8px 8px 0px #00000033;
  transform:translate(-6px, -6px);
  transition: 0.1s ease-out;
  cursor: pointer;
}

/* Add some padding inside the card container */
.container {
 
}


input[type=text] {
  position: relative;
  width: 70%;
  padding: 12px 20px;
  margin: 8px 0;
  left: 1%;
  box-sizing: border-box;
  border: none;
  background-color: rgba(47, 34, 53, 0);
  color: white;
}

#contentswitcher {
	width: 100%;
	font-family: 'Jacquard 24';
	color: rgb(217, 197, 178);
	font-size: 3vw;
}

#spacer {
	display: inline-block;
	width: 1%;
}

#auditory {
	text-align: right;
	width: 50%;
	display: inline-block;
}

#interactive {
	text-align: left;
	width: 48%;
	display: inline-block;
}


/* is your screen small */
@media screen and (max-width: 750px) {
  #overlay{   
    width: 100%;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
  }
  #underword {
    top: 37.5%;
    left: 33%;
    right: 0%;
    bottom: 0%;
  }
  #text, .cardtext{
    font-size: 5vw;
  }
  .content{
    font-size: 2.5vw;
  }
  h4 {
    font-size: 5vw;
  }
  h6, h7 {
    font-size: 5vw;
  }
  .column {
    width: 20%;
    display: block;
    margin-bottom: 20px;
  }
  
  #commune, #dough, #library{
	 left: 20%;
  }
  #blessing, #guilded, #star{
	 left: 70%;
  }
  .entrytext {
	font-size: 5vw;
}

  #entrylinktext {
	font-size: 5vw;
}


  
  
  
}


/* is your screen huge  */
@media screen and (min-width: 2000px) {
  h1 {   
    font-size: 4.5vw;
  }
  h4 {
	font-size: 2.5vw;
  }
  h5 {
    font-size: 1.2vw;
  }
  #underword {
    top: 40.5%;
    left: 42.5%;
    right: 0%;
    bottom: 0%;
  }
  #text, .cardtext{
    font-size: 1.25vw;
  }
  .column {
    display: block;
    margin-bottom: 20px;
  }
  #displaycontent {
    width: 50%;
    left: 25%;
  }
  #image {
	width: 20%;
  }
  .content {
    font-size: 1.5vw;
  }
  #dough{
	left: 25%;
  }
  #commune{
	left: 25%;
  }
  #library{
	left: 25%;
  }
  .entrylinktext{
    font-size: 1.5vw;
  }
  .entrylink{
    font-size: 1.5vw;
  }
  .entrytext {
	font-size: 1.5vw;
  }


}



/* fonts */

/* @font-face kit by Fonts2u (https://fonts2u.com) */ 
@font-face {font-family:"IncisedBlackWide Normal";src:url("fonts/Incised_Black_Wide.eot?") format("eot"),url("fonts/Incised_Black_Wide.woff") format("woff"),url("fonts/Incised_Black_Wide.ttf") format("truetype"),url("fonts/Incised_Black_Wide.svg#IncisedBlackWide-Normal") format("svg");font-weight:normal;font-style:normal;}

@font-face {font-family:"IncisedBlack Normal";src:url("fonts/Incised_Black.eot?") format("eot"),url("fonts/Incised_Black.woff") format("woff"),url("fonts/Incised_Black.ttf") format("truetype"),url("fonts/Incised_Black.svg#IncisedBlack-Normal") format("svg");font-weight:normal;font-style:normal;}

@font-face {font-family:"Monk Gothic";src:url("fonts/Monk_Gothic.eot?") format("eot"),url("fonts/Monk_Gothic.woff") format("woff"),url("fonts/Monk_Gothic.ttf") format("truetype"),url("fonts/Monk_Gothic.svg#Monk_Gothic") format("svg");font-weight:normal;font-style:normal;}






.TerminalPopup {
	position: absolute;
	text-shadow: 0 0 3px #C8C8C8;
}

.TerminalPopupTitleBar {
	position: absolute;
	width: 100%;
	height: 10px;
	top: -2.5%;
	left: ;
	background-color: rgb(204, 204, 204); 
	background-origin: border-box;
	font-size: 1vw;
    color:  rgb(34, 26, 38);
    font-family: 'Jacquard 24';
    line-height: 0%;
    text-align: center;
}

.TerminalPopupTitleBarText {
 
}

.TerminalPopupTitleBarButtonClose {
	position: absolute;
	top: -2.5%;
	left: ;
}

.TerminalPopupContent {
	text-align: center;
	border-style: none double double double;
	border-width: thick;
	border-color: rgb(204, 204, 204);
	background-color: rgb(34, 26, 38);

}

#tutorial1 {
	display: none;
	width: 15%;
	top: 30em;
	left: -17.5%;
}