/*   ///---///---///   GLOBAL   ///---///---///   */
	@font-face {
	font-family: "Bonobo";
	src: url("Bonobo_Bold.ttf")
   }
	body{
		margin: 0;
		padding: 0;
		font-family: system-ui;
		font-weight: 800;
		user-select: none;
	}
	img{
		display: block;
	}
	header img, footer img{
		width:100%;
	}
	a{
		text-decoration:none;
		color:black;
	}
	
	main{
		background-image: url(Images/fond.jpg);
		background-size: cover;
		background-attachment:fixed;
		padding-bottom: 4vw;
	}
	main > .mainTitle{
		font-size: 4vw;
		font-weight: 900;
		padding: 2vw;
		background-color:#000A;
		color:white;
		margin-bottom:1vw;
	}


/*   ///---///---///   HEADER  ///---///---///   */


	header{
		width:100%;
		height: 25vw;
		background-image: url(Images/banner.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

/*   ///---///---///   FOOTER   ///---///---///   */

 	footer{
		width:100%;
		height: 25vw;
		background-image: url(Images/banner.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
 	}
 	footer > div:first-child{
		text-align: left;
		margin:0.5vw;
		margin-left: 1vw;
	}
	footer > div:nth-child(2){
		text-align:center;
	}
 	footer > div:last-child{
		text-align: right;
		margin:0.5vw;
		margin-right: 1vw
 	}
 	footer > div > span,
 	footer > div > a{
		display: block;
		color:white;
		font-size: 1.5vw;
		margin:0;
		margin-bottom: 1vw;
 	}
 	footer > div > a > img{
		width:2.7vw;
		display:inline;
		vertical-align:middle;
 	}
	footer > div > .logo{
		margin:0;
		margin-top:17vw
	}
	footer > div > .logo > img{
		width:20vw;
	}
	footer > div > #webography > span{
		color:white;
		font-size: 1vw;;
	}
	footer > div > #webography > a{
		color:white;
		display:block;
		font-size:0.8vw;
	}


	/*   ///---///---///   MENU NEwS & EVENTS   ///---///---///   */

	#news{
		background-position: top;
		height:25vw;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	#news > #newsName{
		font-size:2vw;
		font-weight:900;
		padding: 1vw 0 0 7vw;
		color:white;
	}
	#news > #newsCont{
		margin: 1vw 0 0 7vw;
		padding:1vw;
		font-size: 1.3vw;
		width: 25vw;
		color:black;
		background-color: #FFFA;
	}
	#news > #arrows{
		width: 100%;
		display:grid;
		grid-template-columns: 1fr 10fr 1fr;
		position:absolute;
		top:0vw;
		height:25vw;
		font-size: 10vw;
		color: white;
	}
	#news > #arrows > #arrowPrev{
		text-align: left;
		padding: 5vw 20vw 0vw 2vw;
		cursor:pointer;
	}
	#news > #arrows > #arrowNext{
		text-align: right;
		padding: 5vw 2vw 0vw 20vw;
		cursor:pointer;
	}
	#news > #arrows > #arrowPrev:hover{
		color: white;
		background:white;
		background: linear-gradient(90deg,#0009,#0003, #0000)
	}
	#news > #arrows > #arrowNext:hover{
		color:white;
		background:white;
		background: linear-gradient(-90deg,#000,#0003, #0000);
	}
	#news > #buttons{
		position:absolute;
		left:50vw;
		width:20vw;
		top:20vw;
		text-align: right;
		z-index: 1;
	}
	#news > #buttons > span{
		font-size: 4vw;
		padding:0;
		margin:0;
		cursor:pointer;
	}
	#news > #buttons > span:hover{
		color:grey;
	}


