/* fonts */
@font-face {
  font-family: 'ubuntu';
  src: url('./fonts/ubuntu/ubuntu-light.ttf');
  font-weight: 1;
  font-style: normal;  
}

@font-face {
  font-family: 'ubuntu';
  src: url('./fonts/ubuntu/ubuntu-regular.ttf');
  font-weight: 2;
  font-style: normal;  
}

@font-face {
  font-family: 'ubuntu';
  src: url('./fonts/ubuntu/ubuntu-medium.ttf');
  font-weight: 3;
  font-style: normal;  
}

@font-face {
  font-family: 'ubuntu';
  src: url('./fonts/ubuntu/ubuntu-bold.ttf');
  font-weight: 4;
  font-style: normal;  
}

body {
	background-color: #333333;
	max-width: 100%;				
	margin: auto;
	padding:0;
	border: none;
	border-style: none;  
	font-family: ubuntu; 
	font-size: 20px;
	font-weight:2;
	color:#ffffff;	
}

html {
	height: 100%;
	background-color:#ffffff;
}

/* headings */
h1 {
	font-weight:4;
	font-size: 36px;
	text-align: center;
	width:100%;
	padding: 0;
	margin:0;	
	line-height:1.5;
}

h4 {
	font-weight:2;
	font-size: 20px;
	background-color:#aaff66;
	border-radius:24px;
	padding:4px 0;
	width:100%;
	margin-top:16px;
	margin-bottom:16px;
	text-align:center;	
}

h5 {
	border-width:0;
	font-weight:2;
	font-size: 20px;
	background-color:#777777;
	color:#ffffff;
	border-radius:24px;
	padding:3px 16px;
	max-width:100%;
	margin-top:0px;
	margin-bottom:16px;
	text-align:center;
}

h6 {
	font-weight:2;
	font-size: 18px;
	background-color:#777777;
	color:#ffffff;
	border-radius:24px;
	padding:0;
	padding-left:24px;
	padding-right:24px;
	width:max-content;
	margin-top:16px;
	margin-bottom:16px;
	text-align:center;
}

.release-box {
	font-size: 18px;
	font-weight:2;
	display: flex; 
	justify-content: space-around;
	flex-wrap: wrap;
}

.header-box {	
	max-width:1280px;
	font-size: 18px;
	font-weight:2;
	display: flex; 
	justify-content: space-between;	
	flex-wrap: wrap;	
	padding:0 8px;
	margin: 12px auto;
}

.header-box li {
	height:56px;
	display: flex; 
	align-items: center;
	line-height:2;
	margin:8px 8px;
}

/* release links */
.release-grid {	
	display: flex;	
	column-gap:12px;	
	gap:12px;
}

.release-heading, .release-heading-year {	
	font-weight:2;
	font-size: 18px;
	background-color:#777777;
	border-color:#777777;
	border-style:solid;
	border-width:2px;
	color:#ffffff;
	border-radius:24px;
	padding:0 16px;	
	margin-top:16px;
	margin-bottom:16px;
	text-align:center;
}

.release-info {	
	text-align:center;
}

.release-info a:link{
	line-height:24px;
	display:flex;
	justify-content:center;	
	text-align:center;
	color: #333333;
	border-width:2px;
	border-style:solid;
	border-color:#333333;
	border-radius:16px;
	padding:3px 12px;
	margin-bottom:14px;
	font-weight: 2;
}

.release-info a:hover{
	color:#ffffff;
}

a
{
	cursor: pointer;
}

/* a white box with round corners that can contain top image and text */
.mainbox {
	border-radius: 24px;
	padding:0;
	margin:auto;	
	color: #333333;
	background-color: #ffffff;
	font-weight: 1;
	max-width:1280px;
	height:auto;
}

.mainbox a {
	text-decoration:none;
}

/* top nav menu */
.nav {
  list-style-type: none;    
  margin:0;
  padding:0;
}

.nav ul {
	margin:0;
	padding:0;
}

.nav li {
  float: left;
}

.nav img {
  padding:4px 12px;  
  width:48px;
  height:48px;
}

.nav img:hover {
  color: #333333;
}

.nav li a {
  display: block;
  color: #ffffff;
  padding: 0 16px;  
  text-decoration: none;
  font-weight:3;
  font-size:24px;
}

.nav li a:hover {
	color: #333333;
	background-color: #aaff66;
	border-radius: 24px;
}

ul {
	list-style-type: square;
	padding:0;
	margin:0;	
	line-height:2;
}

.content ul{	
	padding-left:24px;
}

#line {
	display:block;
	margin:0;
	padding:0;
}

p {
	padding:0;
	margin:0;
}

/* box in footer that seperates privacy / imprint links from cpoyright message */
.footer-box {
	margin: auto;	
	max-width: 1280px;	
	font-size: 16px;
	display: flex;	
	align-items: center;
	justify-content:space-between;	
	flex-wrap: wrap;
	padding-top:24px;	
}

.footer-box a {
	margin-left:16px;
}

.footer-box div {
	padding-bottom:24px;
}

.footer-box p {
	padding-left:24px;
	padding-right:24px;
}

.image-container {
	position: relative;
	width: 100%;
	padding-bottom: 40%;
	background:#333333;
}

/* image that is displayed on top of .mainbox */
.top-image {
	margin:auto;
	border-radius: 24px 24px 0 0;
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;	
}

.profile-container {
}

