/**
 * index.scss
 * - Add any styles you want here!
 */
::-webkit-scrollbar {
  width: 8px;
  background: black;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(254, 254, 254, 0.3);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(254, 254, 254, 0.1);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(254, 254, 254, 0.2);
}

body {
  background: #000000;
  overflow-y: auto;
  color: rgba(254, 254, 254, 0.8);
  font-family: 'Arial';
  font-size: 0.95rem;
}

body a, body .clickable {
  text-decoration: none;
  color: rgba(254, 254, 254, 0.8);
}

body a:hover, body .clickable:hover {
  color: #fefefe;
}

body .clickable {
  cursor: pointer;
}

body ::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

body ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(254, 254, 254, 0.8);
  border-radius: 8px;
}

body ::-webkit-scrollbar-thumb {
  background: rgba(254, 254, 254, 0.4);
  border-radius: 8px;
}

body ::-webkit-scrollbar-thumb:hover {
  background: rgba(254, 254, 254, 0.5);
}

@keyframes move-twink {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-webkit-keyframes move-twink {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-moz-keyframes move-twink {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 5000px;
  }
}

@-ms-keyframes move-twink {
  body from {
    background-position: 0 0;
  }
  body to {
    background-position: -10000px 5000px;
  }
}

body .plan-sky-stars, body .plan-sky-twinkling, body .plan-sky-milky, body .plan-sky-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-width: 340px;
  height: 100%;
  min-height: 732px;
  display: block;
}

body .plan-sky-stars {
  background: #000 url(../media/bg-etoiles.png) no-repeat top center;
  z-index: 0;
}

body .plan-sky-twinkling {
  background: transparent url(../media/bg-twinkling.png) repeat top center;
  z-index: 1;
  -moz-animation: move-twink 800s linear infinite;
  -ms-animation: move-twink 800s linear infinite;
  -o-animation: move-twink 800s linear infinite;
  -webkit-animation: move-twink 800s linear infinite;
  animation: move-twink 800s linear infinite;
}

body .plan-sky-milky {
  background: transparent url(../media/bg-voielactee.png) no-repeat top center;
  z-index: 2;
}

body .plan-sky-mask {
  background: transparent url(../media/bg-masque.png) no-repeat top center;
  z-index: 3;
}

body .header-menu {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 48px;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

body .header-menu .header-menu-element {
  font-size:1.05rem;
  padding-top: 32px;
  padding-bottom: 32px;
  text-align: center;
  float: right;
  width: 158px;
}

body .page-content {
  z-index: 6;
  position: absolute;
  top: 96px;
  left: 50%;
  right: 0;
  bottom: 0;
  width: 340px;
  margin-left: -170px;
  min-height: 636px;
}



body .page-content .loader-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;
  opacity: 1;
}
body .page-content .loader-container.page-loaded {
  opacity: 0;
  transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -webkit-transition: opacity 2s linear;
}



body .page-content ul {
  list-style-type: none;
}

body .page-content .links-container {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 800ms;
  position: relative;
  display: block;
}

body .page-content .links-container .link {
  position: absolute;
}

body .page-content .links-container .link .link-tooltip {
  font-size: 0.75rem;
  color: rgba(254, 254, 254, 0.7);
  transition-property: opacity;
  transition-duration: 600ms;
}

body .page-content .links-container .link:not(:hover) .link-tooltip {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0s;
}

body .page-content .links-container .link:nth-child(1) {
  top: 12px;
  left: 92px;
}

body .page-content .links-container .link:nth-child(2) {
  top: 219px;
  left: 128px;
}

body .page-content .links-container .link:nth-child(3) {
  top: 325px;
  left: 288px;
}

body .page-content .links-container .link:nth-child(4) {
  top: 372px;
  left: 58px;
}

body .page-content .links-container .link:nth-child(5) {
  top: 469px;
  left: 270px;
}

body .page-content .links-container:not(.links-container-displayed) {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 800ms;
  .link {
    display:none;
  }
}

body .page-content .card-container {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 800ms;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 292px;
  max-height: 508px;
  background: rgba(220, 240, 254, 0.25);
  padding: 16px 24px;
  overflow-y: hidden;
}

body .page-content .card-container .card-menu {
  position: relative;
  width: 100%;
  height: 32px;
  text-align: right;
}

body .page-content .card-container .card-menu .button-close-card {
  font-size: 24px;
}

body .page-content .card-container .card {
  text-align: justify;
  position: relative;
  z-index: 7;
}

body .page-content .card-container .card .card-title {
  position: relative;
  padding: 0 32px 0 32px;
}

body .page-content .card-container .card .card-title h1 {
  text-align: center;
  font-size:1.4rem;
  margin-top: 0;
  margin-bottom: -13px;
}

body .page-content .card-container .card .card-title h1:before, body .page-content .card-container .card .card-title h1:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 1px;
  background: rgba(254, 254, 254, 0.8);
}

body .page-content .card-container .card .card-content {
  position: relative;
  overflow-y: auto;
  margin-top: 2px;
  padding: 0 32px 24px 32px;
  max-height: 340px;
}

body .page-content .card-container .card .card-content h2 {
  margin-bottom: 32px;
  text-align: left;
  font-size:1.2rem;
}

body .page-content .card-container .card .card-content p {
  line-height: 24px;
  margin-bottom: 24px;
  font-size: 0.79rem;
}

body .page-content .card-container .card .card-content p:last-child {
  margin-bottom: 0;
}


body .page-content .card-container:not(.card-container-displayed) {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 800ms;
}

body .page-content .footer-menu {
  z-index: 5;
  position: absolute;
  bottom: 8px;
  width: 340px;
  left: 50%;
  margin-left: -170px;
  right: 0;
  height: 24px;
  padding-top: 64px;
  display: block;
  margin-bottom: 0px;
  text-align: center;
  white-space: nowrap;
}

body .page-content .footer-menu span.footer-menu-separator, body .page-content .footer-menu .footer-menu-element {
  font-size: 0.7rem;
  text-align: center;
}

body .page-content .footer-menu .footer-menu-separator {
  margin-right: 3px;
  margin-left: 3px;
}