/*   ///---///---///   NAVIGATION   ///---///---///   */
	nav{
		position:sticky;
		top: 0;
		display: grid;
		grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
		height:4.5vw;
		background-image: url(Images/nav.jpg);
		z-index: 1;
	}
	nav > div{
		margin:0.7vw;
		text-align: center;
		font-size: 0vw;
	}
	nav > div > .logo{
		margin :auto;
		margin-left:0.5vw;
		width:32%;
	}
	nav > div > a{
		color:black;
		font-size:2vw;
		font-weight: 900;
		vertical-align: top;
	}
	nav > div > div{
		width:100%;
		text-align:left;
		margin-top:1vw;
		pointer-events: none;
		display:none;
		z-index:1;
	}
	nav > div > div > a{
		display: block;
		font-size:1.5vw;
		font-weight: 900;
		background-color:white;
		border-radius: 0.5vw;
		margin:0.2vw 0vw;
	}
	nav > div > div > a > img{
		width:1.6vw;
		display: block;
		float:left;
		margin-top:0.25vw;
	}
	#charLinkList > a.electro{background-color: var(--electro-light); border: solid 0.3vw var(--electro-dark);}
	#charLinkList > a.pyro{background-color: var(--pyro-light); border: solid 0.3vw var(--pyro-dark);}
	#charLinkList > a.cryo{background-color: var(--cryo-light);	border: solid 0.3vw var(--cryo-dark);}
	#charLinkList > a.hydro{background-color: var(--hydro-light); border: solid 0.3vw var(--hydro-dark);}
	#charLinkList > a.anemo{background-color: var(--anemo-light); border: solid 0.3vw var(--anemo-dark);}
	#charLinkList > a.geo{background-color: var(--geo-light); border: solid 0.3vw var(--geo-dark);}
	#charLinkList > a.dendro{background-color: var(--dendro-light);	border: solid 0.3vw var(--dendro-dark);}

	#charLinkList > a.electro:hover{background-color:var(--electro);}
	#charLinkList > a.pyro:hover{background-color:var(--pyro);}
	#charLinkList > a.cryo:hover{background-color:var(--cryo);}
	#charLinkList > a.hydro:hover{background-color:var(--hydro);}
	#charLinkList > a.anemo:hover{background-color:var(--anemo);}
	#charLinkList > a.geo:hover{background-color:var(--geo);}
	#charLinkList > a.dendro:hover{background-color:var(--dendro);}
	
	#weapLinkList > a{background-color:#FFFB; border: solid 0.3vw black;}
	#weapLinkList > a:hover{background-color:#BBBC;}

	

	/*   ///---///---///   SUMMARY   ///---///---///   */
	
	summary > #summaryName{
		font-size: 3.5vw;
		font-weight: 900;
		padding: 1.5vw;
		background-color:#0006;
		color:white;
		margin-bottom:1vw;
	}
	summary a{
		display:inline-block;
		margin: 1vw 0.5vw 0vw 0.5vw;
		padding:0.5vw;
		font-size: 0vw;
		border-radius: 1vw;
	}
	summary span.titleType{
		display:block;
		font-size: 3vw;
		margin:0;
		padding:1vw;
	}
	summary span.titleType > img{
		float:left;
		width:4vw;
	}
	summary span.titleType > span{
		margin-left:1vw;
	}
	summary > #summaryLinksChar div.links{
		display:grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
	summary > #summaryLinksWeap div.links{
		display:grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	summary div.links > a > img{
		width: 2.5vw;
		display: inline-block;
		vertical-align: middle;
	}
	summary div.links > a > span{
		font-size: 1.8vw;
		font-weight: 900;
		margin-left: 0.3vw;
		vertical-align: middle;
	}
	summary div.links{
		margin-bottom: 1.5vw;
	}
	#summaryLinksChar a.electro{background-color: var(--electro-light); border: solid 0.5vw var(--electro-dark);}
	#summaryLinksChar a.pyro{background-color: var(--pyro-light); border: solid 0.5vw var(--pyro-dark);}
	#summaryLinksChar a.cryo{background-color: var(--cryo-light); border: solid 0.5vw var(--cryo-dark);}
	#summaryLinksChar a.hydro{background-color: var(--hydro-light); border: solid 0.5vw var(--hydro-dark);}
	#summaryLinksChar a.anemo{background-color: var(--anemo-light); border: solid 0.5vw var(--anemo-dark);}
	#summaryLinksChar a.geo{background-color: var(--geo-light); border: solid 0.5vw var(--geo-dark);}
	#summaryLinksChar a.dendro{background-color: var(--dendro-light); border: solid 0.5vw var(--dendro-dark);}
	
	#summaryLinksChar a.electro:hover{background-color:var(--electro);}
	#summaryLinksChar a.pyro:hover{background-color:var(--pyro);}
	#summaryLinksChar a.cryo:hover{background-color:var(--cryo);}
	#summaryLinksChar a.hydro:hover{background-color:var(--hydro);}
	#summaryLinksChar a.anemo:hover{background-color:var(--anemo);}
	#summaryLinksChar a.geo:hover{background-color:var(--geo);}
	#summaryLinksChar a.dendro:hover{background-color:var(--dendro);}


