<style>

/* Style of the body */

	:root {
		--site-width: 1300px;
}

	body {
		background-image: url("../Images/Background.jpg");
		background-position: center;
		background-repeat: repeat-y; 
		background-color:#080926;
		font-family:helvetica;
		font-size: 14px;
	}
	
	img {
	  loading: lazy; 
	}

/* Style of the Images Select */
	
	ul {
		white-space: nowrap;
		
	}

	ul, li {
		list-style: none;
		display: inline;
	}
  
/* Style of the Header */
  
	header {
		top: 0px;
		left: 50%;
		position: fixed;
		transform: translateX(-520px);
		max-width: var(--site-width);
		width: 100%;
	}
	
	.header {
		width: 900px;
        height: 185px;
        background: url("../Images/header2.png") no-repeat;
		transition: .2s;
    }
	
    .header:hover {
		width: 900px;
        height: 185px;
        background: url("../Images/header2_hover.png") no-repeat;
		transition: .2s;
    }
	
/* Style of the H1 */
	
	h1 {
		font-size: 40px;
	}

/* Style of the Nav */

	nav {
		top: 165px;
		left: 50%;
		transform: translateX(-560px);
		width: 220px;
		height: 350px;
		background:;
		box-shadow: 0px 0 0 white;
		font-family: "Eurostile-ExtendedTwo";
		font-size: 19px;
		color: white;
		padding: 20px;
		position: fixed;
		text-align: right;
		align-items: right;
	}

/* Style of the Table */

	table, td {
		vertical-align: top;
		padding: 70px;
		border: 1px solid white
		border-collapse: collapse;
		color: white;
	}
	
	
	col {
			width: 700px;
	}

/* Style of the Article */

	article {
		color: white;
	}

/* Style of the Footer */

	footer {
		float: bottom;
		height: 50px;
		padding: 20px;
		text-align: center;
		color: white;
	}
  
/* Style of a link */
  
	a:link, a:visited {
		color: #8490D7;
		text-decoration:none;
		font-weight: bold;
	}
	
	a:hover {
		color: powderblue;
		text-decoration: underline;
	}
	
	a.nav:link, a.nav:visited {
		color: white;
		text-decoration:none;
		font-weight: bold;
	}
	
	a.nav:hover {
			color: powderblue;
			text-decoration: underline;
	}
	
	.select:hover {
		filter: brightness(70%);
		transition: .5s;
		box-shadow: 0 0 3px 1.5px #8dc8e8;
	}
	
	.selecticon:hover {
		filter: brightness(60%);
		transition: .5s;
	}
	
		.selectsmall:hover {
		filter: brightness(70%);
		transition: .5s;
		box-shadow: 0 0 3px 1.5px #8dc8e8;
	}
	
	.select {
		width: 560px;
		padding-bottom: 10px;
		cursor: pointer;
	}	
	
	.selectsmall {
		width: 277px;
		padding-bottom: 10px;
		cursor: pointer;
		align-items: center;
	}
	
	.selecticon {
		width: 560px;
		padding-bottom: 10px;
		cursor: pointer;
	}	
	
	.pic {
		width: 700px;
		padding: 3px;
	}
	
	.articletitle {
		font-size: 19px;
	}	
	
	.articledescr {
		border-bottom: solid 1px;
		font-size: 14px;
	}	
	
	.date {
		border-bottom: solid 1px;
		font-size: 10px;
	}	
	
	.back {
		border-bottom: solid 1px;
		font-size: 20px;
		text-align: right;
	}
	
/* NavBar images */
	
	.home {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Home_Unhover.png") no-repeat;
		transition: .2s;
    }
	
    .home:hover {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Home_Hover.png") no-repeat;
		transition: .2s;
    }
	
	.works {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Works_Unhover.png") no-repeat;
		transition: .2s;
    }
	
    .works:hover {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Works_Hover.png") no-repeat;
		transition: .2s;
    }
	
	.level {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Maps_Unhover.png") no-repeat;
		transition: .2s;
    }
	
    .level:hover {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Maps_Hover.png") no-repeat;
		transition: .2s;
    }
	
	.gamejam {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Gamejam_Unhover.png") no-repeat;
		transition: .2s;
    }
	
    .gamejam:hover {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Gamejam_Hover.png") no-repeat;
		transition: .2s;
    }
	
	.music {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Music_Unhover.png") no-repeat;
		transition: .2s;
    }
	
    .music:hover {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Music_Hover.png") no-repeat;
		transition: .2s;
    }
	
	.aboutme {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Aboutme_Unhover.png") no-repeat;
		transition: .2s;
    }
	
    .aboutme:hover {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Aboutme_Hover.png") no-repeat;
		transition: .2s;
    }
	
	.wip {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Wip_Unhover.png") no-repeat;
		transition: .2s;
    }
	
    .wip:hover {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/Wip_Hover.png") no-repeat;
		transition: .2s;
    }
	
	.twodart {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/2Dart_Unhover.png") no-repeat;
		transition: .2s;
    }
	
    .twodart:hover {
		width: 200px;
        height: 42px;
        background: url("../Images/Nav/2Dart_Hover.png") no-repeat;
		transition: .2s;
    }
	
	.hosted {
		width: 110px;
        height: 36px;
		float: right;
        background: url("../Images/Nav/Hosted_Unhover.png") no-repeat;
		transition: .2s;
		padding: 12px;
    }
	
    .hosted:hover {
		width: 110px;
        height: 36px;
		float: right;
        background: url("../Images/Nav/Hosted_Hover.png") no-repeat;
		transition: .2s;
		padding: 12px;
    }
	
	
/* Lightbox */
	
		.grid {
		display: grid;
		grid-template-columns: repeat(3, 180px);
		justify-content: center;
		align-content: center;
		grid-gap: 10px;
	}
	
	.grid img {
		object-fit: cover;
		width: 180px;
		height: 180px;
		cursor: pointer;
	}
		
	#lightbox {
		position: fixed;
		flex-direction: column;
		z-index: 1000;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		display: none;
	}
	
	
	#lightbox.active {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#lightbox img {
		max-width: 90%;
		max-height: 80%;
		padding: 15px;
		background-color: none;
	}
	
	#lightbox h2 {
		margin-top: 10px;
		color: white;
		justify-content: left;
	}
	
	#lightbox p {
		margin-top: 0;
		color: white;
		justify-content: left;
	}	

	button {
		background: none;
		border: none;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		width: 100px;
	}
	
	button:hover {
		filter: brightness(50%);
		transition: .2s ease;
	}

	button:first-of-type {
		left: 30px;
	}

	button:last-of-type {
		right: 30px;
	}
	
	
</style>