@font-face {
	font-family: MinecraftRegular; src: url('MinecraftRegular-Bmg3.otf');
}
@font-face {
	font-family: MinecraftBold; src: url('MinecraftBold-nMK1.otf');
}
@font-face {
	font-family: MinecraftTen; src: url('MinecraftTen-VGORe.ttf');
}	


body {
	background: #444444 url("dirt.png") repeat scroll 0px 0px;
	font-family: MinecraftRegular, sans-serif;
	width: auto;
	height: auto;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;

}

a {
	text-decoration: none;
	color: orange;
	font-size:x-large;
}

h1, h2, h3 {
	margin: 0;
}

h3 {
	color: #8bc34a;
}

p {
    text-align: left;
}

p.clear {
    clear:both;
}

h3.clear {
    clear:both;
}

.center-image{

}



.title {
	display: block;
	text-indent: 1%;
}

.additional::before {
    content: "+"; /* Content of the pseudo-element is the plus symbol */
    color: #55FF55; /* Color of the plus symbol */
    margin-left: -17px;

}




#main .image {
	display: flex;
	
}

#container {
	background-color: rgba(0,0,0,0.3);
	color: white;
	width: 100%;
	height: auto;

	margin-left: 0px;
	margin-right: 0px;
    align-items: center; /* Vertically center the items */
    border-radius: 3px;
}

#header {
	background-color: rgba(0,0,0,0.0);
	text-align: center;
	font-family: MinecraftTen;
	font-size:56px;
	color: #dddded;
	white-space: nowrap;
/*	margin-right: 1%;*/
}



#nav ul {
		list-style-type: none;
		padding: 0;
}

#nav {
/*
	width: 10vw;
*/
    width: auto;
	float: left;
	white-space: nowrap;
	padding: 20px;
	padding-bottom: 0px;
	background-color: #00000060;
    border-radius: 3px;
    margin-left: 15px;
}

#nav .selected {
	color: orange;
	font-family: MinecraftBold;
}

#main {
	width: 70vw;
	float: right;
	align="center";
}

.additions {
    text-align: justify;
    display:grid;
}

#main .plus {
	color: #55FF55;
}

#main .minus {
	color: #AA0000;
}

#footer {
	clear: both;
	padding: 10px;
	color: #808080;
	text-align: right;
	font-size: medium
}


.tooltip {
  position:relative; /* making the .tooltip span a container for the tooltip text */
}

.tooltip:before {
  pointer-events:none;
  content: attr(data-text); /* here's the magic */
  position:absolute;
  
  /* vertically center */
  left: 20%;
  bottom: 80%;
  transform: translateX(-50%);
  
  /* move to right */
  margin-bottom: 1px; /* and add a small left margin */
  
  /* basic styles */
  width: max-content;
/*  max-width: 40vw;*/
  padding: 5px 5px;
  border-radius: 3px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  text-align: center;
  opacity:0;

      transform: translate(-50%, -20px); /* Initial position */
}

.tooltip:hover:before {

	opacity:1;
  transform: translate(-50%, -10px); /* Move tooltip up on hover */
    transition-delay: 0.3s; /* Adding a 0.5s delay before fade-out */
  transition: opacity 0.25s ease-in, transform 0.3s ease-in; /* Adding fade-out and transform transition */
}

.tooltip:not(:hover):before {
  opacity: 0; /* Fade-out effect when not hovered over */
  transform: translate(-50%, -20px); /* Move tooltip back up when not hovered over */
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in; /* Adding fade-out and transform transition */
   transition-delay: 1.0s; /* Adding a 0.5s delay before fade-out */
}

@media only screen and (max-width: 1000px) {
	#main .additional {
		text-align: center;
/*		margin-left: 0%;*/
		color: #55FF55;
		width: 720px;
	}
	#content{
	    margin-right: 10%;
	}
	.tooltip:before {
	max-width: 40vw;
	}
}



@media only screen and (max-width: 1800px) {
	#main .additional {
		text-align: center;
/*
		margin-left: 0%;
*/
		color: #55FF55;
		width: 1000px;
	}
	#content{
			margin-right: 10%;
	}
	.tooltip:before {
	max-width: 40vw;
	}
}

@media only screen and (max-width: 1800px) {
	.header_gap {
		display:block;
	}

}


@media only screen and (min-width: 1801px) {
/* Make additional features section look correct when centered */
	#main .additional {
		text-align: center;
/*
		margin-left: 20%;
*/
		color: #55FF55;
		width: 1600px;
		}
	#content{
			margin-right: 14%;
	}
	.title{
	text-indent: 2%
	}

	.tooltip:before {
	max-width: 800px;
	}
}


.download-text.tooltip::before {
    margin-left:52px;
}

#download-icon.tooltip::before {
    margin-left:20px;
    bottom:170%;
}

@media only screen and (min-width: 1801px) {
	.header_gap {
		display:none;
	}

}






/*
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
	opacity: 0;
	transition: opacity 0.2s;
	background-color: rgba(0,0,0,0.66);
	color: #fff;
	text-align: center;
	padding: 5px 5px;
	border-radius: 3px;

	/* Position the tooltip text - see examples below! */
/*	position: absolute;
	z-index: 1;

	/* Top tooltip */
/*	width: 20vw;
	bottom: 100%;
	left: 50%;
	margin-left: -10vw;

}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
/*  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
/*.tooltip:hover .tooltiptext {
	opacity: 1;
}*/