/* website css document */

/* 
COLORS
pink: #fcc7c7
lavender: #CCCDE5;
blue: #D6EAF8;
grey: 2C2C2C;
blue 2.0: #B9D3EE;
salmon: #E9967A;
peach: #FF9955;
*/

/* 
FONTS
font-family: 'Playfair Display', serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Didact Gothic', sans-serif;
font-family: 'Helvetica', 'Arial', sans-serif;
*/


.main_page_body{
	background-color: white;
	min-height: 100%;
	overflow: auto;
	z-index: -1;
}

/* all text background and font */

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


.left_header{
	display: inline-block;
	position: fixed;
	font-size: 20pt;
	background-color: transparent;
	top: 10vh;
	left: 10vw;
	color: black;
	z-index: 1;
	
}

.right_links{
	display: inline-block;
	position: fixed;
	font-size: 20px;
	background-color: transparent;
	top: 20vh;
	left: 10vw;
	color: black;
	z-index: 2;
}

.project_title{
	display: inline-block;
	position: fixed;
	background-color: transparent;
	padding-right: 0%;
	top: 32vh;
	left: 10vw;
	color: black;
	z-index: 1;
	font-size: 14pt;
}

.project_skill{
	display: inline-block;
	position: fixed;
	font-size: 20px;
	background-color: transparent;
	padding-left: 0vw;
	top: 35vh;
	left: 10vw;
	color: black;
	z-index: 2;
	font-size: 11pt;

}


.maincontent{
	display:inline-block;
	width: 500px;
	background-color: transparent;
	position:relative;
	left: 30vw; 
	right: 40vw;
	bottom: 10vh;
	top: 30vh;
	text-align: justify;
}

.tableofcontents{
	display:inline-block;
	width: 500px;
	background-color: transparent;
	position:relative;
	left: 30vw; 
	right: 40vw;
	bottom: 10vh;
	top: 30vh;
	text-align: justify;
}

.aboutpagecontent{
	display:inline-block;
	width: 500px;
	background-color: transparent;
	position:relative;
	left: 30vw; 
	right: 40vw;
	bottom: 10vh;
	top: 30vh;
}


.pagetext{
	display:inline-block;
	width: 60%;
	background-color: transparent;
	position:relative;
	left: 30vw; 
	bottom: 10vh;
	top: 15vh;
	padding-bottom: 80px;
}

.horizontalcontainer{
	display:inline-block;
	width: 100%;
	background-color: transparent;
	position:relative;
	left: 20%; 
	bottom: 10vh;
	padding-bottom: 5%;
	top: 100px;
	/*text-align: justify;*/
}


.workname{
	display:inline-block;
	position: fixed;
	width: 20%;
	background-color: transparent;
	top: 15%;
	padding-right: 10vw;
}

.verticaltext{
	transform: rotate(15deg);
	font-size: 100px;
	text-align: center;
}

.verticaltextleft{
	/*transform: rotate(270deg);*/
	font-size: 100px;
	text-align: center;
}


.intro{
	color: #000;`
}

#intro{
	font-size: 25pt;
	color: #000;
}

#blue{
	color: #B9D3EE; 
}

#pink{
	color: #fcc7c7;
}

#salmon{
	color:#E9967A;
}

#green{
	color: #A6D785;
}

#grey{
	color: #6F6F6F;
}

#orange{
	color: #FBA16C;
}

#teal{
	color: #507786;
}

#peach{ 
	color: #FF9955;
 }
 


#underline{
/*	background-color:#fcc7c7;
*/	/*color: #ffffff;*/
	text-decoration: underline;
	color: inherit;
}

.footer{
	display: inline-block;
	position: fixed;
	background-color: transparent;
	bottom: 5vh;
	left: 10vw;
	z-index: 1;


}

.copyright{
	display: inline-block;
	position: fixed;
	background-color: transparent;
	bottom: 5vh;
	right: 10vw;
	z-index: 1;
}


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #fff;
}

.container:hover .overlay {
  opacity: .9;
}

.text {
  color: #2C2C2C;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.text:hover .overlay {
  opacity: 1;
}

.work{
	background-color: transparent;
  	width: 100%;
  	margin-bottom: 30px;
  	background-position: center;
  	float: center;
}

.workframe{
  display: grid | inline-grid;

}
/*-------------horizontal scroll---------------*/
.container {
  margin: 5px;
  width: 100%;
  height: 100%;
  border: 1px solid white;
  white-space: nowrap;
}
.item {
  border: 1px solid blue;
  background-color: transparent;
  width: 100%;
}
.flex-container {
  display: flex;
  flex-wrap: nowrap; 
  overflow: auto;
}
.flex-item {
  flex: 0 0 auto;
}
/*-------------horizontal scroll---------------*/
/*grey scale emoji*/
.grey{
  -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
    font-size: 14px;
}

#emoji{
	display: inline-block;
	/*-webkit-filter: grayscale(100%);*/
   /* filter: grayscale(100%);*/
    font-size: 18px;
}


/* link styling */
a {
    color: inherit;
}

/* unvisited link */
a:link {
    color: inherit;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: inherit;
    text-decoration: none;
}

/*
 mouse over link */
a:hover {
    color: inherit;
    text-decoration: underline;
}

/* selected link */
a:active {
    color: inherit;
}


/* mouse selected highlighted text */
::selection {
    color: white; 
    background: #2C2C2C;
}


/*portfolio columns*/
.column{
	width: 100%;
	height: auto;
	position: relative;
	text-align: center;
	border: 1px solid white;
	overflow: auto;
}

.column img{
	width: 49%;
	display:inline-block;
	border: 1px solid white;
	vertical-align: top;