/*
  STYLE GUIDE STYLING 
  Default styling for the style guide 
*/

*{
  -moz-transition: all 500ms cubic-bezier(.19,1,.22,1) 0ms;
  -ms-transition: all 500ms cubic-bezier(.19,1,.22,1) 0ms;
  -o-transition: all 500ms cubic-bezier(.19,1,.22,1) 0ms;
  transition: all 500ms cubic-bezier(.19,1,.22,1) 0ms;
}

@font-face {
	font-family: 'Avenir';
	font-weight: normal;
	font-style: normal;
	src: url('../font/Avenir.eot');
	src: url('../font/Avenir.eot') format('embedded-opentype'),
		 url('../font/Avenir.woff2') format('woff2'),
		 url('../font/Avenir.woff') format('woff'),
		 url('../font/Avenir.ttf') format('truetype'),
     url('../font/Avenir.ttc') format('OpenType'),
     url('../font/Avenir.svg') format('svg');
}

@font-face {
	font-family: 'Avenir';
	font-weight: bold;
	font-style: normal;
	src: url('../font/Avenir-Black-03.eot');
	src: url('../font/Avenir-Black-03.eot') format('embedded-opentype'),
		 url('../font/Avenir-Black-03.woff2') format('woff2'),
		 url('../font/Avenir-Black-03.woff') format('woff'),
		 url('../font/Avenir-Black-03.ttf') format('truetype'),
     url('../font/Avenir-Black-03.ttc') format('OpenType'),
     url('../font/Avenir-Black-03.svg') format('svg');
}

code {
  background-color: #EEE;
  padding: 0.5rem;
  display: block;
}

/* 
  INTERACTIVE ELEMENTS -------------------
*/

/*Styling for links*/
a:hover{
  opacity: 50%;
}

a:focus{
  outline: none;
}

/* Styling for the in-text link */
.intext-link {
  color: #E84B25;
  text-decoration: none;
  border-bottom: 1px dotted;
  transition: all ease-in-out 0.5s;
}

.intext-link:hover{
  color: rgb(245, 127, 80);
  border-bottom: 1px dotted transparent;
}

/* Styling for the navigation menu */
.button-nav {
  display: flex;
  align-items: center;

  border-bottom: 2px solid;
  padding: 1.5rem 0.5rem 0.5rem 0.5rem;
  margin: 0.5rem;
  color: #E84B25;
  text-decoration: none;
}

.button-nav img{
  max-width: 40px;
  margin-right: 5px;
}

.button-nav:hover {
  color:#E84B25;
  border-bottom: 2px solid transparent;
}

.button-nav:focus {
  outline: none;
  opacity: 100%;
}

.button-nav-logo{
  display: absolute;
  padding: 1.5rem 0.5rem 0.5rem 3rem;
  color: #E84B25;
  font-weight: 700;
  font-size: 1.5rem;
}

.mainnav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-right: 2rem;
}

/*Styling for Top button*/
#top-button {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 99;

  font-size: 1.5rem;
  border: none;
  outline: none;
  background-color: #E84B25;
  color: white;
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 100px;
}

#top-button:hover {
  opacity: 50%;
}

/*Styling for buttons*/
.button{
  color: white;
  background-color: #E84B25; 
  border-radius: 500px;
  display: flex;
  justify-content: center;
  padding:1rem;
  margin-top: 3rem;
}

.button-download{
  width: 70%;
}

/* 
  OVERALL ELEMENTS -------------------
*/

/*Styling for overall structure*/
.left{
  width: 21vw;
  margin-right: 0.5rem;
  display: flex;
  flex-direction: column;
}

.right{
  width: 50vw;
  display: flex;
  flex-direction: column;
}

.list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.listcontent{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  margin-top: 3rem;
}

.listitem{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 1rem;
}

.listitem-column{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.listitem-column > div:not(:first-child){
  margin-top: 2rem;
}

/* Styling for scroll/fixed background colour/images */
.fixed-bg {  
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat; 
}

.fixed-bg-1{
  background-image: url("../img/banner.jpg");
}

.fixed-bg-2{
  background-color: #E84B25;
}

.scrolling-bg {
  min-height: 90vh;
}


/* Styling for the image*/
img {
  max-width: 100%;
  height: auto;
  margin:0;
}

figure {
  width: 100%;
  margin-left: 0;
}

figcaption {
  font-style: italic;
}

.gallery{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-end;
}

.gallery-content {
  margin: 4rem 0 4rem 0;
  overflow: auto;
  width: 80vw;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.gallery-content > div{
  min-width: 35vw;
}

.gallery-content::-webkit-scrollbar {
  height: 0.5rem;
}

.gallery-content::-webkit-scrollbar-track {
  background-color: #ddd;
}

.gallery-content::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 500px;
}

iframe{
  width: 100%;
  height: 400px;
}

/* 
  TEXT ELEMENTS -------------------
*/

.heading{
  margin: 0;
}

h1{
  margin: 0;
  font-size: 4.5rem;
}

h4{
  font-weight: 700;
}

p{
  max-width: 100%;
  margin-top: 0.5rem;
}

/* Styling for header */
.header{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

/* 
  INDIVIDUAL PAGES -------------------
*/

/* Styling for HOMEPAGE welcome */
.welcome{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  color: #E84B25;
  text-align: center;
}

.arrowdown {
  font-size: 2rem;
  text-align: center;
  margin-top: 5rem;
}

.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}


/* Styling for HOMEPAGE bio */

.bio-content{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.biotext{
  background: white;
  margin: 2rem 0 2rem 2rem;
  padding: 5.5rem;
}

/*Style for HOMEPAGE resume*/
.resume{
  background: white;
  padding: 0 3rem 3rem 3rem;
  margin: 3rem 3rem 3rem 0;
}

.resume-item:nth-of-type(1){ order: 1;}
.resume-item:nth-of-type(2){ order: 2;}

.job-title{
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.resume-title{
  margin-bottom: 1rem;
}

/*Style for PROJECT*/
.project-head > .right{
  width: 45vw;
}

.project-image{
  display: flex;
  align-content: flex-end;
}

.project-image img{
  object-fit: contain;
  object-position: 0 100%;
}

.project-title{
  padding-left: 10vw;
  min-width: 30vw;
}

.project-content{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

table{
  background: white;
  padding: 1.5rem;
  text-align: left;
  margin: 0 2rem 3rem 0;
  border: 5px solid;
  border-image-slice: 1;
}

th{
  vertical-align: top;
  padding: 0 5% 5% 0;
}

td{
  padding: 0 5% 10% 0;
}

/*Style for footer*/
footer{
  margin: 0;
  background: #E84B25;
  color: white;
  display: flex;
  justify-content: center;
  padding: 1rem;
}

footer a:link{
  color: #aaa;
  text-decoration: none;
}

footer a:visited{
  color: #aaa;
  text-decoration: none;
}

footer a:hover, footer a:active{
  color: white;
  text-decoration: none;
}


/* Lazyload */
.blur {
	-webkit-filter: blur(5px);
	filter: blur(5px);
	transition: filter 400ms;
}

.blur.lazyloaded {
	-webkit-filter: blur(0);
	filter: blur(0);
}