@font-face {
    font-family: 'beonregular';
    src: url('beon_regular.eot');
    src: url('beon_regular.eot?#iefix') format('embedded-opentype'),
         url('beon_regular.woff') format('woff'),
         url('beon_regular.ttf') format('truetype'),
         url('beon_regular.svg#beonregular') format('svg');
}

/*Au-dessus et en-dessous de ce texte, vous pouvez retrouver les deux polices
d'écritures qui ont été importé pour la réalisation de cette page web.
Il faut les télécharger sur internet et mettre tout les documents concernant ce
style dans le dossier CSS. Pour ce qui du code avec @font-face, font-
family et les src; pas d'inquiétude, il est avec le téléchargement souvent.
Sinon, il faut convertir avec un convertisseur web.*/

@font-face {
    font-family: 'phosphne_fontregular';
    src: url('phosphenefont-regular-webfont.woff2') format('woff2'),
         url('phosphenefont-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: aquamarine;
}

/*Cette ID island représente l'ASCII art, vous pouvez déplacer le tout
librement dans l'espace de la page web. Attention, il n'est pas avec les formes
de couleur composant l'ile.*/




#island {
  color: black;
  display: flex;
  align-items: center;
  position: absolute;
  top: 369px;
  left: 2px;
  z-index: 99;
  pointer-events: none;
}

#carre {
	width:485px;
	height:559px;
	background:#9274AF;
  position: absolute;
  left: 99px;
  top: 533px;
  z-index: 97;
}


/*Ci-dessous, vous pouvez voir des commandes interessantes présentes dans cette
ID trianglesable,
- border-width possèdent quatres numéros de pixels permettant de modifier les
angles et/ou longueurs du triangle. Il est possible d'avoir un triangle
equilateral petit comme un un immense triangle bordelique.
- transfor: rotate (deg) permet de changer l'orientation du triangle.
- z-inder : attribue un ordre de superposition de ces formes géométriques*/


#triangle {
	width: 29px;
	height: 150px;
	border: 1px solid #9274AF;
	border-color: transparent transparent #9274AF transparent;
  border-width: 4px 100px 204px 97px;
  position: absolute;
  left: 375px;
  top: 244px;
  z-index: 96;
}

#trianglesable {
  width: 5px;
  height: 179px;
  border: 1px solid #FFC500;
  border-color: transparent transparent #FFC500 transparent;
  border-width: 4px 0px 88px 50px;
  position: absolute;
  left: 450px;
  left: 36px;
  transform: rotate(180deg);
  top: 750px;
  z-index: 98;
}

#triangle2 {
  width: 1px;
  height: 179px;
  border: 1px solid #9274AF;
  border-color: transparent transparent #9274AF transparent;
  border-width: 4px 0px 25px 50px;
  position: absolute;
  left: 60px;
  transform: rotate(270deg);
  top: 1006px;
  z-index: 98;
}

#triangleterre {
  width: 76px;
  height: 156px;
  border: 1px solid #9274AF;
  border-color: transparent transparent #9274AF transparent;
  border-width: 4px 144px 73px 38px;
  position: absolute;
  left: 43px;
  top: 609px;
  z-index: 98;
  transform: rotate(0deg)
}

