@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Outfit:wght@200;400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700&family=Gruppo&family=Oswald:wght@400;700&family=Outfit:wght@100;400;700&family=Syncopate:wght@400;700&display=swap");
@font-face {
  font-family: "Anurati";
  src: url("../fonts/anurati-regular-webfont.woff2") format("woff2"), url("../fonts/anurati-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "sabomastersabomaster";
  src: url("../fonts/sabomaster-webfont.woff2") format("woff2"), url("../fonts/sabomaster-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "cmx";
  src: url("../fonts/cmx.woff2") format("woff2"), url("../fonts/cmx.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "cmx2";
  src: url("../fonts/cmx2.woff2") format("woff2"), url("../fonts/cmx2.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "cybertronic";
  src: url("../fonts/cybertronic.woff2") format("woff2"), url("../fonts/cybertronic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
:root {
  --transDelay: 0s;
  --transSpeed: 0s;
  --transEasing: linear;
}

.negatif {
  filter: invert(100%);
  background-color: black;
}

.board {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 900rem;
  min-height: 1350rem;
  padding: 20rem;
  border: 0 solid #283845;
  border-top: 50rem solid #283845;
  border-radius: 7rem;
  font-size: 16rem;
  line-height: 1.5;
  color: #283845;
}
.board--wrapper {
  position: relative;
  z-index: 5;
}
.board--title {
  font-family: "Berkshire Swash";
  font-weight: 400;
  position: relative;
  font-size: 70rem;
  color: #202c39;
  margin-top: 20rem;
  margin-bottom: -5rem;
  margin-left: 20rem;
  z-index: 5;
  text-shadow: -10rem -10rem 0 white, 0 -10rem 0 white, 10rem -10rem 0 white, 10rem 0 0 white, 10rem 10rem 0 white, 0 10rem 0 white, -10rem 10rem 0 white, -10rem 0 0 white;
}
.board--picture {
  position: relative;
  width: 565rem;
  margin-left: 360rem;
  margin-top: -70rem;
  margin-bottom: -70rem;
  z-index: 10;
}
.board .frise01 {
  position: absolute;
  left: -5%;
  top: -7%;
  width: 112%;
  z-index: 3;
  pointer-events: none;
}
.board .mask {
  position: absolute;
  display: none;
}
.board .mask-left {
  left: -1%;
  top: 0%;
  width: 20rem;
  height: 700rem;
}
.board .mask-top {
  left: 0%;
  top: -1%;
  width: 1000rem;
  height: 20rem;
}
.board .mask-right {
  right: -2%;
  top: -1%;
  width: 20rem;
  height: 400rem;
}
.board .attributes {
  position: relative;
  z-index: 10;
  margin-bottom: 20rem;
}
.board .description {
  margin-bottom: 25rem;
}
.board .data-wrapper {
  margin: 10rem 0 0 20rem;
}
.board .legend {
  position: absolute;
}

.legend {
  font-family: "Berkshire Swash";
  font-family: "Tangerine";
  font-family: Sacramento;
  font-family: "La Belle Aurore", cursive;
  font-size: 22rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: none;
  border-bottom: none;
}
.legend figcaption {
  --obliqueW: 80rem;
  --angle: -45deg;
  text-align: left;
}
.legend figcaption::before {
  content: "";
  display: block;
  width: 100%;
  border-top: 2rem solid black;
  position: absolute;
  left: 0rem;
  bottom: 2rem;
}
.legend figcaption::after {
  content: "";
  display: block;
  width: var(--obliqueW);
  border-top: 1.5px solid black;
  position: absolute;
  left: 100%;
  bottom: 2rem;
  transform-origin: 0% 50%;
  rotate: var(--angle);
}
.legend img {
  position: absolute;
  bottom: 0;
  width: 50%;
}

.main-picture {
  position: relative;
  font-size: 10px;
}

.attributes {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 50rem;
  border: 3rem solid #283845;
  border-top: 20rem solid #283845;
  border-radius: 5rem;
  background-color: white;
}

.attribute {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15rem;
  font-family: "Berkshire Swash", cursive;
  font-size: 20rem;
}
.attribute--key {
  margin-right: 15rem;
}
.attribute--value i {
  display: inline-block;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  border: 2rem solid black;
  margin-right: 10rem;
}
.attribute--value i.is-full {
  background-color: #283845;
}
.attribute--value i.is-half-full {
  background: linear-gradient(90deg, #283845 0%, #283845 50%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%);
}
.data--item {
  font-size: 18rem;
  justify-content: space-between;
  list-style-type: none;
}
.data--key {
  display: inline-block;
  width: 55%;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
  font-family: "Berkshire Swash";
}
.data--key::after {
  content: "....................................................";
}
.data--value {
  display: inline-block;
  padding-right: 10rem;
}

.data-wrapper {
  display: flex;
  justify-content: space-between;
}

.coord {
  width: 220rem;
  border-radius: 5rem;
  padding: 5rem;
  color: black;
  text-align: left;
  font-size: 18rem;
}
.coord:hover .coord--title {
  transform: translateX(10rem);
}
.coord--title {
  padding: 3rem 0 3rem 40rem;
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 27rem;
  background-image: url("../media/icons/picto-location2.png");
  display: inline-block;
  margin-left: 0rem;
  margin-bottom: 10rem;
  font-size: 1em;
  border-radius: 3rem;
  text-align: center;
  transition: all 0.2s;
}
.coord--title::after {
  content: "";
  display: block;
  width: 45rem;
  margin: auto;
  border-top: 1rem solid black;
}

.description {
  width: 100%;
  position: relative;
  padding: 20rem 25rem;
  border: 5rem solid #202c39;
  border-top: 50rem solid #202c39;
  border-radius: 5rem;
}
.description p {
  font-size: 22rem;
}
.description .intro-planet {
  position: relative;
  z-index: 999;
  margin: auto;
  margin-top: -152rem;
}
.description::before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  top: -10rem;
  left: 0;
  border-top: 1px solid white;
  z-index: 99;
}
.description::after {
  position: absolute;
  top: -100rem;
  left: -12rem;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100rem;
  display: block;
  background: url("../media/frise-planet.png") center 20%/70% auto no-repeat;
}

.intro-planet {
  width: 700rem;
  font-family: "Montserrat";
  font-family: "F25 Executive", sans-serif;
  font-weight: 400;
  display: flex;
  align-items: flex-start;
}
.intro-planet--picture {
  width: 150rem;
  height: 150rem;
  margin: auto;
  background-color: white;
  border-radius: 50%;
  border: 5rem solid white;
}
.intro-planet--picture img {
  width: 100%;
}
.intro-planet--name {
  position: absolute;
  bottom: 12rem;
  left: 50%;
  transform: translateX(-50%);
  margin-left: -33rem;
  width: 375rem;
  display: flex;
  justify-content: space-between;
  font-family: "Berkshire Swash";
  font-size: 25rem;
  color: white;
}
.intro-planet--coord {
  position: absolute;
  right: 10rem;
  top: 0;
  font-size: 20rem;
  width: 200rem;
  background-color: aqua;
}
.intro-planet--coord-title {
  color: white;
  background-color: #000000;
}
.intro-planet--coord-key {
  display: inline-block;
  width: 80rem;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
}
.intro-planet--coord-key::after {
  content: "....................................................";
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 705rem;
  margin: auto;
}
.footer .coord {
  margin-left: 15rem;
}
.footer--picture {
  width: 150rem;
}
.footer--flashcode {
  width: 150rem;
}
.footer--nav-item {
  display: block;
  margin: 5rem 0;
  padding: 3rem 0 3rem 40rem;
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 27rem;
}
.footer--nav-item.is-web {
  background-image: url("../media/icons/picto-web.png");
}
.footer--nav-item.is-insta {
  background-image: url("../media/icons/picto-insta.png");
}
.footer--nav-item.is-deviantart {
  background-image: url("../media/icons/picto-deviantart.png");
}

.curl01 {
  width: 963rem;
  position: absolute;
  top: -25rem;
  left: -20rem;
  z-index: 1;
  pointer-events: none;
}

.curl02 {
  width: 251rem;
  position: absolute;
  bottom: -16rem;
  left: -58rem;
  z-index: 1;
  pointer-events: none;
}/*# sourceMappingURL=fiche.css.map */