/*Misc*/
html, body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;	
}

.playerRoom {
	position: relative;
	width: 90%;
	margin: auto;
}
.pictureButton {
	display: block;
	position: absolute;
	background-color: black;
	opacity: .5;
	text-align: center;
	cursor: pointer;
  	border: 3px solid white;
  	border-radius: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.pictureButton:hover {
	display: block;
	position: absolute;
	background-color: black;
	opacity: .8;
	text-align: center;
	cursor: pointer;
  	border: 4px solid white;
  	border-radius: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
}


.corruptionList {
	width: 48%;
	float:left;
	text-align:right;
}
.corruptionScore {
	width: 48%;
	float:right;
	text-align:left;
}
.playerImage {
	display: block;
    margin: auto;
    width: 95%;
  	border: 3px solid white;
  	border-radius: 5px;
}

/*Output Zone*/

#phone .button {
    /*color: var(--character-color);*/

}

.phonePicture {
    display: block;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
      border: 3px solid;
      border-radius: 5px;
}
.backgroundPicture {
	display: block;
    margin: auto;
	width: 100%;
	max-height: 70vh;
  	padding: 20px, 1px;
  	border: 3px solid white;
  	border-radius: 5px;
}
.medPicture {
	display: block;
    margin: auto;
    max-height: 500px;
  	padding: 20px, 1px;
  	border: 3px solid white;
  	border-radius: 5px;
}

.centeredText {
	text-align:center;
	margin-left: auto;
	margin-right: auto;
}
.tinyText {
	color: #BBBBBB;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	width: 400px;
	font-size: 70%;
}

/*Windows*/


.windowLeft {
	position:absolute;
	box-sizing: border-box;
	position: block;
	height: 80%;
	width: 50%;
}
.windowRight {
	position:absolute;
	box-sizing: border-box;
	left:50%;
	position: block;
	height: 80%;
	width: 50%;
}



/*Inventory Menu*/
.item {
	display: flex;
    justify-content: space-between;
    background-color: #333333;
    padding: 15px 30px;
    margin: 15px 0;
        border-radius: 5px;
}
.itemName {
    font-size: 1.25rem;
}
.itemImage {
    height: 69px;
    width: 69px;
    border: 3px solid;
    border-radius: 5px;
}
.itemQuantity {
}


/*Shop*/
.shopItem {
	cursor: pointer;
	position: block;
	width: 100%;
	height: 80px;
	background-color: #333333;
	overflow: auto;
}
.shopName {
	pointer-events: none;
	width: 200px;
	float: left;
	margin-left: 15px;
	color: white;
	left: 30%;
	font-size: 22px;
}
.shopDesc {
	pointer-events: none;
	float: left;
	margin-left: 15px;
	color: white;
	padding-top: -10px;
	width: 40%;
	left: 40%;
	font-size: 16px;
}
.shopPrice {
	pointer-events: none;
	float: left;
	margin-left: 15px;
	color: white;
	left: 90%;
	width: 5%;
	font-size: 22px;
}
.shopImage {
	pointer-events: none;
	float: left;
	height: 69px;
	width: 69px;
  	border: 3px solid white;
  	border-radius: 5px;
}

/*Wardrobe*/
.wardrobeItem {
	cursor: pointer;
	position: block;
	height: 75px;
	width: 90%;
	background-color: #333333;
	margin-bottom: 10px;
	z-index: 2;
}
.wardrobeLeft {
	position:absolute;
	box-sizing: border-box;
	position: block;
	height: 80%;
	width: 50%;
}
.wardrobeRight {
	position:absolute;
	box-sizing: border-box;
	left:50%;
	position: block;
	height: 80%;
	width: 50%;
}

/*Footer*/
.footer {
	height: 0%;
	overflow: hidden;
}

.footer .switch {
	font-size: 300%;
	height: 100px;
	width: 33%;
	margin: auto;
	margin-top: 50px;
	text-align: center;
	box-sizing: border-box;
	float: left;
  	border: 3px solid white;
  	border-radius: 5px;
}

