@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
/*font-family: 'Oswald', sans-serif;*/

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
/*font-family: 'Press Start 2P', cursive;*/

@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Syncopate&display=swap');
/*font-family: 'Syncopate', sans-serif;*/

/*DIV MAIN CONTENT*/

div#content
{
	margin-top: 65px;
	margin-bottom: 85px;
	width: 100%;
	text-align: center;
}

div#content div
{
	display: inline-block;
	width: 48%;
	text-align: center;
}


div#content div.leftbox
{
	vertical-align: top;
}

div#content div.leftbox h1, p
{
	margin: 50px;
}

div#paragraphe div
{
	text-align: center;
	width: 100%;
}

div.paragraphe2
{
	text-align: center;
	width: 55%;
}

div.imagespara
{
	display: inline-block;
	width: 100%;
}

img.paraimg
{
	margin-right: 70px;
	margin-left: 70px;
	margin: 30px;
}


/*DIV GAMES*/

/*SK*/
div#gamesSK div
{
	display: inline-block;
	width: 48%;
	text-align: center;
}

div#gamesSK h1, p
{
	margin: 2px;
}

div#gamesSK div.leftpanelSK
{
	vertical-align: top;
}

div#gamesSK div.rightpanelSK
{
	vertical-align: top;
}

div#gamesSK div.gameboxSK
{
	width: 100%;
	margin: 4px;
}

/*2*/

div#gamesSK2
{
	width: 100%;
	text-align: center;
}

div#gamesSK2 div
{
	display: inline-block;
	width: 48%;
	text-align: center;
}

div#gamesSK2 h1, p
{
	margin: 2px;
}

div#gamesSK2 div.leftpanelSK2
{
	vertical-align: top;
	padding-top: 35px;
}

div#gamesSK2 div.rightpanelSK2
{
	vertical-align: top;
	padding-top: 35px;
}

div#gamesSK2 div.gameboxSK2
{
	width: 100%;
	margin: 4px;
}

/*3*/

div#photopanelSK
{
	text-align: center;	
}

div#photopanelSK div.imagesparaSK
{
	display: inline-block;
	width: 100%;
}

div#photopanelSK img
{
	margin: 30px;
}

/*STEAM*/

#steamSK a
{
	margin-top: 15px;
	font-size: 4em;
	color: whitesmoke;
}


/*TRIANGLE*/

div#gamesTR
{
	width: 100%;
	text-align: center;
	margin: 4px;
}

div#gamesTR div
{
	display: inline-block;
	width: 48%;
	text-align: center;
}

div#gamesTR div.gameboxTR
{
	width: 100%;
	margin: 4px;
}

div#gamesTR div.leftpanelTR
{
	vertical-align: top;
}

div#gamesTR div.rightpanelTR
{
	vertical-align: top;
}

div#gamesTR2
{
	width: 100%;
	text-align: center;
	margin: 4px;
}

div#gamesTR2 div
{
	display: inline-block;
	width: 48%;
	text-align: center;
}

div#gamesTR2 div.gameboxTR
{
	width: 100%;
	margin: 4px;
}

div#gamesTR2 div.leftpanelTR2
{
	vertical-align: top;
}

div#gamesTR2 div.rightpanelTR2
{
	vertical-align: top;
}

div#gamesTR h1, p
{
	margin: 2px;
}

div#gamesTR2 h1, p
{
	margin: 2px;
}

img.scimg
{
	padding-top : 1px;
}


/*MUSIC*/

div.gameboxdrno
{
	width: 70%;
	text-align: center;
	margin-left: auto;
 	margin-right: auto;
}

/*2*/

div#musicdrno h1, p
{
	margin: 2px;
}

div#musicdrno p
{
	text-align: left;
	margin-right: auto;
	margin-left: 35px;
}

div#musicdrno div.leftpaneldrno
{
	vertical-align: middle;
}

div#musicdrno div.rightpaneldrno
{
	vertical-align: middle;
}

div#musicdrno div
{
	display: inline-block;
	width: 48%;
	text-align: center;	
}