/*   ///---///---///   PAIMON DIALOGUE   ///---///---///   */

	main > #paimon{
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		font-family:Bonobo;
		position: relative;
		width:100%
	}
	main > #paimon > #paimonImage{
		text-align: center;
		display:inline-block;
		width:30%;
		margin: 0vw 35% ;
	}
	main > #paimon > #paimonBar{
		background-color:#0005;
		position:absolute;
		top:25vw;
		width:100%;
	}
	main > #paimon > #paimonBar > #paimonName{
		color:#D6AD23;
		border-bottom:solid #D6AD23 0.1vw;
		margin:0vw 1vw;
		display:block;
		text-align: center;
		font-size:2vw;
	}
	main > #paimon > #paimonBar > #paimonDialogue{
		text-align: center;
		font-size:1.2vw;
		color:white;
		padding:1vw;
		overflow-wrap: break-word ;
		width:50vw;
		margin: 0vw auto;
	}
	main > #paimon > #paimonBar > .choice{
		color:white;
		background:linear-gradient(90deg,#222A,#2228,#0000);
		border-radius: 2vw;
		font-size: 1.2vw;
		width:25vw;
		height:2.5vw;
		position:absolute;
		right:10vw;
		display:none;
	}
	main > #paimon > #paimonBar > .choice:hover{
		background:linear-gradient(90deg,#555A,#5558,#0000);
	}
	main > #paimon > #paimonBar > .choice > img{
		display:block;
		width:1.5vw;
		float:left;
		margin:0.5vw 0.5vw;
	}
	main > #paimon > #paimonBar > .choice > div{
		display:block;
		padding:0.5vw 2.7vw;
	}
	#choice1{
		top:-3vw;
	}
	#choice2{
		top:-6vw;
	}
	#choice3{
		top:-9vw;
	}
	#choice4{
		top:-12vw;
	}
	#choice5{
		top:-15vw;
	}
	#choice6{
		top:-18vw;
	}
	#choice7{
		top:-21vw;
	}

/*   ///---///---///   CHARACTERS   ///---///---///   */

	.anchor{
		height: 4vw;
		background-color: #FFF0;
	}
	main > .char{
		user-select: none;
	}
	
	main > .char > .charName{
		font-size: 4vw;
		font-weight: 900;
		padding: 2vw;
		display:block;
	}
	main > .char > .charName img{
		width: 5vw;
		float :left;
	}
	main > .char > .charName span{
		margin-left: 2vw;
	}
	main > .char > .charCont{
		display: grid;
		grid-template-columns: auto 1fr;
	}
	main > .char > .charCont > .charImage{
		position: sticky;
		top : 4.5vw;
		height : 41.5vw;
	}
	main > .char > .charCont > .charText{
		margin : 2vw 1vw 2vw 2vw;
		font-size: 1.5vw;
		font-weight: 800;
	}
	main > .char > .charCont > .charText > div{
		margin-bottom:1vw;
	}
	main > .char > .charCont > .charText > div > span,
	main > .char > .charCont > .charText > div > a{
		display:inline-block;
	}
	main > .char > .charCont > .charText > div > a > img{
		width:2vw;
		float:right;
		margin-left:0.5vw;
	}
	main > .char > .charCont > .charText > div > .small {
		font-size:1vw;
		margin-bottom:0.2vw;
	}
	main > .char > .charCont > .charText > div > .small > .title{
		font-size:1.2vw;
		display: block;
		margin:0;
	}
	main > .char > .charCont > .charText > div > .charImage{
		float:right;
		width:20vw;
	}

	.charName.electro{background-color:var(--electro);}
	.charName.pyro{background-color:var(--pyro);}
	.charName.cryo{background-color:var(--cryo);}
	.charName.hydro{background-color:var(--hydro);}
	.charName.anemo{background-color:var(--anemo);}
	.charName.geo{background-color:var(--geo);}
	.charName.dendro{background-color:var(--dendro);}

	.charCont.electro{background-color: var(--electro-light);}
	.charCont.pyro{background-color: var(--pyro-light);}
	.charCont.cryo{background-color: var(--cryo-light);}
	.charCont.hydro{background-color: var(--hydro-light);}
	.charCont.anemo{background-color: var(--anemo-light);}
	.charCont.geo{background-color: var(--geo-light);}
	.charCont.dendro{background-color: var(--dendro-light);}

	.char span,.char a{color: black;}
	.char span.electro,.char a.electro{color: var(--electro-dark);}
	.char span.pyro,.char a.pyro{color: var(--pyro-dark);}
	.char span.cryo,.char a.cryo{color: var(--cryo-dark);}
	.char span.hydro,.char a.hydro{color: var(--hydro-dark);}
	.char span.anemo,.char a.anemo{color: var(--anemo-dark);}
	.char span.geo,.char a.geo{color: var(--geo-dark);}
	.char span.dendro,.char a.dendro{color: var(--dendro-dark);}

	.char a:hover{text-decoration: underline solid black;}
	.char a.electro:hover{text-decoration: underline solid var(--electro-dark);}
	.char a.pyro:hover{text-decoration: underline solid var(--pyro-dark);}
	.char a.cryo:hover{text-decoration: underline solid var(--cryo-dark);}
	.char a.hydro:hover{text-decoration: underline solid var(--hydro-dark);}
	.char a.anemo:hover{text-decoration: underline solid var(--anemo-dark);}
	.char a.geo:hover{text-decoration: underline solid var(--geo-dark);}
	.char a.dendro:hover{text-decoration: underline solid var(--dendro-dark);}
	
	img.electro{border: solid 0.5vw var(--electro-dark);}
	img.pyro{border: solid 0.5vw var(--pyro-dark);}
	img.cryo{border: solid 0.5vw var(--cryo-dark);}
	img.hydro{border: solid 0.5vw var(--hydro-dark);}
	img.anemo{border: solid 0.5vw var(--anemo-dark);}
	img.geo{border: solid 0.5vw var(--geo-dark);}
	img.dendro{border: solid 0.5vw var(--dendro-dark);}