/**** Baddy's additions ****/


*{
	box-sizing: border-box;
	/*when specifying dimensions, it takes padding and borders into account*/
}

a, a:visited {
	text-decoration: none;
	color: #bf2c2c;
}

a:hover{
	text-decoration: none;
	color: #e62222;
}

html {
    border-color: #cccccc; /* defined Root border-color: Off-white */
    overflow: hidden;
    /* preventing overflows like dimmed background-layer to generate scrollbars
		Scrollbars are getting used on the individual containers like #output instead anyways
     */
}

body{
    display: flex;
    /* Makes sure #output always fills the rest of the available space */
}



/**** Font Definitions ****/

html {
    font-family: times new roman, sans-serif;
    font-sze:16px;
    font-size: 1rem; /* defined Root font-size */    
    color: #cccccc; /* defined Root font-color: Off-white */
    line-height: 1.5em;
}

h1,h2,h3,h4,h5,h6,p{
	/*clear any user style agent defintions*/
	margin:0;
	padding:0;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

/**** Menu ****/
div#menu {
    width: 0px;
    height: 100%;
    flex:none;
    overflow: hidden;
    border-right: 0px;
  	background-color: #111111;
	text-align: center;
	overflow-y: auto; /*only adds a scrollbar, when necessary*/
	overflow-x: hidden;
	/*resize: horizontal;  probably better to code the resizing of this container via JS. Something for later. */
}

p#title {
    font-size: 1.875em;
    margin-bottom: 15px;
}

p#author {
    font-size: 1em;
}

.flexbox{
    display: flex;
    flex-wrap: wrap;
}
.flexbox>*{
	/*Only really used for the menu to ensure 2 items per row*/
    width: 42%;
    box-sizing: border-box;
    margin: 15px;
}
#playerName {
    color: #8c2e2e;
}
.playerImage{
	    object-fit: cover;
}



/**** Canvas ****/
.wrapper{
    background: none; /*To ensure WrapperBG shows, in case browser-native forces white background as default*/
    width: 100%;
	height: 100%;
	overflow-y: auto; /*only shows a scroll-bar, if necessary*/
	overflow-x: hidden;
}

div#output {
    padding: 60px;
}

div#wrapperBG {
	/*Box covering entire canvas, used to add background-image via JS*/
    height: 104vh;
    width: 104vw;
    position: absolute;
    top: -2%;
    left: -2%;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(10px);
    z-index: -2;
}
div#wrapperBG::after {
	/*dims the background */
    background: rgba(0,0,0,0.75);
    content: "";
    position: absolute;
    height: calc(100% + 20px);
    width: calc(100% + 20px);
    z-index: -1;
}

.backgroundPicture{
        border-radius: 15px;
}



/****Buttons****/


/*regular button*/

.button, .pictureButton, .choiceText, .shopItem, .logbookSwitch{
    background: rgba(0,0,0,0.75);
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 15px;
	padding-bottom: 15px;
    margin: 15px;
    border: none;
    border-bottom: 3px solid;
    border-radius: 5px;
    transition: 0.25s;
    text-align: center;
	cursor: pointer;
}

.button:hover, .pictureButton:hover, .choiceText:hover, .logbookSwitch:hover{
    background: rgba(50,50,50,0.75);
    color: #ffffff;
        border: none;
    border-bottom: 3px solid #FFFFFF;
}

.pictureButton, .choiceText{
	font-size:1.25rem;
	font-weight: bold;
    display: block;
    width: fit-content;
    margin: 15px auto;
}

#restartButton {
    color: #FF0000;
    border-color:#FF0000;
    margin: 0 15px;
}


.pictureButton,.pictureButton:hover {
    padding: 15px;
    opacity: 1;
    border: 0;
    border-bottom: 3px solid #FFFFFF;
}

.playerRoom {
    width: 100%;
    margin-bottom:60px;
}



/**** Dialogue ****/