.profile-image {
	border-radius: 24px;
}

/* white background for text content */
.content {
	padding:48px;	
	color:#333333;
	font-weight:2;
	line-height: 1.7;
	height:100%;
}

/* container for download icons */
.gallery-grid {	
	padding:0;
	width:100%;	
	display: flex;
	flex-wrap: wrap;	
	justify-content: flex-start;
	column-gap:1.25%;
	grid-row-gap:14px;
}

.gallery-thumb {	
	width:32.5%;
	transition: 0.3s;
	border-radius: 8px;
	cursor:pointer;
}

.gallery-thumb:hover {opacity: 0.5;}

.download-grid {
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	column-gap:16px;	
}

.break {
  flex-basis: 100%;
  height: 0;
}

.download a {	
	display: flex;
	align-items: center;
	width:256px;
	border: 2px solid #aaff66;
	border-radius: 16px;	
	padding: 8px;
	padding-left:16px;
	margin-bottom:12px;	
	color:#333333;	
	text-decoration:none;
}

.download a:hover {	
	background-color: #aaff66;
	border-radius: 16px;
	color: #333333;		
}

.download-text {
	width:100%;
	padding-left:12px;	
	padding-bottom:2px;
	text-align: left;
}

footer a {
	color:#ffffff;
	padding: 8px;
	text-decoration:none;	
}

footer a:hover {
	color: #333333;
	background-color: #aaff66;
	border-radius: 16px;
}

/* gallery popup modal */
.gallery-modal-background {
  display: none;
  position: fixed;
  align-items:center;
  z-index: 1;  
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000000;
  background-color: #000000e2;
}

.gallery-modal-content {
	margin: auto;
	width: 96%;
	height: 96%;
	object-fit: contain;
}

/* social icon hover images */
.social-discord, .social-twitter, .social-instagram, .social-youtube, .social-soundcloud{
	margin: 0;
	padding: 0;
}

.social-discord:hover{
	content: url("./assets/discord_hover.webp");
	background-color: #aaff66;
	border-radius: 24px;
}

.social-twitter:hover{
	content: url("./assets/twitter_hover.webp");
	background-color: #aaff66;
	border-radius: 24px;
}

.social-instagram:hover{
	content: url("./assets/instagram_hover.webp");
	background-color: #aaff66;
	border-radius: 24px;
}

.social-youtube:hover{
	content: url("./assets/youtube_hover.webp");
	background-color: #aaff66;
	border-radius: 24px;
}

.social-soundcloud:hover{
	content: url("./assets/soundcloud_hover.webp");
	background-color: #aaff66;
	border-radius: 24px;
}

/* game button*/

.game-button {
	display:flex;	
	align-items: center;
	height:80px;	
	opacity:0.6;
	border-radius: 16px;
	margin-top:16px;
	margin-bottom:16px;	
}

.game-button:hover {		
	opacity:1.0;
}

.game-button p {		
	display: flex;
	align-items: center;
	justify-content:center;
	width:256px;
	padding:0;	
	background-color:#333333;
	color:#aaff66;
	font-weight:3;
	font-size:24px;	
	height:100%;	
	border-radius: 16px 0 0 16px;
}

/* small details style (aufklapp dings) */
details > summary {
	font-weight:2;
	font-size: 20px;
	color:#ffffff;
	background-color:#777777;
	border-radius:24px;
	padding:0;
	padding-left:24px;
	padding-right:24px;
	width:max-content;
	margin-top:16px;
	margin-bottom:16px;
	text-align:center;
}

/* big details style (aufklapp dings) */
.big-summary details > summary {
	font-weight:2;
	font-size: 20px;
	background-color:#aaff66;
	color:#333333;
	border-radius:24px;
	padding:4px;
	padding-left:32px;
	padding-right:32px;
	width:max-content;
	margin-top:16px;
	margin-bottom:16px;
	text-align:center;
}

/* p links */
p a:link {	
	color: #333333;	
	padding: 2px 4px;
	font-weight: bold;
}

p a:hover {	
	background:#333333;
	color: #ffffff;
	border-radius: 10px;
	border-color:#333333;
}

p a:visited:hover {
	background:#333333;
	color: #ffffff;
}

p a:active {
	background:#333333;
}

p a:visited:active {
	background:#333333;
}

p a:visited {
	color: #333333;
}

/* font colors */
.dark {
	color: #333333;
}

.light {
	color: #777777;
}

.white {
	color: #ffffff;
}

.green {
	color: #aaff66;	
}

.dark-green {
	color: #609440;
}

@media screen and (max-width: 1280px)
{
	.mainbox, .top-image, .image-container {
		border-radius:0;
	}
	
	.gallery-grid {	
		grid-row-gap:1vw;
	}
}

@media screen and (max-width: 890px)
{
	.header-box {	
		justify-content: center;
	}
	
	.header-box li {
		height:8vw;
	}
	
	.nav li a {
		font-size:4vw;
		padding: 0 2vw;  
	}
	
	.nav img {
		width:8vw;
		height:8vw;
		padding-left:1vw;
		padding-right:1vw;
	}
	
	.game-button {
		height: 10vw;
		min-height: 40px;		
	}
	
	.game-button p {
		width:30vw;
		font-size:3.1vw;
	}
	
	.content {
		padding:4vw;
	}
}

@media screen and (max-width: 506px)
{
	.footer-box {
		justify-content:center;
	}
}