body {
  background-color: black;
}

@font-face {
  font-family: 'Victory';
  src: url('/fonts/Belgium Victory Italic.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.countries {
  position: fixed;
  top: 450px;
  left: 50%;
  width: 850px;
  z-index: 4;
  opacity: 0;
  animation: fadeIn 5s forwards;
  transform: translate(-50%) scale(0.3);
}

  .countries a:not(:last-child) {
    padding-right: 20px;
  }

main {
  background: url('/images/planches.png');
  height: 600px;
}

.logo {
  background-color: #F6ECE380;
  width: 320px;
  height: 350px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 20px 12px 0 0;
  margin-top: 48px;
}

.sub-a {
  transform: translate(48px, -48px);
  font-size: 10px;
  font-variant-caps: small-caps;
}

.salon {
  position: fixed;
  font-family: 'Victory';
  font-size: 36px;
  left: 50%;
  transform: translate(-50%, -36px);
  opacity: 0;
  animation: fadeIn 5s forwards;
}

.rameau-tl,
.rameau-br {
  position: fixed;
  opacity: 0;
  animation: fadeIn 3s forwards;
}

.rameau-tl {
  width: 250px;
  height: 218px;
}

.rameau-br {
  width: 360px;
  height: 320px;
}

  .rameau-tl img, .rameau-br img {
    width: 100%;
    height: auto;
  }

.rameau-br {
  left: 100%;
  top: 608px;
  transform: translate(-100%, -100%);
}

@media (max-height: 480px) and (orientation: landscape) {
  main {
    height: calc(100svh - 16px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .logo {
    transform: scale(0.5) translateX(-100%) translateY(-50%);
  }

  .countries {
    top: 50%;
    transform: scale(0.25) translateX(-200%) translateY(200%);
  }

  .rameau-tl {
    width: 174px;
    height: 152px;
  }

  .rameau-br {
    top: 370px;
    width: 250px;
    height: 225px;
  }
}