/***************************************************************************
	designed by:
 __      __                           _____       _     _          _       
 \ \    / /                          |  __ \     | |   | |        | |      
  \ \  / /_ _ _ __   ___  ___  __ _  | |__) |___ | |__ | | ___  __| | ___  
   \ \/ / _` | '_ \ / _ \/ __|/ _` | |  _  // _ \| '_ \| |/ _ \/ _` |/ _ \ 
    \  / (_| | | | |  __/\__ \ (_| | | | \ \ (_) | |_) | |  __/ (_| | (_) |
     \/ \__,_|_| |_|\___||___/\__,_| |_|  \_\___/|_.__/|_|\___|\__,_|\___/ 

**************************************************************************/


/**************************************************************************
============================= TABLE OF CONTENTS ===========================
[1.0] Fonts 
[2.0] General 
	[2.1] Headers
	[2.2] Links
	[2.3] Lists
	[2.4] Images
[3.0] Layout 
	[3.1] Header
	[3.2] Navigation
	[3.3] Gallery
	[3.4] About
	[3.5] Copyright
[4.0] Imported 
**************************************************************************/


/**************************************************************************
[1.0] Fonts ---------------------------------------------------------------
**************************************************************************/
@font-face {
	font-family: "OpenSans";
	src: url("img/OpenSans-Regular.ttf");
}
@font-face {
	font-family: "OpenSansLight";
	src: url("img/OpenSans-Light.ttf");
}
@font-face {
	font-family: "Champagne";
	src: url("img/ChampagneLimousines.ttf");
}

/**************************************************************************
[2.0] General  ------------------------------------------------------------
**************************************************************************/

html {
	scroll-behavior: smooth;
}

body {
	background: url('img/rainbow-min.png') no-repeat fixed #000;
	background-size: 100%;
	margin: 0;

	/* Typography */
	color: #fff;
	font: 85%/1.8 "OpenSansLight", Helvetica, sans-serif;
	text-shadow: .1em 0 2px rgba(0,0,0,.8);
	-webkit-text-stroke: .2px;
}

/* Change orientation of background on smaller screens */ 
@media screen and (max-width: 1200px) {
	body {
		background: url('img/rainbow-min-portrait.png') #000;
	}
}

/* [2.1] Headers -------------------------------------------------------*/
h2, h3 {
	font-family: "Champagne", sans-serif;
	margin: 0; 
}

h2 {
	font-size: 3.5em;
	font-weight: normal;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 7px;
	margin: 2em 0 0 1em;
}

h4 {
	font-size: 1.5em;
}

/* [2.2] Links ----------------------------------------------------------*/
a {
	text-decoration: none;
 	font-weight: bold;
	color: #fff;
}
	a:hover {
		border: 0;
		text-decoration: underline;
	}

/* [2.3] Lists ---------------------------------------------------------*/
ul li {
	 padding: 0 .5em 1em .5em;
}
	ul li a {
		font-size: 1.2em;
	}

/* [2.4] Images ---------------------------------------------------------*/
img {
	margin: 0; padding: 0;
}


/**************************************************************************
[3.0] Layout  ------------------------------------------------------------
**************************************************************************/

/* [3.1] Header --------------------------------------------------------*/
#introduction {
	text-align: center;
	position: relative;
}

/* Show header text in the centre of large screens */
@media screen and (min-width: 67.5em) {
	#header {
		margin-top: 10%;
	}
	#introduction {
		height: 100vh; /* Full-screen */
	}
}

/* Header on small screens */
@media screen and (max-width: 67.5em) {
	#header {
		padding-top: 5em;
	}
}

#header h1 {
	padding: 0; margin: 0;
	font: bold 5em "Champagne", sans-serif;
}

#objective {
	text-align: center;
	text-transform: none;
	font-size: 2em;
	font-weight: normal;
	letter-spacing: 0;
	margin-top: 0;
	padding: 0 2em 0 2em;
	display: block;
}

#objective a {
	font: bold 60% "Champagne", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 1px rgba(224, 224, 224, 0.5) solid;
	padding: .7em;
}
	#objective a:hover {
		text-decoration: none;
		border: 1px rgba(250, 250, 250, 0.9) solid;
	}

/* [3.2] Navigation ------------------------------------------------------*/
nav ul {
	margin: .2em auto; margin-top: 0;
	text-align: center;
	list-style: none;
	display: flex;
	justify-content: center;
}

nav ul li {
	min-width: 15em;
}

