/* ID's for the header/start */
/* All of the website is done such that it can be visible perfectly from both PC's and phones/tablets*/
#header_pic{
	height: 30vh;
	align-self: center;
	margin-top: 10px;
}
/* Header picture*/
#pictureHead{
	width: 80vw;
	align-self: center;
}

#top{
	vertical-align: center;
	height: 100vh;
	text-align: center;
}

/* CLASSES FOR THE REST*/

/* Containers of the dialogues (they are all part of AOS library  */
.diagcontain
{
	position: absolute;
	height: 100vh;
	left: 50%;
	z-index: 2;
	padding: 0;
	margin: 0;
	top: 0%;
	transform: translateX(-50%);
}

/* The holder of all panels by default it has the background of the first picture */
.panels{
	background-color: #9b8c8c;
	height: 230%;
	margin: 0px;
	padding: 0px;
	z-index: 1;
}

/* Individual panel class which is relative such that the absolute contents are in the middle */
.panel-container{
	position: relative;
	margin: 0 auto;
	left: 0%;
	height: 100vh;
	width: 100vw;
}

/* Holds all of the dialogues/pictures to be in the center of the screen */
.picture {
	position: absolute;
	height: 100vh;
	left: 50%;
	transform: translateX(-50%);
	padding: 0px;
	margin: 0px;
}

/* White line separator */
.separator{
	background-color: white; 
	height: 100px
}

/* reseting HTML and BODY */
html{
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font: inherit;
}
body {
	background-color: #9B8C8C; 
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font: inherit;
}