/*   ///---///---///   WEAPONS   ///---///---///   */

	main > .weapType > .weapTypeName{
		display:block;
		font-size:3vw;
		background-color:#0006;
		color:white;
		padding:1vw;
	}
	main > .weapType > .weapTypeName > img{
		display:inline;
		float:left;
		width:4vw;
	}
	main > .weapType > .weapTypeName > span{
		margin-left: 1vw;
	}
	main > .weapType > .weap{
		display:grid;
		grid-template-columns: 5% 25% 70%;
		margin:1vw;
		background:#FFFB;
		border-radius: 1vw;
	}
	main > .weapType > .weap > img{
		width:3vw;
		margin:0.5vw;
		margin: auto 0vw auto 1vw;;
	}
	main > .weapType > .weap > span{
		overflow-wrap:break-word;
	}
	main > .weapType > .weap > .weapName{
		font-size: 2vw;
		padding:1vw;
	}
	main > .weapType > .weap > .weapCont{
		font-size: 1vw;
		padding:1vw;
	}


/*   ///---   ARTEFACTS   ---///   */

	main > .arte{
		display:grid;
		grid-template-columns: 5% 25% 35% 35%;
		margin:1vw;
		background:#FFFB;
		border-radius: 1vw;
	}
	main > .arte > img{
		width:3vw;
		margin:0.5vw;
		margin: auto 0vw auto 1vw;;
	}
	main > .arte > span{
		overflow-wrap:break-word;
	}
	main > .arte > .arteName{
		font-size: 2vw;
		padding:1vw;
	}
	main > .arte > .arteCont{
		font-size: 1vw;
		padding:1vw;
	}



/*   ///---   COLORS    ---///   */

	:root{
		--electro: #6B03BADD;
		--pyro: #E5320CDD;
		--cryo: #21c2caDD;
		--hydro: #40C8EEDD;
		--anemo: #16B349DD;
		--geo: #D7CD35DD;
		--dendro: #60e546DD;

		--electro-light: #E5D2F3BB;
		--pyro-light: #FFE1DABB;
		--cryo-light: #D7FDFFBB;
		--hydro-light: #C1ECF9BB;
		--anemo-light: #C5FCD7BB;
		--geo-light: #FCF8BBBB;
		--dendro-light: #C7FABDBB;
		
		--electro-dark: #48077ADD;
		--pyro-dark: #701E0DDD;
		--cryo-dark: #14787DDD;
		--hydro-dark: #1A6F87DD;
		--anemo-dark: #1F540ADD;
		--geo-dark: #7E770CDD;
		--dendro-dark: #25A00DDD;
	}

	/*
		Type		NORMAL		DARK		LIGHT

		electro		#6B03BA		#48077A		#E5D2F3
		pyro		#E5320C		#701E0D		#FFE1DA
		cryo		#45EBF4		#14787D		#D7FDFF
		hydro		#40C8EE		#1A6F87		#C1ECF9
		anemo		#16B349		#1F540A		#C5FCD7
		geo			#D7CD35		#7E770C		#FCF8BB
		dendro		#60E546		#25A00D		#C7FABD
	*/