* {
	margin: 0;
}

.hidden {
	display: none;
}

body {
	height: 1300px;
	background-size: 100% 100%;
	background-image: url("images/DeepBerryBackground.png"); 
}

header {
	width: 1500px;
	height: 200px;
	background-image: url("images/DeepBerryHeader.png");
	margin: 50px auto 25px;
	border-radius: 25px;
	border: solid white 3px;
	position: relative;
}

h1 {
	text-align: center;
	margin: 45px 10px;
	font-size: 60px;
	color: ghostwhite;
}

h2 {
	text-align: center;
	margin: 20px 0;
}

#logo {
	font-size: 100px;
	text-align: center;
}

#socials a{
	color: white;
}

#socials ul {
	list-style-type: none;
	position: absolute;
	right: 10px;
	bottom: 5px;
}
#socials li {
	display: inline;
	border: hotpink solid 1px;
}

section {
	width: 1500px;
	height: 1000px;
	margin: 0 auto;
}

#tab-container {
	position: absolute;
	background: red;
}

#tab-menu {
	color: white;
	padding: 0;
	margin: 0;
}

.tabs {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 40px;
	display: inline-block;
	width: 301.2px;
	height: 50px;
	border-radius: 20px 20px 0 0;
	position: absolute;
	top: 3px;
	cursor: pointer;
}

.maintabs {
	position: absolute;
	margin: 0;
	width: 1500px;
	height: 950px;
	top: 47px;
	background: lightgoldenrodyellow;
	border: 3px solid white;
	overflow-y: scroll;
}

.maintabs p {
	font-size: 25px;
	text-align: center;
	color: white;
	margin: 45px 125px;
}



#tab-main1 {
	z-index: 2;
	background-color: #966fe0;
}

#tab-main1 p, #tab-main1 h1{
	color: white;
}

#stamps, #links{
	height: 450px;
	width: 400px;
	display: inline-block;
	margin: 0 40px;
	top: 0;
}

#tab-main1 section {
	display: inline-flex;
}

#stampsflex {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

#changelog {
	height: 500px;
	width: 500px;
	border: solid white 3px;
	color: white;
	overflow-y: scroll;
	background-color: rebeccapurple;
	margin: 0 auto;
	display: inline-block;
}

.changed {
	color: white;
	padding: 20px;
	border-top: solid white 3px;
	border-bottom: solid white 3px;
}

#tab-main2 {
	z-index: 0;
	background-color: #d86fe0;
}

#tab-main3 {
	z-index: 0;
	background-color: #ff68b4;
}

#chara-container {
	width: 100%;
	height: 100%;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

#chara-container div {
	height: 340px;
	background-color: rebeccapurple;
	border-radius: 25px;
}

#chara-container img{
	width: 300px;
	height: 300px;
	border-top-right-radius: 25px;
	border-top-left-radius: 25px;
	cursor: pointer;
}

#chara-container p {
	width: 300px;
	height: 40px;
	margin: 0;
}

#darken {
	background-color: rgba(0, 0, 0, 78%);
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 8;
	position: fixed;
}

#chara-popup {
	width: 1250px;
	height: 700px;
	z-index: 10;
	position: fixed;
	top: 50px;
	left: 325px;
}

#chara-popup-close {
    width: 50px;
	position: relative;
	color: red;
	font-size: 70px;
	padding: 0;
	cursor: pointer;
}

#chara-popup-container {
	width: 100%;
	height: 100%;
	display: inline-flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

#chara-popup-image {
	width: 600px;
	display: inline-block;
}

#chara-popup-image img{
	height: 600px;
	margin: 0 auto;
}

#chara-popup-text {
	width: 450px;
	display: inline-block;
	color: white;
	font-size: 30px;
}

#tab-main4 {
	z-index: 0;
	background-color: #ffa668;
}

#tab-main5 {
	z-index: 0;
	background-color: #fcde7d;
}

#tab1 {
	background-image: url("images/Home.PNG");
	background-size: 100%;
	left: 0px;
	z-index: 3;
}
#tab2 {
	background-image: url("images/Comic.PNG");
	background-size: 100%;
	left: 301.2px;
}
#tab3 {
	background-image: url("images/Characters.PNG");
	background-size: 100%;
	left: 602.4px;
}
#tab4 {
	background-image: url("images/Games.PNG");
	background-size: 100%;
	left: 903.6px;
}
#tab5 {
	background-image: url("images/Gallery.PNG");
	background-size: 100%;
	left: 1206px;
}

#gallery-button-container {
	width: 1100px;
	margin: 0 auto;
}

.gallery-buttons {
	margin: 50px;
	padding: 0;
	text-align: center;
	font-size: 40px;
	color: white;
	display: inline-block;
	width: 400px;
	height: 75px;
	border-radius: 25px;
	top: 3px;
	background-color: #d86fe0;
	scale: 1;
	transition: scale .3s ease-in-out;
	border: solid white 3px;
}

#gb1 {
	background-image: url("images/OCs.PNG");
}

#gb2 {
	background-image: url("images/FanArt.PNG");
}

#gb3 {
	background-image: url("images/ArtFight.PNG");
}

#gb4 {
	background-image: url("images/Kandi.PNG");
}

.gallery-buttons:hover {
    transition: scale .3s ease-in-out;
    scale: 1.05;
}

/*styles for galelery------------------------------------------------------------------------------------------------------*/

.home {
	width: 75px;
	height: 75px;
	margin: 10px;
	font-size: 50px;
	background-image: url("images/BackArrow.PNG");
	position: absolute;
	top: 20px;
	left: 20px;
	background-size: 100% 100%;
}

#oc-container {
	width: 1500px;
	height: 1000px;
	background-color: rebeccapurple;
	border: solid white 3px;
	border-radius: 25px;
	margin-top: 75px;
	overflow-y: scroll;
}

.gallery-sections {
	height: 425px;
	width: 1400px;
	border: solid white 3px;
	margin: 25px auto;
	border-radius: 30px;
}

#af24 {
	height: 1700px;
}

.ocgs {
	background-color: hotpink;
}

.fangs {
	background-color:  #d86fe0;
}

#ducktales, #tawog, #dtiys, #other {
	height: 725px;
}

.fightgs {
	background-color: #ffa668;
}

.gallery-sections h2 {
	text-align: left;
	margin: 30px 25px 10px;
	color: white;
	font-size: 30px;
}

.gallery-images {
	background-color: lightgoldenrodyellow;
	width: 300px;
	height: 300px;
	margin: 0 22px 22px;
	display: inline-block;
	transition: scale .3s ease-in-out;
}

.gallery-images:hover {
	transition: scale .3s ease-in-out;
    scale: 1.03;
}

.gallery-images img {
	height: 100%;
	width: 100%;
}

#reah, #vocaloid, #af25 {
	margin: 75px auto 25px;
}

.first-pic {
	margin-left: 25px;
}