div#musicdrno2 div
{
	display: inline-block;
	width: 48%;
	text-align: center;
}

div#musicdrno2 p
{
	text-align: left;
	margin-left: 225px;
	margin-right: auto;
}

div#musicdrno2 h1, p
{
	margin: 2px;
}

div#musicdrno2 div.rightpaneldrno2
{
	vertical-align: middle;
}

div#musicdrno2 div.leftpaneldrno2
{
	vertical-align: middle;
}

div#musicdrno2 div.gameboxdrno2
{
	width: 100%;
	margin: 4px;
}


/*3*/

div#photopaneldrno
{
	text-align: center;	
}

div#photopaneldrno div.imagesparadrno
{
	display: inline-block;
	width: 100%;
}

div#photopaneldrno img
{
	margin: 30px;
}


/*SK PAGE*/
/*New Page Form*/

div#SKClassHeavyWeight
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 850px;
	vertical-align: top;
	text-align: center;

	background-image: url("SKFIRSTYEAR_Screenshot4(NoLogo).png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: width: 100%;
}

div#SKClassHeavyWeight p
{
	font-size: 3.4em;
	text-align: left;
	margin-right: auto;
	margin-left: 35px;
	-webkit-text-stroke: 1px black;
}

div#SKClassHeavyWeight div
{
	display: inline-block;
	vertical-align: middle;
	width: 48%;
}


div#SKClassAgility
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 850px;
	text-align: center;

	background-image: url("SKFIRSTYEAR_Screenshot3(NoLogo).png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: width: 100%;
}

div#SKClassAgility p
{
	font-size: 3.4em;
	text-align: left;
	margin-right: auto;
	margin-left: 35px;
	-webkit-text-stroke: 1px black;
}

div#SKClassAgility div
{
	display: inline-block;
	vertical-align: middle;
	width: 48%;
}

div#SKClassEngineer
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 850px;
	text-align: center;

	background-image: url("SKFIRSTYEAR_Screenshot5(NoLogo).png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: width: 100%;
}

div#SKClassEngineer p
{
	font-size: 3.4em;
	text-align: left;
	margin-right: auto;
	margin-left: 35px;
	-webkit-text-stroke: 1px black;
}

div#SKClassEngineer div
{
	display: inline-block;
	vertical-align: middle;
	width: 48%;
}

div.SKClass
{
	border-width: medium;
}

/*PAGE HOSHIMAGO*/

div#TEAM1
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 850px;
	vertical-align: top;
	text-align: center;

	background-image: url("Hoshimago_Group.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: width: 100%;
}

div#TEAM1 p
{
	font-size: 3.4em;
	text-align: left;
	margin-right: auto;
	margin-left: 35px;
	-webkit-text-stroke: 1px black;
}

div#TEAM1 div
{
	display: inline-block;
	vertical-align: middle;
	width: 48%;
}