#trapeze {
  width: 1px;
  height: 200px;
  border: 11px solid #069;
  border-color: transparent transparent transparent #FFC500;
  border-width: 95px;
  position: absolute;
  left: 99px;
  top: 481px;
  transform: rotate(26deg);
  z-index: 98;
}
.infos{
  cursor: pointer;
}
#survole{
  width: 50px;
  height: 50px;
  top: 925px;
  left: 300px;
  position: absolute;
  background:transparent;
  z-index:97;
}
img{
  display: none;
}
#survole:hover img{
  display: block;
  width: 80px;
  height:60px;
}
#survole2{
width: 75px;
height: 75px;
top: 700px;
left:480px;
position: absolute;
background: transparent;
z-index:97;
}
img{
  display: none;
}
#survole2:hover img{
  display: block;
  width: 100px;
  height: 80px;
}
#survole3{
  width: 50px;
  height: 50px;
  top: 760px;
  left: 175px;
  position: absolute;
  z-index: 100;
}
img{
  display: none;
}
#survole3:hover img{
display: block;
width: 50px;
height: 80px;
}
#survole4{
width: 50px;
height:50px;
top:1000px;
left:175px;
position: absolute;
z-index:100;
}
img{
  display: none;
}
#survole4:hover img{
  display: block;
  width:60px;
  height:60px;
}
#survole5{
  width:50px;
  height: 50px;
  top:640px;
  left: 300px;
  position: absolute;
  z-index: 100;
}
img{
  display: none;
}
#survole5:hover img{
  display: block;
  width: 60px;
  height: 60px;
}
#survole6{
  width: 50px;
  height: 50px;
  top:650px;
  left:110px;
  position: absolute;
  z-index: 100;
}
img{
  display: none;
}
#survole6:hover img{
  display: block;
  width: 60px;
  height: 60px;
}
#survole7{
  width: 50px;
  height: 50px;
  top:590px;
  left: 340px;
  position: absolute;
  z-index: 100;

}
img{
  display: none;
}
#survole7:hover img{
  display: block;
  width: 60px;
  height: 60px;
}
#survole8{
  width: 70px;
  height: 70px;
  top: 950px;
  left: 770px;
  position: absolute;
  z-index: 100;
}
img{
  display: none;
}
#survole8:hover img{
  display: block;
  width: 70px;
  height: 70px;
}
#survole9{
  width: 100px;
  height: 100px;
  top: 800px;
  left:860px;
  position: absolute;
  z-index: 100;
}
img{
  display: none;
}
#survole9:hover img{
  display: block;
  width: 100px;
  height: 80px;
}
#survole10{
  width: 60px;
  height:60px;
  top:480px;
  left:850px;
  position: absolute;
  z-index: 100;
}
img{
  display: none;
}
#survole10:hover img{
  display: block;
  width: 60px;
  height:60px;
}
.masque{
  pointer-events: none;
}
#rectangle {
  width: 240px;
  height: 52px;
  position: absolute;
  background: #9274AF;
  left: 390px;
  left: 187px;
  top: 1082px;
  z-index: 97;
}

#rectangle1ocean {
  width: 58px;
  height: 184px;
  position: absolute;
  background: aquamarine;
  left: 534px;
  top: 909px;
  z-index: 97;
}

#rectangle2ocean {
  width: 232px;
  height: 118px;
  position: absolute;
  background: aquamarine;
  left: 48px;
  top: 459px;
  z-index: 98;
}

#rectangle3ocean {
  width: 70px;
  height: 56px;
  position: absolute;
  background: blue;
  left: 316px;
  top: 602px;
  z-index: 98;
}

#rectangle4ocean {
  width: 47px;
  height: 49px;
  position: absolute;
  background: blue;
  left: 370px;
  top: 586px;
  z-index: 98;
}

#rectangle5ocean {
  width: 56px;
  height: 53px;
  position: absolute;
  background: aquamarine;
  left: 459px;
  top: 1043px;
  z-index: 98;
}

#rectangle6ocean {
  width: 30px;
  height: 107px;
  position: absolute;
  background: aquamarine;
  left: 380px;
  top: 953px;
  z-index: 98;
}

#rectangle7ocean {
  width: 30px;
  height: 58px;
  position: absolute;
  background: aquamarine;
  left: 394px;
  top: 1030px;
  z-index: 98;
}

#triangle1ocean {
  width: 1px;
  height: 170px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 4px 0px 120px 61px;
  position: absolute;
  left: 254px;
  top: 506px;
  z-index: 98;
  transform: rotate(180deg)
}

#triangle2ocean {
  width: 1px;
  height: 133px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 10px 41px 67px 3px;
  position: absolute;
  left: 87px;
  top: 886px;
  z-index: 98;
  transform: rotate(0deg);
}

