@keyframes rainbow {
  0%   { color: red; }
  14%  { color: orange; }
  28%  { color: yellow; }
  42% { color: rgb(0, 255, 0); }
  56% { color: rgb(0, 179, 255);}
  70% { color: blue;}
  86% { color: purple;}
  100% { color: white;}  
}

@keyframes fondu {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes apparition {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes clignote {
  0%   { opacity: 0.25; }
  12.5% { opacity: 0.75; }
  25%   { opacity: 0.25; }
  37.5% { opacity: 0.75;}
  60% { opacity: 0.8;}
  100% { opacity: 1;}
}

@keyframes drawLine {
  from { height: 0; }
  to   { height: 100vh; }
}

body {
  background-color: black;
  color: white;
  font-family: 'Montserrat', sans-serif;
}

.apparition {
  animation-name: apparition;
  animation-duration: var(--duree_ap,1s);
  animation-delay: var(--delai_ap,0s);
  animation-fill-mode: forwards;
}

.clignote {
  animation: clignote var(--duree,0.8s) steps(1);
  animation-delay: var(--delai,0s);
  animation-fill-mode: forwards;
}

.rainbow {
  animation: rainbow var(--duree,1s) infinite;
}

.fade {
  animation: fondu 3s infinite;
}

.wrapper {
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 20%;
  margin-right: 20%
}

.page {
  display: flex;
}

.menu {
  position: relative;
  width: 200px;
  color: white;
  padding: 20px;
}

.menu::after {
  content: "";
  position: fixed;
  top: 0;
  left: 250px;
  right: 0;
  width: 2px;
  height: 0;
  background-color: white;
  animation: drawLine 2s forwards;
  animation-delay: 0.5s;
}

.content {
  flex: 1;
  padding: 20px;
}