@charset "utf-8";

/* CSS Document */
body {
	background-color:#e8ddd8;}

/*--------------------------------------------------------------------*/

 /* The sidebar menu */
nav {
  	height: 100%; /* Full-height: remove this if you want "auto" height */
 	width: 200px; /* Set the width of the sidebar */
 	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
 	z-index: 1; /* Stay on top */
 	top: 0; /* Stay at the top */
 	left: 0;
 	background-color:#4c5760 ; /* grey */
	overflow: auto;
 	overflow-x: hidden; /* Disable horizontal scroll */
 	padding-top: 20%;}

/* The navigation menu links */
nav a {
 	padding: 6px 8px 6px 16px;
  	text-decoration: none;
 	font-family: 'Kavivanar', cursive;
	font-size: 30px;
	margin-left: 10%;
	text-align: left;
  	color: #ffffff;
 	display: block;}

/* When you mouse over the navigation links, change their color */
nav a:hover {
 	background-color: #4c5760;
	color: #821a45;
	text-decoration-line: none;}

.active {
	color: #1a1a1a;
	font-family: 'Kavivanar', cursive;
	text-decoration-color: #821a45;
	text-decoration-line: underline;
	text-decoration-style:double;}

/*------------------------------------------------*/

.logo {
	width: 170px;
	display: inherit;
	margin-top: -270px;
	margin-left: 10%;
	margin-right: auto;
	margin-bottom: 160px;}

/*------------------------------------------------*/

.icons {
	display: inline-flex;
	position: absolute;
	transform: translate(-50%,-50%);
	align-content: center;
	margin-top: 100%;
	margin-left: 35%;
	margin-right: auto;
	cursor:pointer;}

.icons li { list-style: none}

.icons li a {
	width: 10px;
	height: 10px;
	text-align: center;
	line-height: 10px;
	font-size: 30px;
	margin: 0 5px;
	position: relative;	}

.icons li a .fa {
	position: relative;
	color:#1a1a1a;
	transition: 2s;}

.icons li a:hover .fa {
	transform:rotateY(360deg);}

.icons li:nth-child(1) a:hover { color:#0077B5;}
.icons li:nth-child(2) a:hover { color:#3b5999;}
.icons li:nth-child(3) a:hover { color:#cd201f;}
.icons li:nth-child(4) a:hover { color:#e4405f;}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
 	.sidenav {padding-top: 15px;}
 	.sidenav a {font-size: 18px;}	} 

/*--------------------------------------------------------------------*/

/*billedegalleri*/

.gallery {
	margin-left: 200px;
	position: relative;
	display:inherit;
	padding: 15px;}

/** CSS-LIGHTBOX MARKUP **/
.csslightbox {
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align:center;
	text-decoration: none;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);}

.text1 {
	position: relative;
	color:#ffffff;
	background-color: #1a1a1a; opacity: 0.7;
	margin-left: 1100px;
	width: 20%;
	margin-top: -500px;
	text-align: justify;
	font-family: 'Kavivanar', cursive;
	font-size: 20px;
	text-decoration: none;
	z-index: 999;}

.csslightbox img {
	max-width: 90%;
	max-height: 80%;
	margin-top: 5%;
	border: 10px #000;
	border-style: double;
	padding: 2px;}

.csslightbox:target {
	outline: none;
	display: block;}



/*--------------------------------------------------------------------*/

/*Layout of page - content*/

section {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin-left: 200px;}

article {
	width: inherit;
	margin: 0 20px;
	text-align: justify;}


.part1 {
	float: left;
	width: 80%;
}

.part2 {
	float: left;
	width: 60%;
}
.part3 {
	float: left;
	width: 100%;
}

.part4 {
	float: right;
	width: 60%;
}


/*--------------------------------------------------------------------*/

/*Text - style*/

/*overskrift 1*/
h1 {
	color:#821a45;
	margin-left: 10px;
	font-family: 'Kavivanar', cursive;
	font-size: 60px;
	margin: 20px;
	position:relative;}

/*overskrift 2*/
h2 {
	position:relative;
	color:#821a45;
	margin-left: 10px;
	font-family: 'Kavivanar', cursive;
	font-size: 40px;}

/*overskrift 3*/
h3 {
	position:relative;
	color:#821a45;
	margin-left: 10px;
	line-height: 0.2;
	font-family: 'Kavivanar', cursive;
	font-size: 25px;}

/*overskrift 3*/
h4 {
	position:relative;
	color:#821a45;
	margin-left: 10px;
	font-family: 'Merienda Bold';
	font-size: 18px;}

/*overskrift 3*/
h5 {
	position:relative;
	margin-left: 3px;
	font-family: 'Merienda', cursive;
	font-size: 16px;}

/*Text - about me*/
.main1 {
	font-family: 'Merienda', cursive;
	font-size: 16px;
	padding: 10px;
	position:relative;
	display:inherit; }

/*Text - contact*/
.main2 {
	font-family: 'Merienda', cursive;
	font-size: 16px;
	padding: 10px;
	max-width: 62%;
	position:relative;
	display:inherit;}


/*--------------------------------------------------------------------*/

/*List of skills*/

.flex-container1 {
	display: inline-flex;
	align-self: flex-end;
	padding: 0;
	}

.flex-container2 {
	display: inline-flex;
	align-self: flex-end;
	padding: 0;
	}

.listtext1 {
	font-family: 'Merienda', cursive;
	font-size: 16px;
	margin-left: 45px;
	position:relative;
	display:inherit;
	text-align: left;}

.listtext2 {
	font-family: 'Merienda', cursive;
	font-size: 16px;
	margin-left: 125px;
	position:relative;
	display:inherit;
	text-align: left;}

ul.list1 {
	list-style-type: disc;
	font-family: 'Merienda', cursive;
	font-size: 16px;
	margin-left: 10%;
	width: 220px;}

ul.list2 {
	list-style-type: disc;
	font-family: 'Merienda', cursive;
	font-size: 16px;
	margin-left: 10%;
	width: 200px;
	position:relative;
	text-align: left;}

/*-------------------------*/

.link {
	margin-left: 10px;
	font-size: 20px;
	font-style:oblique;
	text-align: left}

.link a {
	color: #48999e;
	text-decoration-line: none;
	cursor:pointer;}

.link a:hover {color: #821a45; opacity: 0.6; text-decoration-line:underline;}


/*--------------------------------------------------------------------*/

/*Contact form*/

input[type=text], select, textarea {
 	width: 100%;
	padding: 8px;
 	border: 1px solid #e8ddd8;
	border-radius: 4px;
	box-sizing: border-box;
 	margin-top: 2px;
 	margin-bottom: 14px;
 	resize: vertical;
	font-family: 'Kavivanar', cursive;
	font-size: 14px;
	color: #821a45;}

input[type=submit] {
  	background-color:#48999e;
	color: #ffffff;
	font-family: 'Merienda', cursive;
	font-size: 16px;
  	padding: 8px 10px;
  	border:thin;
  	border-radius: 4px;
	width: 65px;
  	cursor:pointer;}

input[type=submit]:hover {
  	background-color: #48999e;
	color: #ffffff;
	opacity: 0.6;}

.container {
  	border-radius: 5px;
  	padding: 10px;
	width: 650px;}

/*------------------------------------------------*/


.portrait {
	position: relative;
	display: inherit;
	margin: 3%;	
	text-align: center;}

.portrait2 {
	position: relative;
	display: inherit;
	margin: 3%;	
	padding-top: 10px;
	text-align: right;}

.quote {
	z-index: -1;
	text-align: right;
	
}

/*------------------------------------------------*/

.icons2 {
	display: inline-flex;
	position:relative;
	transform: translate(-15%,0%);
	color:#48999e;
	opacity: 1;
	text-decoration: none;
	cursor:pointer;}

.icons2 li { list-style: none}

.icons2 li a {
	text-align: center;
	line-height: 45px;
	font-size: 40px;
	margin: 0 15px;
	position: relative;}

.icons2 a{
	color: #48999e;}

.icons2 li a:hover {
	color: #fff;}

.icons2 li:nth-child(1) a:hover { color:#0077B5;}
.icons2 li:nth-child(2) a:hover { color:#3b5999;}
.icons2 li:nth-child(3) a:hover { color:#cd201f;}
.icons2 li:nth-child(4) a:hover { color:#e4405f;}


/*--------------------------------------------------------------------*/

/*copyright footer*/
footer{
	font-family: 'Merienda', cursive;
	text-align: center;
	font-size:15px;
	padding: 4px;
	color: #ffffff;
	position: fixed;
	z-index: 0; /* Stay on top */
	bottom: 0;
	width: 100%;
	display: inherit;
	background-color:#821a45;
	opacity: 0.8;}

/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* If you want the text to be left-aligned on small screens */ }
}