#triangle3ocean {
  width: 29px;
  height: 159px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 4px 25px 51px 1px;
  position: absolute;
  left: 212px;
  top: 571px;
  transform: rotate(180deg);
  z-index: 98;
}

#triangle4ocean {
  width: 1px;
  height: 159px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 4px 1px 99px 49px;
  position: absolute;
  left: 86px;
  top: 576px;
  transform: rotate(180deg);
  z-index: 98;
}
#triangle5ocean {
  width: 1px;
  height: 159px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 4px 25px 51px 1px;
  position: absolute;
  left: 569px;
  top: 530px;
  transform: rotate(180deg);
  z-index: 98;
}

#triangle6ocean {
  width: 1px;
  height: 159px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 10px 61px 69px 1px;
  position: absolute;
  left: 624px;
  top: 804px;
  transform: rotate(90deg);
  z-index: 98;
}

#triangle7ocean {
  width: 29px;
  height: 159px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 4px 25px 51px 1px;
  position: absolute;
  left: 212px;
  top: 571px;
  transform: rotate(180deg);
  z-index: 98;
}

#triangle8ocean {
  width: 43px;
  height: 318px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 1px 1px 73px 5px;
  position: absolute;
  left: 411px;
  top: 725px;
  transform: rotate(0deg);
  z-index: 98;
}

#triangle9ocean {
  width: 1px;
  height: 159px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 6px 112px 124px 1px;
  position: absolute;
  left: 584px;
  top: 360px;
  transform: rotate(0deg);
  z-index: 98;
}

#triangle10ocean {
  width: 1px;
  height: 159px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 330px 112px 51px 1px;
  position: absolute;
  left: 212px;
  top: 777px;
  transform: rotate(270deg);
  z-index: 98;
}

#triangle11ocean {
  width: 1px;
  height: 159px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 330px 112px 51px 1px;
  position: absolute;
  left: -291px;
  top: 512px;
  transform: rotate(270deg);
  z-index: 98;
}

#triangle12ocean {
  width: 1px;
  height: 159px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 266px 16px 39px 1px;
  position: absolute;
  left: 403px;
  top: 568px;
  transform: rotate(0deg);
  z-index: 98;
}

#triangle13ocean {
  width: 1px;
  height: 159px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 330px 16px 38px 0px;
  position: absolute;
  left: 367px;
  top: 996px;
  transform: rotate(180deg);
  z-index: 98;
}

#triangle14ocean {
  width: 1px;
  height: 159px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 330px 34px 51px 1px;
  position: absolute;
  left: 386px;
  top: 532px;
  transform: rotate(0deg);
  z-index: 98;
}

#triangle15ocean {
  width: 1px;
  height: 166px;
  border: 1px solid aquamarine;
  border-color: transparent transparent aquamarine transparent;
  border-width: 346px 0px 73px 63px;
  position: absolute;
  left: -242px;
  top: 321px;
  transform: rotate(297deg);
  z-index: 98;
}

#triangle16ocean {
  width: 1px;
  height: 212px;
  border: 1px solid aquamarine;
  border-color: transparent transparent blue transparent;
  border-width: 510px 13px 12px 13px;
  position: absolute;
  left: -63px;
  top: 272px;
  transform: rotate(271deg);
  z-index: 98
}

#lumtextecarre {
  width: 254px;
  height: 175px;
  position: absolute;
  background: #CCBF75;
  left: 352px;
  top: 1213px;
  z-index: 98;
}

#lumieretri {
  width: 1px;
  height: 450px;
  border: 1px solid #CCBF75;
  border-color: transparent transparent #CCBF75 transparent;
  border-width: 12px 200px 166px 47px;
  position: absolute;
  left: 196px;
  top: 1235px;
  transform: rotate(164deg);
  z-index: 98;
}

/*En-dessous, il y a l'attribution de la police/style aux texts présents sur la
page HTML.*/

#titre {
    font-family: 'beonregular';
    font-size: 40px;
    color: #F2F5C0;
}

#population {
    font-family: 'phosphne_fontregular';
    font-size: 20px;
    color: #F2F5C0;
}