/* STYLE GUIDE AKA MY COLOURS:
Bleu (un peu dark): #476e69;
Beige: #aa9b70
Rouge: #2f1217 */

.arcaxondotcum {
  font-family: 'Aller Display';
  font-size: 1.3em;
  color: #aa9b70!important;
  height: 28px;
}

#ArcaxonBar .topNav {
  color: #476e69!important;
  padding-top: 0px!important;
  margin-top: 0px!important;
  padding-bottom: 0px!important;
  height: 28px;
}

#ArcaxonBar {
  display: block;
  height: 35px;
  width: 100%;
  background-color: #2f1217;
  border-bottom: 1px groove #476e69;
  border-top: none;
}

#ArcaxonBar .nav-link {
  font-family: "Bad Comic";
  color: #aa9b70!important;
}

#ArcaxonBar .nav-link:hover {
  font-family: "Bad Comic";
  color: #476e69!important;
}

.arcaxondotcum:hover {
  color: #476e69!important;
}

.socialMediaButt div {
  transition: 100ms ease-in!important;
  background-color: #aa9b70;
}

.socialMediaButt div:hover {
  background-color: #476e69!important;
}

.webButt:active {
  background-color: #476e69!important;
  color: #aa9b70!important;
}

.webButt:hover {
  background-color: #476e69;
  color: #aa9b70!important;
}

.webButt {
  color: #476e69!important;
  font-size: large;
  transition: 100ms ease-in!important;
  background-color: #2f1217;
  margin-bottom: 10px;
}

/* ANIMATIONS */

#shipFlying {
  position: absolute;
  height: 40px;
  z-index: -1;
  top: 260px;
  animation: x-motion 10s 0s infinite reverse;
}

/* #shipFlying:before {
  content: '';
  height: 50px;
  z-index: -1;
  position: absolute;
  top: 100%;
  background-image: url("../../assets/img/Shipflying.png");
  background-size: contain;
  animation: y-motion 1s ease-in-out 0s infinite reverse;
} */

@keyframes x-motion {
  0% {
    top: -100px;
    left: 450px;
  }
  100% {
    left: 100%;
    top: calc(80% - 10px);
  }
}

@keyframes y-motion {
  0%, 100% {
    top: 100%;
  }
  50% {
    top: 0%;
  }
}

#webPageContainer {
  /*background-image: url("../../assets/img/parrallaxPlanets.webp");*/
  background-position: top;
  background-repeat: no-repeat;
  background-size: auto;
  max-width: 1280px;
  margin: auto;
  z-index: 1;
  border: groove;
  border-top: none;
  border-color: #000000;
  border-bottom: none;
}

@media (max-width: 500px) {
  .articleTopImage {
    width: 300px;
  }
}

@media (min-width: 500px) {
  .articleTopImage {
    width: 500px;
  }
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

.debunkBox p {
  font-size: 1.4em;
}