nav ul li a {
	display: block;
	padding: 1em 1.5em;
	margin: .1em; margin-top: 0;
	background: rgba(0,0,0,0.75);
	border-radius: 0 0 30px 30px;
	font: 1.5em "Champagne", sans-serif;
	font-weight: normal;
}
	nav ul li a:hover {
		background: rgba(0,0,0,0.85);
		color: #f9f9f9;
	}

/*nav ul li#linkedin*/
	#linkedin a:hover {
		text-decoration: none;
		background: #0077B5;
	}

/* Navigation on Small Screens/Mobile */
@media screen and (max-width: 60em) {
	nav ul {
		padding: 0;
		margin: 0;
		margin-bottom: 2em;
		justify-content: space-between;
	}
	nav ul li {
		padding: 0;
		min-width: 0;
		width: 100%;
	}
	nav ul li a {
		border-radius: 0;
		margin: 0;
		padding: 1em;
	}
}
	
/* [3.3] Gallery --------------------------------------------------------*/
.gallery {
	padding: 0; margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	flex-direction: column;
}

.gallery .item {
	background: rgba(0,0,0,0.9);
	margin: 1em 0 1em 0;
}

	.gallery .thumbnail img {
		width: 100%;
		margin: 0;
		height: auto;
		overflow: hidden;
	}

.gallery .description {
	text-align: left;
	padding: 1em;
}

/* Display side-by-side on large screens */
@media screen and (min-width: 67.5em) {
	.gallery .item {
		display: flex;
		justify-content: space-evenly;
	}
	.gallery .thumbnail {
		width: 50%;
		display: flex;
		overflow: hidden;
	}
		.gallery .thumbnail img {
			margin-left: 0;
			padding: 1em;
			overflow: hidden;
		}
		
	.gallery .description {
		width: 50%;
	}
}

/* Gallery Description Styles */
h3.caption {
	font-weight: normal;
	font-size: 2em;
}
.info {
	font-size: .9em;
	text-transform: uppercase;
	text-align: left;
}

.download {
	font-size: .9em;
	text-transform: uppercase;
	text-align: left;
}

.download a {
	font-size: .95em;
	padding: .5em; background: rgba(0,0,0,0.75);
	border-radius: .5em;
	text-align: left;
}
	.download a:hover {
		background: rgba(0,0,0,0.85);
	}

.date {
	text-transform: uppercase;
	font-size: 1.2em;
}

/* [3.4] About --------------------------------------------------------*/
#aboutBox {
	text-align: left;
	padding: 0 2em 1em 2em;
	background: rgba(0,0,0,0.7);
	overflow: hidden;
}

#aboutBox h3 {
	text-transform: uppercase;
	font-size: 2em;
}

/* List of Skills & Courses */
#aboutBox div {
	padding: 1em;
}

#aboutBox ul {
	margin: 0; padding: 0;
	list-style: none;
}
#aboutBox ul li {
	margin-bottom: .5em;
	padding: 1em;
	background: rgba(0,0,0,0.6);
	border-radius: 0.6em;
}

/* Instagram Link */
#instagram i {
	padding: 0.2em;
	border-radius: 1em;
	background: rgba(0,0,0,0.6);
}

#instagram i a:hover {
	text-decoration: none;
}

#instagram:hover i {
	/* Instagram Logo CSS3 Gradient by Thomas Rye https://codepen.io/thomasrye/pen/VaRoYv */
	background: #d6249f;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

/* About */
#about p {
	font-size: 1.6em;
	line-height: 1.7em;
}

/* Courses */
#courses ul {
	display: flex;
	text-align: center;
}

#courses ul li {
	margin: 0 1em 1em 0;
}

/* Show columns of about section on larger screens */
@media screen and (min-width: 67.5em) {
	#aboutBox {
		display: grid;
		grid-template-columns: 1.2fr 0.8fr;
		grid-template-rows: 0.4fr 1fr;
		grid-template-areas:
			"about skills"
			"courses courses"
	}

	#about {
		grid-area: about;
	}

	#skills {
		grid-area: skills;
	}

	#courses {
		grid-area: courses;
	}
}

/* [3.5] Copyright -------------------------------------------------------*/
#copyright {
	display: block;
	margin-top: 2em;
	padding: 1em;
	background: rgba(0,0,0,0.75);
	text-align: center;
}


/**************************************************************************
[4.0] Imported  -----------------------------------------------------------
**************************************************************************/

/* Modal Popups by Anonymous from https://jsfiddle.net/3Vykc/ */

.modal {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modal:target {
	opacity: 1;
	pointer-events: auto;
}

.modal > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: rgba(0,0,0,.8);
}

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover {
	background: #ff0000;
	text-decoration: none;
}