img.bigPicture {
	display: block;
    max-height: 90vh;
    max-width: 100%;
    margin: auto;
    border: 5px solid #85bbc3;
    border-radius: 30px;
}

p{
	margin: 30px 0;
    font-size: 1.3em;
}

.textBox {
	position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: rgba(0,0,0,0.5);
    border-bottom: 5px solid;
	/*border-color: var(--character-color);*/
    margin: 15px 0;
    padding: 15px;
    border-radius: 15px;
    width: 100%;
	overflow: hidden;
}

.textBoxContent {
	/*added so in the case of ever having so much dialog that it would extend over the picture, it aligns neatly at the right to the picture as demosntrated in example1.jpg.*/
}

/* Textbox interactions */
.textBox p.switch {
    color: #5fe6ec;
	cursor: pointer;
}

.textBox p.switch::before {
    content: '\027A4';
    padding-right: 5px;
	cursor: pointer;
}

/* text emphysis */
/* 
I'd recommend using <span class="emphysis_title"> instead of <b>.
Gives more freedom to customize how to emphysize a word/segment and you can create as many emphysises as you please.
For example 
<span class="emp_danger">
<span class="emp_happy">
<span class="emp_normal">
<span class="emp_player">
*/
.textBox b {
    color: hsla(48, 69%, 75%, 1);
}

.textName {
    font-size: 1.4em;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
}

.specialText {
    color: #1ce01c;
    font-weight: bold;
    margin-bottom: 45px;
    text-align: center;
}

img.textThumb {
    height: 150px;
    width: 150px;
    border-radius: 15px;
    margin-right: 30px;
    /*box-shadow: -5px 5px var( --character-color);*/
    flex: none;
}

.textName {
    /*color: var( --character-color);*/
}




/****Character Colors****/
/*I've "rewritten" the JS code in index.js so it adds the textbox owner as a class. */

/* Fallback, if no owner is available*/
.char_???{
    --character-color:#CCCCCC;
}

/* Player */
.char_player {
    --character-color: #86b4dc;
}

/*Mary Williams*/
.char_purple {
   --character-color: #cb86ef;
}

/*Margaret Williams*/
.char_chubby {
    --character-color: #da924b;
}

/* Steph Black */
.char_kuro {
   --character-color: #fde1a5;
}

/* Reese */
.char_meji{
   --character-color: #7e52a3;
}

/* Emma Hamilton*/
.char_green {
    --character-color: #677b4c;
}

/* Cassandra Hamilton*/
.char_scarf {
    --character-color: #954655;
}

/* Sam White */
.char_tomgirl{
    --character-color: #a79e9a;
}

/* Victoria Devons*/
.char_principal {
    --character-color: #e47311;
}

/* Anna Fletcher */
.char_mistress {
    --character-color: #ed9082;
}

/* Lisa Jones */
.char_secretary {
    --character-color: #888888;
}

/****Status colors****/
p.status{
	font-size: 0.875em;
    margin-bottom: 15px;
}

.Love{
	color: #ff0000;
    font-weight: 600;
}

.Trusting{
    color: #ffeb00;
}

.Friendly{
    color: #59ce10;
}

.Relaxed{
    color: #6b91bf;
}

.Wary{
	color: #e46b31;
}

.unkown{
    color: #a7a7a7;
}



/**** Logbook ****/

div.self, .inventory,.save {
    display: flex;
    flex-wrap: wrap;
	background-color: rgba(0,0,0,0.75);
  	border: 3px solid;
  	border-radius: 5px;
	padding: 0px;
	visibility: hidden;
}

.lb_Name{
color:var(--character-color);
}

.logbookRight {
	left:20%;
	height: 80%;
	width: 80%;
    left: unset;
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden;
}

.logbookLeft {
	height: 80%;
	width: 20%;
    top: unset;
    padding: 0;
   overflow-y: scroll;
    overflow-x: hidden;
}

img#selfImage {
  	border: 2px solid;
  	border-radius: 5px;
	float: right;
    max-width: 100%;
	margin: 0 30px;
    max-height: 100%;
}

