@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800); 
/* font-family: 'Open Sans', 'sans-serif'; */

body{
	background-color:white;
}
#image-grid{
	margin:6px;
}
.custom-col{
	padding:6px;	
	overflow:hidden;
}

html, body {
  
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.center-div
{

	margin: auto;
     width: 1000px; 
}


@media screen and (min-width:600px) {
	.wrapper {
		display: grid;
		grid-template-columns: 1.0fr 1.0fr;
		column-gap: 5%;
		
	}
}

.imageBox {
	padding-left: 0px;
	position: relative;
	float: left;
  }

  .imageBox .hoverImg {
	padding-left: 0px;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
  }

  .imageBox:hover .hoverImg {
	display: block;
  }

  .imageBox:hover .hoverImg {
	  display: block;
  }





/* Mobile View: The divs stack on top of each other by default */
.container {
  display: flex;
  flex-direction: column; /* This forces the items to stack vertically */
}

/* Tablet and Desktop View: Change the layout for screens wider than 768px */
@media screen and (min-width: 768px) {
  .container {
    flex-direction: row; /* This changes the layout to horizontal */
    justify-content: space-between; /* Optional: Adds space between the divs */
  }
}

/* Add some styles for visual clarity */
.div-1, .div-2 {
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}



@media screen and (min-width:900px) {
	.wrapper {
		display: grid;
		grid-template-columns: 1.0fr 1.0fr;
		column-gap: 5%;
		padding: 20px;
	}
}

.wrapper {
	max-width: 800px;
	padding: 20px;
	margin: 2em auto;
	
}


@media screen and (min-width:600px) {
	.wrapper3Column {
		display: grid;
		grid-template-columns: 1.0fr 1.0fr 1.0fr;
		column-gap: 5%;
		
	}
}

.wrapper3Column {
	max-width: 1600px;
	padding: 20px;
	margin: 2em auto;

}

@media screen and (min-width:800px) {
	.discordwrapper {
		display: grid;
		padding: 5px;
		grid-template-columns: 1.0fr;
		column-gap: 4%;
		font-size:medium;
		position: center;
		}
}

.discordwrapper {
	max-width: 800px;
	padding: 20px;
	margin: 2em auto;
	font-size:medium;

}


@media screen and (min-width:1050px) {
	.wrappermenu {
		display: grid;
		grid-template-columns: 1.0fr 1.0fr 1.0fr 1.0fr 1.0fr 1.0fr 1.0fr;
		column-gap: 5%;
		position:relative;
		left: -475px;
		}
}

.wrappermenu {
	max-width: 300px;
	margin: 2em auto;
	padding-left: 75px;
	padding-bottom: 15px;
	
}


@media screen and (min-width:800px) {
	.wrappergallery {
		display: grid;
		grid-template-columns: 1.0fr 1.0fr;
		font-size:medium;	
		position: center;
	}
}

.wrappergallery {
	max-width: 1920px;
	margin: 2em auto;
	font-size:medium;

}


.wrapperimages  {
	display: grid;
	grid-template-columns: 1.0fr 1.0fr;
	max-width: 600px;
	margin: 2em auto;
	font-size:medium;
	position: center;
}


.wrappersocialmedia {
	max-width: 800px;
	padding: 20px;
	margin: 2em auto;
}


.left, .right {
  
  margin: 5px;
  max-width: 50%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.left {
  align-items: center;
  justify-content: center;
}

.profile-picture {
  border-radius: 50%;
}

.biog{
width: 300px;
	
}
table#t01{
        border-collapse: separate;
        border-spacing: 30px; /* Apply cell spacing */
    }

table#t02{
        border-collapse: separate;
        border-spacing: 30px; /* Apply cell spacing */
    }

iframe {
	max-width: 100%;
	aspect-ratio: 16/9;
	position: center;

}	

.Steamwidget  {
	padding: 20px;
}