/* CSS Document */

* {
	margin: 0;
	padding: 0;
}


.BGCover {
	background: radial-gradient(#050010, #000030, #200020, #000000);
	background-size: 400% 400%;
	animation: gradient 20s ease infinite;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	z-index: -10
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	80% {
		background-position: 0% 100%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.wrapper {
	display: flex;
	justify-content: center;
	align-items:center;
	width: 60%;
	max-width: 700px;
	padding-left: 2%;
	padding-right: 2%;
}

.maintext {
	color: #ffffff;
	font-family: MainBold;
	margin-right: 4%;
	display: flex;
}

.undertext {
	color: #ffffff;
	font-family: MainRegular;
	margin-right: 4%;
}

.topwrapper {
	display: flex;
	flex-direction: row;
	justify-content:center;
	align-items: center;
	margin-bottom: 5vh;
	width: 100%;
	padding-bottom: 2%;
	cursor: default;
	border-right: 1px solid #ffffff;
}

.rightside {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
}

.iconwrapper {
	background-image: url("../img/painye.png");
	height: 8.5vh;
	width: 8.5vh;
	background-position: center;
	background-size: cover;
	border-radius: 1vh; 
	transition: 0.3s;
	z-index: 0;
}

.icon {
	width: 7vh;
	height: 7vh;
	margin: 2vh;
	transition: 0.3s;
}

.icon:hover {
	transition: 0.3s;
	filter: brightness(75%);
}

.twitter {
	background-image: url("../img/twitter.svg");
	background-position:center;
	background-size: cover;
}


.twitch {
	background-image: url("../img/twitch.svg");
	background-position:center;
	background-size: cover;
	
}

.youtube {
	background-image: url("../img/youtube.svg");
	background-position:center;
	background-size: cover;	
}

.FSLarge {
	font-size: 4vh;
}

.FSSmall {
	font-size: 1.5vh;
}

.split {
	width: 50%;
}

.clickablelist {
	display: flex;
	justify-content: space-between;
	align-items:center;
	flex-direction: row;
	flex-wrap: wrap;
	width: 60%;
	max-width: 700px;
	padding-left: 2%;
	padding-right: 2%;
}

.clickable {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	color: white;
	font-family: MainRegular;
	min-width: 48.5%;
	height: 12vh;
	margin-bottom: 2vh;
	background-color: #FFFFFF00;
	border-radius: 0.7em;
}

.textliner {
	display: flex;
	filter: opacity(0);
	justify-content: center;
	align-content: center;
	height: 40%;
	transition: 0.3s;
}

.clickable:hover .textliner {
	filter: opacity(100);
	display: flex;
	justify-content: center;
	align-content: center;
	height: 20%;
	transition: 0.3s;
}

.clickable:hover {
	cursor: pointer;
}

#showonhover1 {
	background-image: url("../backgrimg/clothing.png");
	background-size: 120%;
	background-position: center;
	transition: 0.3s;
}

#showonhover1:hover {
	transition: 0.3s;
	background-image: url("../backgrimg/clothingnonhover.png");
}

#showonhover2 {
	background-image: url("../backgrimg/nonhoverport.png");
	background-size: 120%;
	background-position: center;
	transition: 0.3s;
}

#showonhover2:hover {
	transition: 0.3s;
	background-image: url("../backgrimg/hover.png");
}

#showonhover3 {
	background-image: url("../backgrimg/hubnonhover.png");
	background-size: 120%;
	background-position: center;
	transition: 0.3s;
}

#showonhover3:hover {
	transition: 0.3s;
	background-image: url("../backgrimg/hubh.png");
}

.cl4 {
	background-image: url("../backgrimg/diceroller.png");
	background-size: 120%;
	background-position: center;
	transition: 0.3s;
}

.cl4:hover {
	transition: 0.3s;
	background-image: url("../backgrimg/dicerollerhover.png");
}

.resize {
	width: 100%;
}

.iconwrapper:hover .showonhover {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	transition: 0.3s
}

.showonhover {
	width: 100%;
	height: 100%;
	display: none;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-family: MainBold;
	transition: 0.3s
}

.iconwrapper:hover {
	background-image: url("../img/painyehover.png");
	transition: 0.3s
}

.nodeco:link {
	text-decoration: none;
}

.clickedinfo {
	justify-content: center;
	align-items: center;
	display: flex;
	position: fixed;
	width: 100%;
	height: 100%;
    opacity: 0%;
	background-color: #00000090;
	cursor: default;
	z-index: -100;
	transition: 0.3s;
}

.clickedinfo2 {
	justify-content: center;
	align-items: center;
	display: flex;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #00000090;
	cursor: default;
	z-index: 200;
	transition: 0.3s;
}


.iconlineup {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 20%;
}

.portbg {
	display: flex;
	width: 100vw;
	height: 100vh;
	background-color: #00000090;
	position: fixed;
	justify-content: center;
	align-items: center;
	z-index:200;
	transition: 0.3s;
}

.portfg {
	background-color: #000000;
	width: 30vw;
	height: auto;
	padding: 2vh;
	text-align: justify;
	border-radius: 1vh;
	z-index:200;
}

.hide {
	opacity: 0;
	z-index: -1;
	pointer-events: none;
	transition: 0.3s;
}

.color {
	color: #8080FF;
}

@font-face {
	font-family: "MainBold";
  	src: url("../fontasset/Outfit-Bold.ttf")
}

@font-face {
	font-family: "MainRegular";
  	src: url("../fontasset/Outfit-Regular.ttf")
}