.selfSwitch {
	display: inline;
	cursor: pointer;
}

.selfSwitch:hover {
	display: inline;
	cursor: pointer;
}



/****Scroll bar****/
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #333333; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #FFFFFF; 
  border-radius:3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #DDDDDD; 
}



/**** Popup ****/

.popup{
	position: absolute;
	top: 50%;
    left: 50%;
	width: 80vw;
	height: 80vh;
    transform: translate(-50%, -50%);
    z-index: 1;
    overflow: visible;
}

.popup::after {
    content: "";
    position: fixed;
	width: 80vw;
	height: 80vh;
    background: rgba(0,0,0,0.5);
    z-index: -1;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.windowTitle {
    width: 100%;
    text-align: center;
    border-bottom: 3px solid white;
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
    display: block;
    line-height: 2.5;
}

/****Shop****/

.shopItem{
    height: unset;
	display: flex;	
    align-items: center;
}

.shopImage {
    float: right;
    margin-right: 15px;
}

p.shopName {
    flex: 3 1 auto;
}

p.shopDesc{
	flex: 5 1 auto;
}

p.shopPrice {
    flex: 2 1 auto;
}

.shopItem>* {
    margin: 0 15px;
}



/****Save menu****/

div#save {
    flex-flow: column;
}

.saveButton, .deleteButton, .loadButton, .saveFileButton, .loadFileButton {
    color: #ffffff; 
    padding: 15px; 
    margin-left: 15px; 
    font-size: 1rem; 
    text-align: center;
    width: 120px;
    border: none; 
    border-bottom: 3px solid #ffffff;
    border-radius: 5px; 
   	cursor: pointer; 

}
 
.saveSlot {
padding: 5px 0;
    height: unset;
    display: flex;
    margin: 15px 0;
    position: relative;
    background-color: rgba(255,255,255,0.25);
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding-left: 105px;
    border-radius: 5px;
}

.saveDate {
	position: absolute;
    flex: 5 1 auto;
	right: 4%;
	margin:1%;
	font-size: 22px;
}

.saveList {
display: flex;
    flex-direction: column;
    overflow-y: scroll;
    width: 100%;
}

.deleteButton{
	color:#FF0000;
	border-color:#FF0000;
}

.saveName, .loadButton, .saveButton, .deleteButton, .loadFileButton, .saveFileButton {
    position: unset;
    flex: 1 1 auto;
    max-width: fit-content;
    max-height: fit-content;
    margin: 15px;

}


.saveName {
position: absolute;
    left: 30px;
    width: 75px;
    margin: auto;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
}

.phoneTextBox {
	position: relative;
	display: block;
	width: 98%;
  	min-height: 92px;
	padding: 5px;
	overflow: hidden;
  	background-color: #111122;
  	border: 5px solid white;
  	border-radius: 5px;
}
.phoneTextBox p {
	margin: 0px;
	padding: 0px;
}
.phoneTextThumb {
	position: relative;
  	display: block;
    margin: auto;
  	padding: 1px;
 	height: 100px;
	width: 100px;
  	float: left;
	overflow: hidden;
  	margin: 0px 10px 0px 0px;
  	border: 3px solid white;
  	border-radius: 5px;
}
.phoneTextName {
	color: white;
	margin: 0px;
	padding: 0px;
	font-weight: bold;
}

.closeButton {
	top:15px;
	left: 340px;
	position: absolute;
	font-size: 50px;
	visibility: hidden;
  	border: 5px solid white;
  	border-radius: 20px;
	color:white;
}

.openButton {
	top:15px;
	left: 20px;
	position: absolute;
	font-size: 50px;
  	border: 5px solid white;
  	border-radius: 20px;
	color:white;
}

.ghost {
	position: absolute;
	cursor: pointer;
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.blueText {
  color: #bf2c2c;
  font-weight: bold;
  cursor: pointer;
}

.blueText:hover{
  color: #e62222;
}