div#TEAM2
{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 850px;
	text-align: center;

	background-image: url("Hoshimago_Snails.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: width: 100%;
}

div#TEAM2 p
{
	font-size: 3.4em;
	text-align: left;
	margin-right: auto;
	margin-left: 35px;
	-webkit-text-stroke: 1px black;
}

div#TEAM2 div
{
	display: inline-block;
	vertical-align: middle;
	width: 48%;
}

/*MENU NAVIGATION*/

:root{
  --hauteur-menu: 60px;
}

nav {
  width: 100%;
  font-size: 18px;
  position: sticky;
  top: 0;
}

nav > ul {
  	display: flex;
  	text-align: center;
  	box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
  	height: var(--hauteur-menu);
}
 
nav ul {
  list-style-type: none;
}

nav > ul > li {
  background-color: black;
  position: relative;
  height: 100%;
  flex: 1;
}

img.homepage {
vertical-align: middle;
padding-bottom: 75px;
padding-right: 75px;
}

nav > ul > li > a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

li a {
  text-decoration: none;
  color: whitesmoke;
}

.menu-deroulant > a:after{
  content: '❯';
  font-size: 15px;
  margin-left: 7px;
  display: inline-block;
}

.sous-menu {
  margin-top: var(--hauteur-menu);
  width: 100%;
  text-align: center;
  background-color: black;
  border-radius: 2px;
  overflow: hidden;
  max-height: 0;
}

.sous-menu > li > a {
  height: 50px;
  padding-left: 20px;
  width: 100%;
  align-items: center;
  display: flex;
}

nav > ul > li:hover > a{
  color: whitesmoke;
}

.sous-menu > li:hover {
  background-color: rgba(33, 105, 236, 0.3);
}

.sous-menu > li:hover > a {
  color: white;
}

@keyframes rotationFleche {
  0% {
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(90deg);
  }
}

.menu-deroulant:hover > a:after{
  animation: rotationFleche 0.2s linear forwards;
}

@keyframes apparitionSousMenu {
  0% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
    border-top: 3px solid #2169EC;
  }
  30% {
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
  100% {
    max-height: 50em;
    border-top: 3px solid whitesmoke;
    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
  }
}

.menu-deroulant:hover > .sous-menu {
  animation: apparitionSousMenu 1s forwards;
}

/*HEADER*/

div.headerdivimg
{
	width: 100%;
	text-align: center;
}

/*FOOTER*/


footer
{
	margin-top: 35px;
}


#CopyrightEtIcons
{
	display: flex;
	margin-bottom: 20px;
	padding : 0 10%;
}


#copyright
{
	width: 50%;
	text-align: left;
	color: whitesmoke;
}

#icons
{
	width: 50%;
	text-align: right;
	background-color: black;
}

#icons a
{
	display: inline-block;
	margin: 10px 15px;
	font-size: 1.3em;
	color: whitesmoke;
}

span
{
	color: whitesmoke;
}


/*CONTACT*/

div#contact
{
	text-align: center;
}

input, textarea, button
{
	border: none;
	width: 55%;
	padding: 15px 10px;
	margin: 1px 0;
	font-size: 1.2em;
	font-family: 'Oswald', sans-serif;
	border-radius: 8px;
}

textarea
{
	height: 120px;

}

button
{
	font-size: 1.5em;
	background-color: whitesmoke;
}

button:hover
{
	background-color: darkgray;
	color: white;
	cursor: pointer;
	transition: 0.8s ease-in-out;
}

/*TRAITS SEPARATION*/

#petittrait
{
	height: 1px;
	width: 20%;
	margin: -3px auto;
	background-color: whitesmoke;
	opacity: 95%;
	margin-top: 55px;
	margin-bottom: 55px;
}

#moyentrait
{
	height: 1px;
	width: 30%;
	margin: -3px auto;
	background-color: whitesmoke;
	opacity: 95%;
	margin-top: 35px;
	margin-bottom: 125px;
}

#grandtrait
{
	height: 1px;
	width: 45%;
	margin: -3px auto;
	background-color: whitesmoke;
	opacity: 95%;
	margin-top: 35px;
	margin-bottom: 205px;
}

/*MISC*/
img.homepage
{
	padding-top : 85px;
}

div#imgcenter
{
	text-align: center;
	width: 100%;
}

p.adumbra
{
	color: #ffffff;
	font-size : 30px;
	text-align: center;
	padding-top: 45px;
	padding-bottom: 80px;
	font-family: 'Syncopate', sans-serif;
}

p.chaptertitle
{
	color: #ffffff;
	font-size : 50px;
	font-weight : Italic;
	text-align: center;
}

p.footer
{
	color: #ffffff;
	font-size : 15px;
	font-weight : Italic;
}

a
{
	text-decoration: none;
	color: white;
}

p
{
	color: #ffffff;
}

h1.top
{
	color: #ffffff;
	text-align: center;
	font-size: 5em;
}

h1
{
	color: #ffffff;
	text-align: center;
}

h2
{
	color: #ffffff;
	text-align: center;
}

h3
{
	color: #ffffff;
	text-align: center;
	margin-bottom: 70px;
}

body
{
	font-family: 'Oswald', sans-serif;
	background-color: #000000;
}

li
{
	list-style-type: none;
}