/*
                                                 ... .                                              
                               ...    ....     .          ... .  ..                                 
                             .  ..%%%%%...+%%%#+---=*%%%%%#...-%+.....                              
                            . .:#---------------------------------#......                           
                          . ..*-------------------------------------%... ..                         
                        ....*------------------------------------------*-....                       
                      ....*-%-------------------------------------------**....                      
                     ...*--%=-------------------------------------------*--*. .                     
                    ...*--%%--------------------------------------------%%--*....                   
                  . .:=---%---------------------------------------------#%---=-...                  
                   .-=---%%----------------------------------------------%-----+...                 
                 ...*----%-----------------------------------------------%------+...                
                . .*----##-*---------------------------------------***---=*----**...                
                ...*----==%-=***#*------------------------------------*---%----=*...                
                ...*------%%--------------------------------------**=*----%-----*. .                
                ..:=-----%=%%%-----------------------------------------%=-%#----=. .                
                 .+----*-#%-------------------------------------------%%*-%%-----. ..               
               ...*----%-+%%-----------------------------------------%%%--%%-----. ..               
               . .*----%=%%%=---------------------------------------%%%%--%%%-%--....               
                ..=----%%%%%%-%-----------------------------------+=%%%----%%-%%%*....              
              . .#----%%%%----%--------=%-----------------------+%-%#%-----%%%----*  .              
              . .**---%%--------%--------*%%------------%%----*+--%-%------%%#----*  .              
              ....**-==------------%-------%%%-------%%%--------%-%--------%-%---*. ..              
               ...+***----------------%%-----%%-----%%----------#---------%---%***...               
                ...**-------------------#%+---------*---------%----------%%---%**..-.               
                . .%-----------------------%-%-------%------+--------------%*--*...                 
                .. %--+%--------------------==%----#*--------------------------*..:                 
                 . %%*-#%=--------------------%%*-%*-=%-------------------%%%%%*..:                 
                 . -+-%%#%%%%%-----------------#%%%%%%---------------%%%%%####+*. .                 
                 . .%%%-%.   .%%----------------%%%%%--------------%%: . .-%=-*...                  
                 . .*---%..... .@%--------------#%%%--------------%%.... .*----+...                 
                 . =*---%....... .%=-------------%%-------------%%...:.. ==----*...                 
                 . **---*. :    .  .#-----------#%%----------*%-. .-... .%-----* ..                 
                 . .*----: ..     .. .%-------%-%#%--#-----%%. ...      *%=----. .                  
                  ...**---+  ..     .. .%------+%%%-+%---%%. .-.      ..%---=**. .                  
                  ....**---%.....     .. .*----%%%%-%--%%-..-.   ...  .%+--+**..-.                  
                   .. .**---%%    .... .. .%----%%%%+-+%*.......   .-%%=--**=..:                    
                     ...**---=-%%..      .#%+---%%%%--%%%.. . ..*%%%%----**.....                    
                      . ..*+---%%%%%#%%%%%%#%%%%%%%%%%*#%%%#------------**....                      
                        ...***------#%%%%%%%-#%%%%%%%---%%%---------=***...-.                       
                         ..  ::#%%%%%%%%%--------#%-------%%%%%%%%#***.....                         
                          ....   .#%%%*=--------------=----%%%%%%.    .-..                          
                               .....%------------------*-----#%%. :...                              
                                 . .%--+%%--------%----%-------%  .                                 
                                 ..#--%%#%%%%-----%=----------%%. :                                 
                                 . ++%%%%#*##*%%=%-%=--%%%%%%%-%. .                                 
                                 . .%----%%%*%#*#****#*#%%--%+-%..:                                 
                                  . ..+%----------#-#------%%#  .:                                  
                                   .:.. ..%*#%-----**%%%%-%%...:.                                   
                                      ...  .%%%=------%+-%.. -.                                     
                                         .. ..********##......                                      
                                           .:............:.                                         
                                               ..::.....                                            
*/

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: rgb(0, 0, 0, 0);
}

body {
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Couleurs */

.jaune {
    color: #FEC214;
}

.bleu {
    color: aqua;
}

.wip {
    color: rgba(255, 0, 0, 1);
    text-shadow: 0 0 10px #030303;
}

.wip2 {
    color: rgb(255, 166, 0);
    text-shadow: 0 0 10px #030303;
}

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

@keyframes glow  {
  from
  {
    text-shadow:
    0 0 10px #fff, 
    0 0 20px #fff,
    0 0 30px aqua,
    0 0 40px aqua,
    0 0 50px aqua,
    0 0 60px aqua,
    0 0 70px aqua;
  }
  to
  {
    text-shadow:
    0 0 20px #fff,
    0 0 30px aqua,
    0 0 40px aqua,
    0 0 50px aqua,
    0 0 60px aqua,
    0 0 70px aqua,
    0 0 80px aqua;
  }
}

@keyframes intro-title1 {
    0%      {scale: 0%;}
    50%     {scale: 110%;}
    100%    {scale: 100%;}
}

@keyframes intro-title2 {
    0%      {scale: 0%;}
    100%    {scale: 100%;}
}

@keyframes intro-title3 {
    0%      {left:0px; top:300px;}
    100%    {left:0px; top:00px;}
}

@keyframes accueil_btn {
    0%      {top:-100px;}
    100%    {top:0px;}
}

@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

@keyframes runLeft {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;    
  }
}

@keyframes runRight {
  0% {
    right: 0;
  }
  50% {
    right: 100%;
  }
  100% {
    right: 0;
  }
}

@keyframes animatedBackground-left {
	0%      {background-position: 0% 0%}
	100%    {background-position: 100% 0%}
}

@keyframes animatedBackground-right {
	0%      {background-position: 100% 0%}
	100%    {background-position: 0% 0%}
}

@keyframes animatedBackground-top {
	0%      {background-position: 0% 100%}
	100%    {background-position: 0% 0%}
}

@keyframes rotation {
  from
  {
    transform: rotate(0deg);
  }
  to
  {
    transform: rotate(360deg);
  }
}

@keyframes anim-char-panel-title{
	0%      {opacity: 1;}
    50%     {opacity: 0.3;}
	100%    {opacity: 1;}
}

@keyframes fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes clignottement {
    0%      {opacity: 0%;}
    100%    {opacity: 80%;}
}

/* 0_INTRO */

#intro-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url(../SRC/0_INTRO/Wallpaper_Mothership_lang.png);
    background-size: cover;
    font-family: bankGothicMedium;
    text-decoration: none;
    text-align: center;
    color: white;
}

#intro-honey {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(../SRC/0_INTRO/bg_honeycomb_loop.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    animation: animatedBackground 12s linear infinite;
}

#intro-container {
    display: flex;
    justify-content: center;
}

#intro-holo {
    position: absolute;
    top: 20%;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    background-image: url(../SRC/0_INTRO/WindowHol0.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 20px;
    width: 1000px;
    text-align: center;
    color: white;
    font-size: 1em;
    font-family: BankGothicMedium;
}

@media all and (min-width: 1920px) {
    #intro-holo {
        top: 16%;
    }
}

@media all and (min-width: 2560px) {
    #intro-holo {
        top: 20%;
    }
}

#intro-logo {
    position: absolute;
    top: -6%;
    left: 39%;
}

#intro-holo h3 {
    font-size: 1.6em;
    margin-top: 10%;
}

.intro-p-1 {
    margin-top: -1%;
}

.intro-p-2 {
    margin-top: 2%;
}

.intro-p-3 {
    position: absolute;
    top: 30%;
    left: 0%;
    color: white;
    visibility: hidden;
}

#intro-holo a {
    text-decoration: none;
    color: #FEC214;
    font-size: 1.2em;
}

#intro-holo a:hover {
    animation: glow 1s ease-in-out infinite alternate;
}

#intro-ready {
    margin-top: -29px;
    padding: 0;
    font-size: 1.2em;
    color: #FEC214;
}

@media (max-width: 768px) {
    #intro-bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-image: url();
        font-family: bankGothicMedium;
        text-decoration: none;
        text-align: center;
        color: white;
        background-color: black;
    }
    #intro-honey {
        visibility: hidden;
    }
    #intro-container {
        display: flex;
        justify-content: center;
    }
    #intro-holo {
        position: absolute;
        top: 20%;
        margin-left: auto;
        margin-right: auto;
        width: 400px;
        background-image: url();
        background-repeat: no-repeat;
        background-size: 100%;
        padding: 20px;
        text-align: center;
        color: white;
        font-size: 1em;
        font-family: BankGothicMedium;
    }
    #intro-logo {
        top: -10%;
        left: 23%;
    }
    .intro-p-1 {
        visibility: hidden;
    }
    .intro-p-2 {
        visibility: hidden;
    }
    #intro-p-3 {
        visibility: visible;
    }
}

/* 1_LANG */

#lang {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

#lang_video {
    position: fixed;
}

#lang ul {
    position: absolute;
    width: 800px;
    height: 50px;
    margin-top: -220px;
    margin-left: -490px;
    top: 50%;
    left: 50%;
    list-style-type: none;
    font-size: 55px;
    font-weight: 700;
    text-align: center;
}

#lang ul li {
    width: 900px;
    font-family: BankGothicMedium;
    margin-top: 21px;
}

#lang ul li:hover {
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(175, 239, 255), rgba(255,255,255,0));
}

#lang ul li a {
    opacity: 1;
    color: aqua;
    text-decoration: none;
}

#lang ul li a:hover {
    opacity: 1;
    color: white;
}

.unableLang {
    pointer-events: none;
}

@media all and (min-width: 2560px) {
    #lang_video {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #lang ul {
        margin-top: -250px;
    }
}

@media (display-mode: fullscreen) {
    #lang ul {
        position: absolute;
        width: 800px;
        height: 50px;
        margin-top: -300px;
        margin-left: -490px;
        top: 50%;
        left: 50%;
        list-style-type: none;
        font-size: 55px;
        font-weight: 700;
        text-align: center;
    }
}

@media all and (min-width: 2560px) and (display-mode: fullscreen) {
    #lang_video {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #lang ul {
        margin-top: -350px;
    }
}

/* 2_INTRO_VIDEO */

@media all and (min-width: 1920px){
    #intro-title2{
        margin: auto;
        margin-top: -7%;
        text-align: center;
        animation-name: intro-title2;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        border-radius: 0.5rem;
    }
    #intro-title3{
        margin: auto;
        width: 600px;
        margin-top: 50px;
        margin-left: 44%;
        position: relative;
        animation-name: intro-title3;
        animation-duration: 1s;
    }
}

@media all and (min-width: 2560px){
    #intro-title2{
        margin: auto;
        margin-top: -5%;
        text-align: center;
        animation-name: intro-title2;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        border-radius: 0.5rem;
    }
    #intro-title3{
        margin: auto;
        width: 600px;
        margin-top: 50px;
        margin-left: 46%;
        position: relative;
        animation-name: intro-title3;
        animation-duration: 1s;
    }
}

#intro-video-yipee
{
    position: fixed;
    left: 0;
    top: -10%;
    min-width: 100%;
    min-height: 100%;
}

@media all and (display-mode: fullscreen)
{
    #intro-video-yipee
    {
        position: fixed;
        left: 0;
        top: 0;
        min-width: 100%;
        min-height: 100%;
    }
}

#intro-video-theme
{
    position: fixed;
    left: 0;
    top: -10%;
    min-width: 100%;
    min-height: 100%;
    z-index: -10;
}

@media all and (display-mode: fullscreen)
{
    #intro-video-theme
    {
        position: fixed;
        left: 0;
        top: 0;
        min-width: 100%;
        min-height: 100%;
        z-index: -10;
    }
}

#intro-title1
{
    margin: auto;
    margin-top: 10%;
    text-align: center;
    animation-name: intro-title1;
    animation-duration: 3.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    border-radius: 0.5rem;
    z-index: 12;
}

#intro-title3 a
{
    font-family: Raygun;
    font-size: 32px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    color: aqua;
}

#intro-title3 a:hover
{
    color: white;
}

/* 3_TRANSITION_VIDEO */

#transition-video-yipee
{
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

/* 4_ACCUEIL */

@media all and (min-width: 1920px){
    #accueil-choix-jeux{
        position: absolute;
        top: 0px;
        left: 12%;
        animation-name: accueil_btn;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
    }
    #accueil-texte{
        color: white;
        font-family: Raygun;
        font-size: 20px;
    }
    #accueil-devices{
        position: absolute;
        top: 50px;
        left: 0px;
    }
    #accueil-titre{
        margin: 0;
        position: absolute;
        top: 20%;
        left: 25%;
    }
    #accueil-bandeau{
        position: absolute;
        top: 85%;
        background-color: black;
        opacity: 0.5;
        width: 100%;
        height: 80px;
    }
    #accueil-bandeau-titre{
        position: absolute;
        top: 80%;
        left: 25px;
    }
    #accueil-bandeau-menu ul{
        position: absolute;
        top: 85%;
        left: 350px;
        display: inline-flex;
        list-style-type: none;
        text-decoration: none;
        text-align: center;
        padding-top: 12px;
    }
    #accueil-bandeau-socials ul{
        position: absolute;
        top: 83.5%;
        right: 100px;
        display: inline-flex;
        list-style-type: none;
        text-decoration: none;
        text-align: center;
        padding-top: 12px;
    }
}

@media all and (min-width: 2560px){
    #accueil-choix-jeux{
        position: absolute;
        top: 0px;
        left: 22%;
        animation-name: accueil_btn;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
    }
    #accueil-texte{
        color: white;
        font-family: Raygun;
        font-size: 20px;
        position: absolute;
        top: 0px;
        left: 240px;
        width: 500px;
    }
    #accueil-devices{
        position: absolute;
        top: 50px;
        left: 240px;
    }
    #accueil-titre{
        margin: 0;
        position: absolute;
        top: 20%;
        left: 32%;
    }
    #accueil-bandeau{
        position: absolute;
        top: 85%;
        background-color: black;
        opacity: 0.5;
        width: 100%;
        height: 80px;
    }
    #accueil-bandeau-titre{
        position: absolute;
        top: 80%;
        left: 200px;
    }
    #accueil-bandeau-menu ul{
        position: absolute;
        top: 1085px;
        left: 650px;
        display: inline-flex;
        list-style-type: none;
        text-decoration: none;
        text-align: center;
        padding-top: 12px;
    }
    #accueil-bandeau-socials ul{
        position: absolute;
        top: 1070px;
        right: 300px;
        display: inline-flex;
        list-style-type: none;
        text-decoration: none;
        text-align: center;
        padding-top: 12px;
    }
}

#accueil-video-yipee{
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    cursor: initial;
}

#accueil-video
{
    position: fixed;
    cursor:pointer;
}

#accueil-liste {
    display: inline-flex;
    list-style-type: none;
    margin-top: 2%;
    background-color: #222046;
    width: 225px;
    height: 20px;
    border-radius: 30px;
    border-color: #222046;
    cursor: pointer;
}

#accueil-liste:hover {
    background-color: #5954A9;
}

#accueil-titre img {
    width: 950px;
}

#accueil-titre-video {
    /*animation: accueil-titre-video 6s linear infinite;*/
    animation: gelatine 0.5s linear;
    animation-iteration-count: 1;
}

#accueil-titre-video:hover {
    cursor: pointer;
}
/*
@keyframes accueil-titre-video
{
    0%      {left:0px; top:300px;}
    100%    {left:0px; top:00px;}
}
*/

#accueil-detail
{
    position: fixed;
    left: 14.3%;
    top: 6.9%;
}

#accueil-bandeau-menu ul li
{
    margin-left: 25px;
    width: 200px;
}

#accueil-bandeau-menu ul li a
{
    text-decoration: none;
    color: rgb(155, 155, 155);
    font-family: Raygun;
    font-size: 24px;
}

#accueil-bandeau-menu ul li a:hover
{
    color: #FEC214;
}

#accueil-bandeau-socials ul li
{
    margin-left: 25px;
    width: 50px;
}

#accueil-bandeau-socials ul li a img
{
    height: 50px;
}

#accueil-bandeau-copyright-container {
    position: absolute;
    bottom: 10px;
}

#accueil-bandeau-copyright-container p {
    margin: 0;
    padding: 0;
    width: 1000px;
    color: white;
    font-size: 0.8em;
    font-family: bankGothicMedium;
    text-align: center;
}

@media all and (min-width: 1920px) {
    #accueil-bandeau-copyright-container {
        left: 24%;
    }
}

@media all and (min-width: 2560px) {
    #accueil-bandeau-copyright-container {
        left: 30%;
    }
}

@media all and (display-mode: fullscreen)
{
    #accueil-bandeau{
        top: 85%;
    }
    #accueil-bandeau-titre{
        top: 82%;
    }
    #accueil-bandeau-menu ul{
        top: 85%;
    }
    #accueil-bandeau-socials ul{
        top: 83.5%;
    }
}

/* 6_DAH2 écran titre */

@media all and (min-width: 1920px){
    #DAH2-video{
        position: fixed;
        top: 0;
        left: 0;
    }
    #DAH2-enter{
        position: fixed;
        top: 80%;
        left: 43%;
        text-align: center;
        font-family: bankGothicMedium;
        text-decoration: none;
        font-size: 40px;
        color: aqua;
        padding: 0;
        border: none;
        background: none;
    }
    #DAH2-exit{
        position: fixed;
        top: 85%;
        left: 44%;
        text-align: center;
        font-family: bankGothicMedium;
        text-decoration: none;
        font-size: 40px;
        color: aqua;
        padding: 0;
        border: none;
        background: none;
    }
}

@media all and (min-width: 2560px){
    #DAH2-video{
        position: fixed;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
    }
    #DAH2-enter{
        position: fixed;
        top: 80%;
        left: 45%;
        text-align: center;
        font-family: bankGothicMedium;
        text-decoration: none;
        font-size: 40px;
        color: aqua;
        padding: 0;
        border: none;
        background: none;
    }
    #DAH2-exit{
        position: fixed;
        top: 85%;
        left: 46%;
        text-align: center;
        font-family: bankGothicMedium;
        text-decoration: none;
        font-size: 40px;
        color: aqua;
        padding: 0;
        border: none;
        background: none;
    }
}

#DAH2-video-yipee {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

#DAH2-enter:hover {
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

#DAH2-exit:hover {
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

#DAH2-menu {
    position: fixed;
    top: 0;
    left: 0;
}

#DAH2-menu-bg1 {
    position: fixed;
    top: 0;
    left: 0;
    background-image: url("../SRC/6_DAH2/bg_general1.png");
    width: 100vw;
    height: 100vh;
    opacity: 1;
    z-index: 1;
}

#DAH2-menu-bg2 {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../SRC/6_DAH2/bg_general2.png");
    background-repeat: repeat-x;
    height: 100vh;
    width: 100vw;
    animation: animatedBackground-left 15s linear infinite;
    opacity: 0.3;
    z-index: 2;
}

#DAH2-menu-bg3 {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../SRC/6_DAH2/bg_general2.png");
    background-repeat: repeat-x;
    height: 100vh;
    width: 100vw;
    animation: animatedBackground-right 15s linear infinite;
    opacity: 1;
    z-index: 3;
}

#DAH2-menu-bg4 {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../SRC/6_DAH2/bg_general3.png");
    background-repeat: repeat-y;
    height: 100vh;
    width: 100vw;
    animation: animatedBackground-top 90s linear infinite;
    opacity: 0.8;
    z-index: 4;
}

#DAH2-menu-fond1 {
    position: fixed;
    top: 60px;
    left: 525px;
    width: 900px;
    height: 80px;
    background-color: #000116;
    border-radius: 30px;
    opacity: 1;
    z-index: 7;
}

#DAH2-menu-fond2 {
    position: fixed;
    top: 100px;
    left: 475px;
    width: 1000px;
    height: 700px;
    background-color: #000116;
    border-radius: 30px;
    opacity: 0.7;
    z-index: 5;
}

#DAH2-menu-cadre1 {
    position: fixed;
    top: 60px;
    left: 525px;
    width: 900px;
    height: 80px;
    border: 5px;
    border-style: solid;
    border-color: #1C5996;
    border-radius: 30px;
    opacity: 1;
    z-index: 7;
}

#DAH2-menu-cadre2 {
    position: fixed;
    top: 100px;
    left: 475px;
    width: 1000px;
    height: 700px;
    border: 5px;
    border-style: solid;
    border-color: #1C5996;
    border-radius: 30px;
    opacity: 0.5;
    z-index: 6;
}

#DAH2-menu1 {
    position: fixed;
    top: 70px;
    left: 550px;
    width: 850px;
    height: 60px;
    list-style: none;
    font-size: 3em;
    opacity: 1;
    z-index: 12;
}

#DAH2-menu1 p {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: bankGothicMedium;
    background-image: linear-gradient(to bottom, #61eaefd2, white);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 20px;
}

/* DAH2-menu2 */

#DAH2-menu2 {
    position: fixed;
    top: 225px;
    left: 480px;
    width: 990px;
    opacity: 1;
    z-index: 12;
}

#DAH2-menu2 ul {
    text-align: center;
    list-style: none;
    font-size: 4em;
    opacity: 1;
    z-index: 7;
    font-family: bankGothicMedium;
    margin: 0;
    padding: 0;
}

#DAH2-menu2 ul li {
    width: 990px;
    height: 70px;
    margin-bottom: 40px;
}

#DAH2-menu2 ul li img {
    position: absolute;
    margin-top: -10px;
    left: 0;
    z-index: 10;
}

#DAH2-menu2 ul li p {
    position: relative;
    z-index: 16;
    padding: 0;
    margin-top: 10px;
    background-image: linear-gradient(to bottom, #61eaefd2, white);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    height: 70px;
}

#DAH2-menu2 ul li p:hover {
    background-image: linear-gradient(to bottom, #ff9500c7, #FFBE02);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    cursor: pointer;
}





/*  */

#DAH2-menu2-archives {
    position: absolute;
    top: 180px;
    left: 480px;
    width: 990px;
    height: 580px;
    opacity: 1;
    z-index: 12;
}

#DAH2-menu2-archives ul {
    text-align: left;
    list-style: none;
    font-size: 3em;
    opacity: 1;
    z-index: 7;
    font-family: bankGothicMedium;
    margin: 0;
    padding: 0;
}

#DAH2-menu2-archives ul li {
    width: 990px;
    height: 70px;
    margin-bottom: 0px;
}

#dah2MenuImg1,
#dah2MenuImg2,
#dah2MenuImg3,
#dah2MenuImg4,
#dah2MenuImg5,
#dah2MenuImg6,
#dah2MenuImg7 {
    position: absolute;
    margin-top: -15px;
    left: 0;
    z-index: 11;
}

#dah2Menu2ImgDevelopmentFiles,
#dah2Menu2ImgFuronigami,
#dah2Menu2ImgPropaganda,
#dah2Menu2ImgBMovies,
#dah2Menu2ImgFuronHandbook,
#dah2Menu2ImgInvasionReport,
#dah2Menu2ImgCredits {
    position: absolute;
    margin-top: -4px;
    left: 0;
    z-index: 10;
}

#DAH2-menu2-archives ul li p {
    position: absolute;
    z-index: 16;
    padding: 0;
    margin-top: -2px;
    margin-left: 80px;
    background-image: linear-gradient(to bottom, #61eaefd2, white);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    height: 70px;
}

#DAH2-menu2-archives ul li p:hover {
    background-image: linear-gradient(to bottom, #CE5300, #FFBE02);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    cursor: pointer;
}

/* Development Files */

#DAH2-menu2-archives-1 {
    position: absolute;
    top: 180px;
    left: 480px;
    width: 990px;
    height: 580px;
    opacity: 1;
    z-index: 12;
}

#DAH2-menu2-archives-1 ul {
    text-align: left;
    list-style: none;
    font-size: 3em;
    opacity: 1;
    z-index: 7;
    font-family: bankGothicMedium;
    margin: 0;
    padding: 0;
}

#DAH2-menu2-archives-1 ul li {
    width: 990px;
    height: 70px;
    margin-bottom: 0px;
}

#dah2MenuImg1,
#dah2MenuImg2,
#dah2MenuImg3,
#dah2MenuImg4,
#dah2MenuImg5,
#dah2MenuImg6,
#dah2MenuImg7 {
    position: absolute;
    margin-top: -15px;
    left: 0;
    z-index: 11;
}

#dah2Menu2-1,
#dah2Menu2-2,
#dah2Menu2-3,
#dah2Menu2-4,
#dah2Menu2-5,
#dah2Menu2-6,
#dah2Menu2-7,
#dah2Menu2-8 {
    position: absolute;
    margin-top: -4px;
    left: 0;
    z-index: 10;
}

#DAH2-menu2-archives-1 ul li p {
    position: absolute;
    z-index: 16;
    padding: 0;
    margin-top: -2px;
    margin-left: 80px;
    background-image: linear-gradient(to bottom, #61eaefd2, white);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    height: 70px;
}

#DAH2-menu2-archives-1 ul li p:hover {
    background-image: linear-gradient(to bottom, #CE5300, #FFBE02);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    cursor: pointer;
}

#DAH2-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#DAH2-back:hover {
    background-image: linear-gradient(to bottom, #ff9500c7, #FFBE02);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    cursor: pointer;
}

/* 5_DAH1 écran titre */

@media all and (min-width: 1920px){
    #DAH1-video{
        position: fixed;
        top: 0;
        left: 0;
    }
    #DAH1-enter{
        position: fixed;
        top: 80%;
        left: 43%;
        text-align: center;
        font-family: bankGothicMedium;
        text-decoration: none;
        font-size: 40px;
        color: aqua;
        padding: 0;
        border: none;
        background: none;
    }
    #DAH1-exit{
        position: fixed;
        top: 85%;
        left: 44%;
        text-align: center;
        font-family: bankGothicMedium;
        text-decoration: none;
        font-size: 40px;
        color: aqua;
        padding: 0;
        border: none;
        background: none;
    }
}

@media all and (min-width: 2560px){
    #DAH1-video{
        position: fixed;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
    }
    #DAH1-enter{
        position: fixed;
        top: 80%;
        left: 45%;
        text-align: center;
        font-family: bankGothicMedium;
        text-decoration: none;
        font-size: 40px;
        color: aqua;
        padding: 0;
        border: none;
        background: none;
    }
    #DAH1-exit{
        position: fixed;
        top: 85%;
        left: 46%;
        text-align: center;
        font-family: bankGothicMedium;
        text-decoration: none;
        font-size: 40px;
        color: aqua;
        padding: 0;
        border: none;
        background: none;
    }
}

#DAH1-cadre-bleu {
    position: fixed;
    top: 76.3%;
    left: 41.8%;
    background-image: url("../SRC/5_DAH1/noiretblanc.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 1000px;
    height: 160px;
    opacity: 0.6;
}

@media all and (min-width: 2560px) {
    #DAH1-cadre-bleu {
        top: 77.5%;
        left: 44.2%;
    }
}

@media all and (min-width: 2560px) and (display-mode: fullscreen){
    #DAH1-cadre-bleu {
        top: 78.2%;
        left: 44.2%;
    }
}

#DAH1-video-yipee {
    min-width: 100%;
    min-height: 100%;
}

#DAH1-enter:hover {
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

#DAH1-exit:hover {
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

/* 5_DAH1 menu du jeu */

#DAH1-menu {
    position: fixed;
    top: 0;
    left: 0;
}

@media all and (min-width: 1920px){
    #DAH1-video-menu{
        min-width: 100%;
        min-height: 100%;
    }
    #DAH1-archives-btn{
        position: absolute;
        top: 27%;
        left: 20%;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
    }
    #DAH1-hangar-btn{
        position: absolute;
        top: 38%;
        left: 20%;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
    }
    #DAH1-story-btn{
        position: absolute;
        top: 48%;
        left: 20%;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
    }
    #DAH1-chara-btn{
        position: absolute;
        top: 58%;
        left: 20%;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
    }
}

@media all and (min-width: 2560px){
    #DAH1-video-menu{
        position: fixed;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
    }
    #DAH1-archives-btn{
        position: absolute;
        top: 400px;
        left: 530px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
    }
    #DAH1-hangar-btn{
        position: absolute;
        top: 540px;
        left: 540px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
    }
    #DAH1-story-btn{
        position: absolute;
        top: 670px;
        left: 550px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
    }
    #DAH1-chara-btn{
        position: absolute;
        top: 800px;
        left: 570px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
    }
}

/* BACK */

#DAH1-back-to-title
{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#DAH1-back-to-title:hover
{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

#DAH1-back-to-menu
{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#DAH1-back-to-menu:hover
{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

#DAH1-back-to-archives
{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#DAH1-back-to-archives:hover
{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

#DAH1-video-archives
{
    width: 100vw;
    height: 100vh;
    object-fit: fill;
}

/* ARCHIVES */

@media all and (min-width: 1920px){
    #DAH1-archives-1{
        position: fixed;
        top: 44%;
        left: 31%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-2{
        position: fixed;
        top: 44%;
        left: 38%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-3{
        position: fixed;
        top: 44%;
        left: 37%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-4{
        position: fixed;
        top: 44%;
        left: 40%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-5{
        position: fixed;
        top: 44%;
        left: 33%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-6{
        position: fixed;
        top: 44%;
        left: 33%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-7{
        position: fixed;
        top: 44%;
        left: 42%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
}

@media all and (min-width: 2560px){
    #DAH1-archives-1{
        position: fixed;
        top: 44%;
        left: 34%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-2{
        position: fixed;
        top: 44%;
        left: 42%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-3{
        position: fixed;
        top: 44%;
        left: 41%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-4{
        position: fixed;
        top: 44%;
        left: 43%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-5{
        position: fixed;
        top: 44%;
        left: 38%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-6{
        position: fixed;
        top: 44%;
        left: 38%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
    #DAH1-archives-7{
        position: fixed;
        top: 44%;
        left: 45%;
        background: none;
        cursor: pointer;
        font-family: bankGothicMedium;
        font-size: 70px;
        color: aqua;
        white-space: nowrap;
        overflow: hidden;
        opacity: 0.8;
    }
}

#DAH1-archives-btn-left
{
    position: fixed;
    top: 43%;
    left: 15%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.5;
}

#DAH1-archives-btn-left:hover
{
    opacity: 1;
}

#DAH1-archives-btn-right
{
    position: fixed;
    top: 43%;
    right: 15%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.5;
}

#DAH1-archives-btn-right:hover
{
    opacity: 1;
}

#DAH1-archives-1:hover{
    opacity: 1;
}

#DAH1-archives-2:hover{
    opacity: 1;
}

#DAH1-archives-3:hover{
    opacity: 1;
}

#DAH1-archives-4:hover{
    opacity: 1;
}

#DAH1-archives-5:hover{
    opacity: 1;
}

#DAH1-archives-6:hover{
    opacity: 1;
}

#DAH1-archives-7:hover{
    opacity: 1;
}

/* Dev Darwin 1 */

@media all and (min-width: 1920px){
    #DAH1-archives-1-0{
        position: fixed;
        top: 12%;
        left: 19%;
        font-family: bankGothicMedium;
        font-size: 40px;
        color: aqua;
        text-align: center;
    }
    #DAH1-archives-1-0-titre{
        font-family: bankGothicMedium;
        font-size: 80px;
        text-shadow: 5px 5px black;
        margin-bottom: 25px;
    }
}

@media all and (min-width: 2560px){
    #DAH1-archives-1-0{
        position: fixed;
        top: 18%;
        left: 27%;
        font-family: bankGothicMedium;
        font-size: 40px;
        color: aqua;
        text-align: center;
    }
    #DAH1-archives-1-0-titre{
        font-family: bankGothicMedium;
        font-size: 80px;
        text-shadow: 5px 5px black;
        margin-bottom: 25px;
    }
}

#DAH1-archives-1-0-container
{
    padding-top: 40px;
    padding-bottom: 40px;
    margin-left: 90px;
    height: 500px;
    padding-right: 100px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#DAH1-archives-1-0-container{
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-1-0 p
{
    margin: 5px;
}

#DAH1-archives-1-0 p:hover
{
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(175, 239, 255, 0.541), rgba(255,255,255,0));
    cursor: pointer;
}

/* Furonigami 2 */

@media all and (min-width: 1920px){
    #DAH1-archives-2-0{
        position: fixed;
        top: 12%;
        left: 31%;
        font-family: bankGothicMedium;
        font-size: 40px;
        color: aqua;
        text-align: center;
    }
}

@media all and (min-width: 2560px){
    #DAH1-archives-2-0{
        position: fixed;
        top: 20%;
        left: 37%;
        font-family: bankGothicMedium;
        font-size: 40px;
        color: aqua;
        text-align: center;
    }
}

#DAH1-archives-2-0-titre
{
    font-family: bankGothicMedium;
    font-size: 80px;
    text-shadow: 5px 5px black;
    margin-bottom: 25px;
}

#DAH1-archives-2-0 ul
{
    list-style-type: none;
    padding: 0px;
    height: 500px;
}

#DAH1-archives-2-0 ul li
{
    padding-bottom: 10px;
}

#DAH1-archives-2-0 ul li:hover
{
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(175, 239, 255, 0.541), rgba(255,255,255,0));
    cursor: pointer;
}

/* Propaganda 3 */

@media all and (min-width: 1920px){
    #DAH1-archives-3-0{
        position: fixed;
        top: 12%;
        left: 15%;
        font-family: bankGothicMedium;
        font-size: 40px;
        color: aqua;
        text-align: center;
    }
    #DAH1-archives-3-0-titre{
        font-family: bankGothicMedium;
        font-size: 80px;
        text-shadow: 5px 5px black;
        margin-bottom: 25px;
    }
}

@media all and (min-width: 2560px){
    #DAH1-archives-3-0{
        position: fixed;
        top: 18%;
        left: 27%;
        font-family: bankGothicMedium;
        font-size: 40px;
        color: aqua;
        text-align: center;
    }
    #DAH1-archives-3-0-titre{
        font-family: bankGothicMedium;
        font-size: 80px;
        text-shadow: 5px 5px black;
        margin-bottom: 25px;
    }
}

#DAH1-archives-3-0-container
{
    padding-top: 40px;
    padding-bottom: 40px;
    margin-left: 90px;
    height: 500px;
    padding-right: 100px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#DAH1-archives-3-0-container{
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-3-0 p
{
    margin: 5px;
}

#DAH1-archives-3-0 p:hover
{
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(175, 239, 255, 0.541), rgba(255,255,255,0));
    cursor: pointer;
}

/* B-Movie 3.5 */

#DAH1-archives-3-5-0 {
    position: fixed;
    top: 12%;
    left: 31%;
    font-family: bankGothicMedium;
    font-size: 40px;
    color: aqua;
    text-align: center;
}

@media (min-width: 2560px) {
    #DAH1-archives-3-5-0 {
        top: 22%;
        left: 36.5%;
    }
}

#DAH1-archives-3-5-0-titre {
    font-family: bankGothicMedium;
    font-size: 80px;
    text-shadow: 5px 5px black;
    margin-bottom: 25px;
}

#DAH1-archives-3-5-0 ul {
    list-style-type: none;
    padding: 0px;
    height: 500px;
}

#DAH1-archives-3-5-0 ul li {
    padding-bottom: 10px;
}

#DAH1-archives-3-5-0 ul li:hover {
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(175, 239, 255, 0.541), rgba(255,255,255,0));
    cursor: pointer;
}

/* B-Movie 3.5 - 1 THQ Logos */

#DAH1-archives-3-5-1 {
    position: absolute;
    background-image: url("../SRC/5_DAH1/1-ARCHIVES/BGvideo2.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

#intro-honey-BB {
    background-image: url(../SRC/0_INTRO/bg_honeycomb_loop.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    height: 100vh;
    width: 100%;
    animation: animatedBackground 12s linear infinite;
}

#DAH1-archives-3-5-1 a {
    text-decoration: none;
}

#DAH1-archives-3-5-1 h1 {
    margin: 0;
    padding-top: 55px;
    color: yellow;
    text-align: center;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
}

#DAH1-archives-3-5-1 h2 {
    color: aqua;
    text-align: center;
    margin-top: 60px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
    font-style: italic;
}

#DAH1-archives-3-5-1 h3 {
    position: absolute;
    top: 45px;
    right: 265px;
    color: aqua;
    text-align: center;
    font-family: bankGothicMedium;
    font-size: 1.3em;
    font-weight: 100;
    opacity: 0.5;
}

#intro-3-5-1-youtube {
    margin-top: 60px;
    margin-left: 425px;
    width: 1100px;
    height: 600px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    mask-image: linear-gradient(to bottom, black 80%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#DAH1-archives-3-5-1 ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}

#DAH1-archives-3-5-1 ul li {
    display: inline;
    margin: 10px;
}

#DAH1-archives-3-5-1 ul li img {
    object-fit: cover;
    width: 500px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}

#DAH1-archives-3-5-1 ul li img:hover {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    background: linear-gradient(
        270deg,
        transparent 0%,
        #06429C 10%,
        #22C9EF 20%,
        #06429C 30%,
        transparent 40%,
        transparent 50%,
        transparent 60%,
        transparent 70%,
        transparent 80%,
        transparent 90%,
        transparent 100%);
    border-radius: 10px;
    background-size: 200% 200%;
    animation: rainbow 1.5s linear infinite;
    cursor: pointer;
}

#DAH1-archives-3-5-1-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#DAH1-archives-3-5-1-back:hover {
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

@media (display-mode: fullscreen) {
    #intro-3-5-1-youtube {
        margin-top: 80px;
        margin-left: 440px;
    }
    #DAH1-archives-3-5-1 h1 {
        padding-top: 135px;
    }
    #DAH1-archives-3-5-1 h2 {
        margin-top: 40px;
    }
    #DAH1-archives-3-5-1 h3 {
        top: 125px;
        right: 280px;
    }
}

@media (min-width: 2560px) {
    #intro-3-5-1-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-1 h1 {
        padding-top: 105px;
    }
    #DAH1-archives-3-5-1 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-1 h3 {
        top: 100px;
        right: 350px;
    }
}

@media (display-mode: fullscreen) and (min-width: 2560px) {
    #intro-3-5-1-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-1 h1 {
        padding-top: 185px;
    }
    #DAH1-archives-3-5-1 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-1 h3 {
        top: 175px;
        right: 350px;
    }
}

/* B-Movie 3.5 - 2 Pandemic Studios Logos */

#DAH1-archives-3-5-2 {
    position: absolute;
    background-image: url("../SRC/5_DAH1/1-ARCHIVES/BGvideo2.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

#intro-honey-BB
{
    background-image: url(../SRC/0_INTRO/bg_honeycomb_loop.png);
    background-repeat: repeat-x;
    height: 100%;
    width: 100%;
    animation: animatedBackground 42s linear infinite;
}

#DAH1-archives-3-5-2 a {
    text-decoration: none;
}

#DAH1-archives-3-5-2 h1 {
    color: yellow;
    text-align: center;
    margin: 0;
    padding-top: 55px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
}

#DAH1-archives-3-5-2 h2 {
    color: aqua;
    text-align: center;
    margin-top: 60px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
    font-style: italic;
}

#DAH1-archives-3-5-2 h3 {
    position: absolute;
    top: 45px;
    right: 265px;
    color: aqua;
    text-align: center;
    font-family: bankGothicMedium;
    font-size: 1.3em;
    font-weight: 100;
    opacity: 0.5;
}

#intro-3-5-2-youtube {
    margin-top: 60px;
    margin-left: 425px;
    width: 1100px;
    height: 600px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    mask-image: linear-gradient(to bottom, black 80%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#DAH1-archives-3-5-2 ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}

#DAH1-archives-3-5-2 ul li {
    display: inline;
    margin: 10px;
}

#DAH1-archives-3-5-2 ul li img {
    object-fit: cover;
    width: 500px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}

#DAH1-archives-3-5-2 ul li img:hover {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    background: linear-gradient(
        270deg,
        transparent 0%,
        #06429C 10%,
        #22C9EF 20%,
        #06429C 30%,
        transparent 40%,
        transparent 50%,
        transparent 60%,
        transparent 70%,
        transparent 80%,
        transparent 90%,
        transparent 100%);
    border-radius: 10px;
    background-size: 200% 200%;
    animation: rainbow 1.5s linear infinite;
    cursor: pointer;
}

#DAH1-archives-3-5-2-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#DAH1-archives-3-5-2-back:hover {
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

/* B-Movie 3.5 - 3 Intro Movie - Multi-language */

#DAH1-archives-3-5-3 {
    position: absolute;
    background-image: url("../SRC/5_DAH1/1-ARCHIVES/BGvideo2.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

#intro-honey-BB
{
    background-image: url(../SRC/0_INTRO/bg_honeycomb_loop.png);
    background-repeat: repeat-x;
    height: 100%;
    width: 100%;
    animation: animatedBackground 42s linear infinite;
}

#DAH1-archives-3-5-3 a {
    text-decoration: none;
}

#DAH1-archives-3-5-3 h1 {
    color: yellow;
    text-align: center;
    margin: 0;
    padding-top: 55px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
}

#DAH1-archives-3-5-3 h2 {
    color: aqua;
    text-align: center;
    margin-top: 60px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
    font-style: italic;
}

#DAH1-archives-3-5-3 h3 {
    position: absolute;
    top: 45px;
    right: 265px;
    color: aqua;
    text-align: center;
    font-family: bankGothicMedium;
    font-size: 1.3em;
    font-weight: 100;
    opacity: 0.5;
}

#intro-3-5-3-youtube {
    margin-top: 60px;
    margin-left: 425px;
    width: 1100px;
    height: 600px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    mask-image: linear-gradient(to bottom, black 80%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#DAH1-archives-3-5-3 ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}

#DAH1-archives-3-5-3 ul li {
    display: inline;
    margin: 10px;
}

#DAH1-archives-3-5-3 ul li img {
    object-fit: cover;
    width: 500px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}

#DAH1-archives-3-5-3 ul li img:hover {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    background: linear-gradient(
        270deg,
        transparent 0%,
        #06429C 10%,
        #22C9EF 20%,
        #06429C 30%,
        transparent 40%,
        transparent 50%,
        transparent 60%,
        transparent 70%,
        transparent 80%,
        transparent 90%,
        transparent 100%);
    border-radius: 10px;
    background-size: 200% 200%;
    animation: rainbow 1.5s linear infinite;
    cursor: pointer;
}

#DAH1-archives-3-5-3-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#DAH1-archives-3-5-3-back:hover {
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

@media (display-mode: fullscreen) {
    #intro-3-5-3-youtube {
        margin-top: 80px;
        margin-left: 440px;
    }
    #DAH1-archives-3-5-3 h1 {
        padding-top: 135px;
    }
    #DAH1-archives-3-5-3 h2 {
        margin-top: 40px;
    }
    #DAH1-archives-3-5-3 h3 {
        top: 125px;
        right: 280px;
    }
}

@media (min-width: 2560px) {
    #intro-3-5-3-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-3 h1 {
        padding-top: 105px;
    }
    #DAH1-archives-3-5-3 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-3 h3 {
        top: 100px;
        right: 350px;
    }
}

@media (display-mode: fullscreen) and (min-width: 2560px) {
    #intro-3-5-3-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-3 h1 {
        padding-top: 185px;
    }
    #DAH1-archives-3-5-3 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-3 h3 {
        top: 175px;
        right: 350px;
    }
}

/* B-Movie 3.5 - 4 Intro Movie Animatic */

#DAH1-archives-3-5-4 {
    position: absolute;
    background-image: url("../SRC/5_DAH1/1-ARCHIVES/BGvideo2.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

#DAH1-archives-3-5-4 a {
    text-decoration: none;
}

#DAH1-archives-3-5-4 h1 {
    color: yellow;
    text-align: center;
    margin: 0;
    padding-top: 55px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
}

#DAH1-archives-3-5-4 h2 {
    color: aqua;
    text-align: center;
    margin-top: 60px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
    font-style: italic;
}

#DAH1-archives-3-5-4 h3 {
    position: absolute;
    top: 45px;
    right: 265px;
    color: aqua;
    text-align: center;
    font-family: bankGothicMedium;
    font-size: 1.3em;
    font-weight: 100;
    opacity: 0.5;
}

#intro-3-5-4-youtube {
    margin-top: 60px;
    margin-left: 425px;
    width: 1100px;
    height: 600px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    mask-image: linear-gradient(to bottom, black 80%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#DAH1-archives-3-5-4 ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}

#DAH1-archives-3-5-4 ul li {
    display: inline;
    margin: 10px;
}

#DAH1-archives-3-5-4 ul li img {
    object-fit: cover;
    width: 500px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}

#DAH1-archives-3-5-4 ul li img:hover {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    background: linear-gradient(
        270deg,
        transparent 0%,
        #06429C 10%,
        #22C9EF 20%,
        #06429C 30%,
        transparent 40%,
        transparent 50%,
        transparent 60%,
        transparent 70%,
        transparent 80%,
        transparent 90%,
        transparent 100%);
    border-radius: 10px;
    background-size: 200% 200%;
    animation: rainbow 1.5s linear infinite;
    cursor: pointer;
}

#DAH1-archives-3-5-4-back{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

@media (display-mode: fullscreen) {
    #intro-3-5-4-youtube {
        margin-top: 80px;
        margin-left: 440px;
    }
    #DAH1-archives-3-5-4 h1 {
        padding-top: 135px;
    }
    #DAH1-archives-3-5-4 h2 {
        margin-top: 40px;
    }
    #DAH1-archives-3-5-4 h3 {
        top: 125px;
        right: 280px;
    }
}

@media (min-width: 2560px) {
    #intro-3-5-4-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-4 h1 {
        padding-top: 105px;
    }
    #DAH1-archives-3-5-4 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-4 h3 {
        top: 100px;
        right: 350px;
    }
}

@media (display-mode: fullscreen) and (min-width: 2560px) {
    #intro-3-5-4-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-4 h1 {
        padding-top: 185px;
    }
    #DAH1-archives-3-5-4 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-4 h3 {
        top: 175px;
        right: 350px;
    }
}

#DAH1-archives-3-5-4-back:hover
{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

/* B-Movie 3.5 - 5 Furon Down! */

#DAH1-archives-3-5-5 {
    position: absolute;
    background-image: url("../SRC/5_DAH1/1-ARCHIVES/BGvideo2.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

#DAH1-archives-3-5-5 a {
    text-decoration: none;
}

#DAH1-archives-3-5-5 h1 {
    color: yellow;
    text-align: center;
    margin: 0;
    padding-top: 55px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
}

#DAH1-archives-3-5-5 h2 {
    color: aqua;
    text-align: center;
    margin-top: 60px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
    font-style: italic;
}

#DAH1-archives-3-5-5 h3 {
    position: absolute;
    top: 45px;
    right: 265px;
    color: aqua;
    text-align: center;
    font-family: bankGothicMedium;
    font-size: 1.3em;
    font-weight: 100;
    opacity: 0.5;
}

#intro-3-5-5-youtube {
    margin-top: 60px;
    margin-left: 425px;
    width: 1100px;
    height: 600px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    mask-image: linear-gradient(to bottom, black 80%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#DAH1-archives-3-5-5 ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}

#DAH1-archives-3-5-5 ul li {
    display: inline;
    margin: 10px;
}

#DAH1-archives-3-5-5 ul li img {
    object-fit: cover;
    width: 500px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}

#DAH1-archives-3-5-5 ul li img:hover {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    background: linear-gradient(
        270deg,
        transparent 0%,
        #06429C 10%,
        #22C9EF 20%,
        #06429C 30%,
        transparent 40%,
        transparent 50%,
        transparent 60%,
        transparent 70%,
        transparent 80%,
        transparent 90%,
        transparent 100%);
    border-radius: 10px;
    background-size: 200% 200%;
    animation: rainbow 1.5s linear infinite;
    cursor: pointer;
}

#DAH1-archives-3-5-5-back{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

@media (display-mode: fullscreen) {
    #intro-3-5-5-youtube {
        margin-top: 80px;
        margin-left: 440px;
    }
    #DAH1-archives-3-5-5 h1 {
        padding-top: 135px;
    }
    #DAH1-archives-3-5-5 h2 {
        margin-top: 40px;
    }
    #DAH1-archives-3-5-5 h3 {
        top: 125px;
        right: 280px;
    }
}

@media (min-width: 2560px) {
    #intro-3-5-5-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-5 h1 {
        padding-top: 105px;
    }
    #DAH1-archives-3-5-5 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-5 h3 {
        top: 100px;
        right: 350px;
    }
}

@media (display-mode: fullscreen) and (min-width: 2560px) {
    #intro-3-5-5-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-5 h1 {
        padding-top: 185px;
    }
    #DAH1-archives-3-5-5 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-5 h3 {
        top: 175px;
        right: 350px;
    }
}

#DAH1-archives-3-5-5-back:hover
{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

/* B-Movie 3.5 - 6 Outro Movie - Multilanguage */

#DAH1-archives-3-5-6 {
    position: absolute;
    background-image: url("../SRC/5_DAH1/1-ARCHIVES/BGvideo2.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

#intro-honey-BB
{
    background-image: url(../SRC/0_INTRO/bg_honeycomb_loop.png);
    background-repeat: repeat-x;
    height: 100%;
    width: 100%;
    animation: animatedBackground 42s linear infinite;
}

#DAH1-archives-3-5-6 a {
    text-decoration: none;
}

#DAH1-archives-3-5-6 h1 {
    color: yellow;
    text-align: center;
    margin: 0;
    padding-top: 55px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
}

#DAH1-archives-3-5-6 h2 {
    color: aqua;
    text-align: center;
    margin-top: 60px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
    font-style: italic;
}

#DAH1-archives-3-5-6 h3 {
    position: absolute;
    top: 45px;
    right: 265px;
    color: aqua;
    text-align: center;
    font-family: bankGothicMedium;
    font-size: 1.3em;
    font-weight: 100;
    opacity: 0.5;
}

#intro-3-5-6-youtube {
    margin-top: 60px;
    margin-left: 425px;
    width: 1100px;
    height: 600px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    mask-image: linear-gradient(to bottom, black 80%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#DAH1-archives-3-5-6 ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}

#DAH1-archives-3-5-6 ul li {
    display: inline;
    margin: 10px;
}

#DAH1-archives-3-5-6 ul li img {
    object-fit: cover;
    width: 500px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}

#DAH1-archives-3-5-6 ul li img:hover {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    background: linear-gradient(
        270deg,
        transparent 0%,
        #06429C 10%,
        #22C9EF 20%,
        #06429C 30%,
        transparent 40%,
        transparent 50%,
        transparent 60%,
        transparent 70%,
        transparent 80%,
        transparent 90%,
        transparent 100%);
    border-radius: 10px;
    background-size: 200% 200%;
    animation: rainbow 1.5s linear infinite;
    cursor: pointer;
}

#DAH1-archives-3-5-6-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#DAH1-archives-3-5-6-back:hover {
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

@media (display-mode: fullscreen) {
    #intro-3-5-6-youtube {
        margin-top: 80px;
        margin-left: 440px;
    }
    #DAH1-archives-3-5-6 h1 {
        padding-top: 135px;
    }
    #DAH1-archives-3-5-6 h2 {
        margin-top: 40px;
    }
    #DAH1-archives-3-5-6 h3 {
        top: 125px;
        right: 280px;
    }
}

@media (min-width: 2560px) {
    #intro-3-5-6-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-6 h1 {
        padding-top: 105px;
    }
    #DAH1-archives-3-5-6 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-6 h3 {
        top: 100px;
        right: 350px;
    }
}

@media (display-mode: fullscreen) and (min-width: 2560px) {
    #intro-3-5-6-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-6 h1 {
        padding-top: 185px;
    }
    #DAH1-archives-3-5-6 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-6 h3 {
        top: 175px;
        right: 350px;
    }
}

/* B-Movie 3.5 - 7 Outro Movie Animatic */

#DAH1-archives-3-5-7{
    position: absolute;
    background-image: url("../SRC/5_DAH1/1-ARCHIVES/BGvideo2.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

#DAH1-archives-3-5-7 a {
    text-decoration: none;
}

#DAH1-archives-3-5-7 h1 {
    color: yellow;
    text-align: center;
    margin: 0;
    padding-top: 55px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
}

#DAH1-archives-3-5-7 h2 {
    color: aqua;
    text-align: center;
    margin-top: 60px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
    font-style: italic;
}

#DAH1-archives-3-5-7 h3 {
    position: absolute;
    top: 45px;
    right: 265px;
    color: aqua;
    text-align: center;
    font-family: bankGothicMedium;
    font-size: 1.3em;
    font-weight: 100;
    opacity: 0.5;
}

#intro-3-5-7-youtube {
    margin-top: 60px;
    margin-left: 425px;
    width: 1100px;
    height: 600px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    mask-image: linear-gradient(to bottom, black 80%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#DAH1-archives-3-5-7 ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}

#DAH1-archives-3-5-7 ul li {
    display: inline;
    margin: 10px;
}

#DAH1-archives-3-5-7 ul li img {
    object-fit: cover;
    width: 1000px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}

#DAH1-archives-3-5-7 ul li img:hover {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    background: linear-gradient(
        270deg,
        transparent 0%,
        #06429C 10%,
        #22C9EF 20%,
        #06429C 30%,
        transparent 40%,
        transparent 50%,
        transparent 60%,
        transparent 70%,
        transparent 80%,
        transparent 90%,
        transparent 100%);
    border-radius: 10px;
    background-size: 200% 200%;
    animation: rainbow 1.5s linear infinite;
    cursor: pointer;
}

#DAH1-archives-3-5-7-back{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

@media (display-mode: fullscreen) {
    #intro-3-5-7-youtube {
        margin-top: 80px;
        margin-left: 440px;
    }
    #DAH1-archives-3-5-7 h1 {
        padding-top: 135px;
    }
    #DAH1-archives-3-5-7 h2 {
        margin-top: 40px;
    }
    #DAH1-archives-3-5-7 h3 {
        top: 125px;
        right: 280px;
    }
}

@media (min-width: 2560px) {
    #intro-3-5-7-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-7 h1 {
        padding-top: 105px;
    }
    #DAH1-archives-3-5-7 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-7 h3 {
        top: 100px;
        right: 350px;
    }
}

@media (display-mode: fullscreen) and (min-width: 2560px) {
    #intro-3-5-7-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-7 h1 {
        padding-top: 185px;
    }
    #DAH1-archives-3-5-7 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-7 h3 {
        top: 175px;
        right: 350px;
    }
}

#DAH1-archives-3-5-7-back:hover
{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

/* B-Movie 3.5 - 8 Alternate Ending */

#DAH1-archives-3-5-8 {
    position: absolute;
    background-image: url("../SRC/5_DAH1/1-ARCHIVES/BGvideo2.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

#DAH1-archives-3-5-8 a {
    text-decoration: none;
}

#DAH1-archives-3-5-8 h1 {
    color: yellow;
    text-align: center;
    margin: 0;
    padding-top: 55px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
}

#DAH1-archives-3-5-8 h2 {
    color: aqua;
    text-align: center;
    margin-top: 60px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
    font-style: italic;
}

#DAH1-archives-3-5-8 h3 {
    position: absolute;
    top: 45px;
    right: 265px;
    color: aqua;
    text-align: center;
    font-family: bankGothicMedium;
    font-size: 1.3em;
    font-weight: 100;
    opacity: 0.5;
}

#intro-3-5-8-youtube {
    margin-top: 60px;
    margin-left: 425px;
    width: 1100px;
    height: 600px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    mask-image: linear-gradient(to bottom, black 80%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#DAH1-archives-3-5-8 ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}

#DAH1-archives-3-5-8 ul li {
    display: inline;
    margin: 10px;
}

#DAH1-archives-3-5-8 ul li img {
    object-fit: cover;
    width: 1000px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}

#DAH1-archives-3-5-8 ul li img:hover {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    background: linear-gradient(
        270deg,
        transparent 0%,
        #06429C 10%,
        #22C9EF 20%,
        #06429C 30%,
        transparent 40%,
        transparent 50%,
        transparent 60%,
        transparent 70%,
        transparent 80%,
        transparent 90%,
        transparent 100%);
    border-radius: 10px;
    background-size: 200% 200%;
    animation: rainbow 1.5s linear infinite;
    cursor: pointer;
}

#DAH1-archives-3-5-8-back{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

@media (display-mode: fullscreen) {
    #intro-3-5-8-youtube {
        margin-top: 80px;
        margin-left: 440px;
    }
    #DAH1-archives-3-5-8 h1 {
        padding-top: 135px;
    }
    #DAH1-archives-3-5-8 h2 {
        margin-top: 40px;
    }
    #DAH1-archives-3-5-8 h3 {
        top: 125px;
        right: 280px;
    }
}

@media (min-width: 2560px) {
    #intro-3-5-8-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-8 h1 {
        padding-top: 105px;
    }
    #DAH1-archives-3-5-8 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-8 h3 {
        top: 100px;
        right: 350px;
    }
}

@media (display-mode: fullscreen) and (min-width: 2560px) {
    #intro-3-5-8-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-8 h1 {
        padding-top: 185px;
    }
    #DAH1-archives-3-5-8 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-8 h3 {
        top: 175px;
        right: 350px;
    }
}

#DAH1-archives-3-5-8-back:hover
{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

/* B-Movie 3.5 - 9 Idiots come in UFOs */

#DAH1-archives-3-5-9 {
    position: absolute;
    background-image: url("../SRC/5_DAH1/1-ARCHIVES/BGvideo2.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

#DAH1-archives-3-5-9 a {
    text-decoration: none;
}

#DAH1-archives-3-5-9 h1 {
    color: yellow;
    text-align: center;
    margin: 0;
    padding-top: 55px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
}

#DAH1-archives-3-5-9 h2 {
    color: aqua;
    text-align: center;
    margin-top: 60px;
    font-family: bankGothicMedium;
    font-size: 2.5em;
    font-weight: 100;
    font-style: italic;
}

#DAH1-archives-3-5-9 h3 {
    position: absolute;
    top: 45px;
    right: 265px;
    color: aqua;
    text-align: center;
    font-family: bankGothicMedium;
    font-size: 1.3em;
    font-weight: 100;
    opacity: 0.5;
}

#intro-3-5-9-youtube {
    margin-top: 60px;
    margin-left: 425px;
    width: 1100px;
    height: 600px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    mask-image: linear-gradient(to bottom, black 80%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#DAH1-archives-3-5-9 ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}

#DAH1-archives-3-5-9 ul li {
    display: inline;
    margin: 10px;
}

#DAH1-archives-3-5-9 ul li img {
    object-fit: cover;
    width: 1000px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}

#DAH1-archives-3-5-9 ul li img:hover {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    background: linear-gradient(
        270deg,
        transparent 0%,
        #06429C 10%,
        #22C9EF 20%,
        #06429C 30%,
        transparent 40%,
        transparent 50%,
        transparent 60%,
        transparent 70%,
        transparent 80%,
        transparent 90%,
        transparent 100%);
    border-radius: 10px;
    background-size: 200% 200%;
    animation: rainbow 1.5s linear infinite;
    cursor: pointer;
}

#DAH1-archives-3-5-9-back{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

@media (display-mode: fullscreen) {
    #intro-3-5-9-youtube {
        margin-top: 80px;
        margin-left: 440px;
    }
    #DAH1-archives-3-5-9 h1 {
        padding-top: 135px;
    }
    #DAH1-archives-3-5-9 h2 {
        margin-top: 40px;
    }
    #DAH1-archives-3-5-9 h3 {
        top: 125px;
        right: 280px;
    }
}

@media (min-width: 2560px) {
    #intro-3-5-9-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-9 h1 {
        padding-top: 105px;
    }
    #DAH1-archives-3-5-9 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-9 h3 {
        top: 100px;
        right: 350px;
    }
}

@media (display-mode: fullscreen) and (min-width: 2560px) {
    #intro-3-5-9-youtube {
        margin-top: 200px;
        margin-left: 740px;
    }
    #DAH1-archives-3-5-9 h1 {
        padding-top: 185px;
    }
    #DAH1-archives-3-5-9 h2 {
        margin-top: 175px;
    }
    #DAH1-archives-3-5-9 h3 {
        top: 175px;
        right: 350px;
    }
}

#DAH1-archives-3-5-9-back:hover
{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

/* B-Movie 3.5 - 10 About Creat Studios */

#DAH1-archives-3-5-10 {
    position: absolute;
    background-image: url("../SRC/5_DAH1/3-MAINSTORY/2-CloneStory/BG2.png");
    background-size: cover;
    height: 100%;
    width: 100%;
}

#DAH1-archives-3-5-10-scroll{
    position: absolute;
    margin: 0px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    z-index: 1;
    color: white;
    font-family: Verdana;
    font-size: 25px;
}

#DAH1-archives-3-5-10-titre {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    margin: auto;
}

#DAH1-archives-3-5-10-titre p {
    color: yellow;
    font-family: DomCasualDItalic;
    font-size: 70px;
    text-align: center;
    margin: auto;
    padding-top: 100px;
    margin-left: -350px;
}

#DAH1-archives-3-5-10-titre img {
    margin-top: -150px;
    margin-left: 350px;
    width: 400px;

}

#DAH1-archives-3-5-10-intro p {
    margin: auto;
    margin-top: 400px;
    width: 1200px;
    font-size: 30px;
    font-family: DomCasualDItalic;
    color: aqua;
}

#DAH1-archives-3-5-10-texte-1 {
    margin: auto;
    margin-top: 50px;
    text-align: left;
    width: 1200px;
}

#DAH1-archives-3-5-10-texte-1 ul {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 135px;
    list-style: none;
    display: flex;
}

#DAH1-archives-3-5-10-texte-1 ul li img {
    width: 400px;
    margin-right: 40px;
}

#DAH1-archives-3-5-10-texte-2 {
    margin: auto;
    margin-top: 50px;
    text-align: left;
    width: 1200px;
    font-size: 30px;
    font-family: DomCasualDItalic;
}

#DAH1-archives-3-5-10-texte-3 {
    margin: auto;
    margin-top: 50px;
    text-align: left;
    width: 1200px;
}

#DAH1-archives-3-5-10-texte-3 img {
    float: left;
    width: 500px;
    padding-right: 30px;
}

#DAH1-archives-3-5-10-texte-4 {
    margin: auto;
    margin-top: 50px;
    text-align: left;
    width: 1200px;
}

#DAH1-archives-3-5-10-texte-4 img {
    float: right;
    width: 700px;
    padding-left: 30px;
}

#DAH1-archives-3-5-10-texte-5 {
    margin: auto;
    margin-top: 100px;
    text-align: left;
    width: 1200px;
    font-size: 30px;
    font-family: DomCasualDItalic;
}

#DAH1-archives-3-5-10-texte-6 {
    margin: auto;
    margin-top: 50px;
    text-align: left;
    width: 1200px;
}

#DAH1-archives-3-5-10-texte-6 img {
    float: left;
    width: 500px;
    padding-right: 30px;
}

#DAH1-archives-3-5-10-texte-7 {
    margin: auto;
    margin-top: 50px;
    text-align: left;
    width: 1200px;
}

#DAH1-archives-3-5-10-texte-7 ul {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 135px;
    list-style: none;
    display: flex;
}

#DAH1-archives-3-5-10-texte-7 ul li img {
    width: 400px;
    height: 400px;
    margin-right: 40px;
    object-fit: cover;
}

#DAH1-archives-3-5-10-texte-8 {
    margin: auto;
    margin-top: 40px;
    text-align: left;
    width: 1200px;
    font-size: 30px;
    font-family: DomCasualDItalic;
}

#DAH1-archives-3-5-10-texte-9 {
    margin: auto;
    margin-top: 40px;
    text-align: left;
    width: 1200px;
}

#DAH1-archives-3-5-10-texte-10 {
    margin: auto;
    margin-top: 40px;
    width: 1200px;
}

#DAH1-archives-3-5-10-texte-10-1 {
    background-color: grey;
    width: 390px;
    height: 300px;
}

#DAH1-archives-3-5-10-texte-10-1 p {
    padding-top: 0px;
    padding-left: 20px;
    font-size: 20px;
}

#DAH1-archives-3-5-10-texte-10-2 {
    background-color: grey;
    width: 390px;
    height: 300px;
}

#DAH1-archives-3-5-10-texte-10-2 p {
    padding-top: 0px;
    padding-left: 20px;
    font-size: 20px;
}

#DAH1-archives-3-5-10-texte-10-3 {
    background-color: grey;
    width: 390px;
    height: 300px;
}

#DAH1-archives-3-5-10-texte-10-3 p {
    padding-top: 0px;
    padding-left: 20px;
    font-size: 20px;
}

#DAH1-archives-3-5-10-texte-10 ul {
    list-style: none;
    display: flex;
    margin-left: -40px;
}

#DAH1-archives-3-5-10-texte-10 ul li {
    margin-right: 10px;
}

#DAH1-archives-3-5-10-texte-10 ul li img {
    width: 390px;
    height: 300px;
}

#DAH1-archives-3-5-10-texte-11 {
    margin: auto;
    margin-top: 40px;
    text-align: left;
    width: 1200px;
}

#DAH1-archives-3-5-10-texte-11 ul {
    list-style: none;
    display: flex;
    margin-left: -40px;
    margin-top: 40px;
    margin-bottom: 40px;
}

#DAH1-archives-3-5-10-texte-11 ul li {
    list-style: none;
    display: flex;
    margin-right: 60px;
}

#DAH1-archives-3-5-10-texte-11 img {
    width: 550px;
}

#DAH1-archives-3-5-10-texte-12 {
    margin: auto;
    margin-top: 0px;
    text-align: center;
    width: 1200px;
    margin-bottom: 100px;
}

#DAH1-archives-3-5-10-texte-12 img {
    margin: auto;
    margin-top: 40px;
    text-align: left;
    width: 400px;
    border-radius: 20px;
}

#DAH1-archives-3-5-10-back{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#DAH1-archives-3-5-10-:hover{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

/* Furon Handbook 4 */

@media all and (min-width: 1920px){
    #DAH1-archives-4-0{
        position: fixed;
        top: 12%;
        left: 14%;
        font-family: bankGothicMedium;
        font-size: 40px;
        color: aqua;
        text-align: center;
    }
}

@media all and (min-width: 2560px){
    #DAH1-archives-4-0{
        position: fixed;
        top: 20%;
        left: 25%;
        font-family: bankGothicMedium;
        font-size: 40px;
        color: aqua;
        text-align: center;
    }
}

#DAH1-archives-4-0-titre
{
    font-size: 80px;
    text-shadow: 5px 5px black;
    text-align: center;
}

#DAH1-archives-4-0-container
{
    width: 1400px;
    height: 400px;
    margin: 0px;
}

#DAH1-archives-4-0-container-left
{
    width: 500px;
    height: 400px;
    text-align: left;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    font-size: 30px;
    padding-right: 50px;
    margin-top: 50px;
    margin-left: -20px;
}

#DAH1-archives-4-0 ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

#DAH1-archives-4-0 ul li
{
    padding-bottom: 10px;
}

#DAH1-archives-4-0 ul li:hover
{
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(175, 239, 255, 0.541), rgba(255,255,255,0));
    cursor: pointer;
    color: white;
}

#DAH1-archives-4-0-container-right
{
    margin-top: -400px;
    margin-left: 500px;
    width: 850px;
    height: 400px;
}

.DAH1-archives-4-0-img1
{
    position: absolute;
    top: 22%;
    left: 36%;
    height: 450px;
    width: 850px;
    opacity: 0.76;
}

.DAH1-archives-4-0-img2 {
    position: absolute;
    top: 22%;
    left: 42%;
    height: 200px;
    width: 700px;
    opacity: 0.7;
}

#DAH1-archives-4-0-container-blabla {
    position: absolute;
    top: 60%;
    left: 40%;
    color: white;
    overflow-y: scroll;
    scrollbar-color: white rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 750px;
    height: 200px;
    padding-right: 25px;
    font-size: 22px;
    text-align: left;
}

#radar-container {
    position: absolute;
    top: -30%;
    left: -14%;
    z-index: 0;
}

#radar {
    position: relative;
    margin-top: -450px;
    opacity: 0.4;
    width: 2500px;
}

.rotation {
  animation: rotation 5s linear infinite;
  width: 1920px;
  height: auto;
}

@media (min-width: 2560px) {
    #radar {
        margin-top: -170px;
        margin-left: 400px;
    }
}

/* Invasion Report 5 */

@media all and (min-width: 1920px){
    #DAH1-archives-5-0{
        position: fixed;
        top: 12%;
        left: 26%;
        font-family: bankGothicMedium;
        font-size: 40px;
        color: aqua;
        text-align: left;
    }
}

@media all and (min-width: 2560px){
    #DAH1-archives-5-0{
        position: fixed;
        top: 20%;
        left: 32%;
        font-family: bankGothicMedium;
        font-size: 40px;
        color: aqua;
        text-align: left;
    }
}

#DAH1-archives-5-0-titre
{
    font-family: bankGothicMedium;
    font-size: 80px;
    text-shadow: 5px 5px black;
    margin-bottom: 100px;
    text-align: center;
}

#DAH1-archives-5-0-container
{
    height: 375px;
    padding-right: 50px;
    overflow-y: scroll;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
}

#DAH1-archives-5-0 p
{
    margin: 5px;
}

#DAH1-archives-5-0 p:hover
{
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(175, 239, 255, 0.541), rgba(255,255,255,0));
    cursor: pointer;
}

#giflent img
{
    rotate: 90deg;
    mask-image: linear-gradient(to top, transparent 0%, black 20%, black 80%, transparent 100%);
}

#gifrapide img
{
    mask-image: linear-gradient(to top, transparent 0%, black 20%, black 40%, transparent 100%);
}

.end
{
    float: right;
    margin-left: 200px;
}

#DAH1-back-to-archives5
{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#DAH1-back-to-archives5:hover
{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

/* Crédits 6 */

#DAH1-archives-6-0{
    position: absolute;
    top: 0;
    left: 0;
    font-family: bankGothicMedium;
    font-size: 40px;
    color: white;
    text-align: center;
    background-image: url("../SRC/5_DAH1/1-ARCHIVES/6-Credits/Credits_BG.png");
    background-repeat: repeat-x;
    background-size: 100%;
    height: 100%;
    width: 100%;
    padding-left: 25%;
    padding-right: 25%;
    overflow-y: scroll;
    scrollbar-color: white rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
}

.adventure
{
    font-family: Adventure;
}

.bachelor
{
    font-family: Bachelor;
}

.DomCasualDItalic
{
    font-family: DomCasualDItalic;
}

.credit
{
    display: flex;
    align-items: flex-start;
}

.credit-titre
{
    font-size: 60px;
}

.dots
{
    flex-grow: 1;
    border-bottom: 5px dotted white;
    min-width: 10px;
    height: 1em;
}

.dots2
{
    flex-grow: 1;
    border-bottom: 0px;
    min-width: 10px;
    height: 1em;
}

.back-to-top {
	position: fixed;
	bottom: 2rem;
	left: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: black;
	border-radius: 0.5rem;
	padding: 0.5rem;
	text-decoration: none;
	transition: 0.2s ease-out;
    scroll-behavior: smooth;
    z-index: 12;
}

.back-to-top span {
	color: white;
	font-size: 3rem;
	transition: 0.2s ease-out;
}

.back-to-top:hover {
	background-color: white;
}
.back-to-top:hover span {
	transform: translateY(-4px);
    color: black;
}

#DAH1-back-to-menuZ
{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
}

#DAH1-back-to-menuZ:hover
{
    text-shadow:
        0 0 1em white,
        0 0 0.2em white;
    cursor: pointer;
}

/* CHARACTERS */

@media all and (min-width: 1920px){
    #characters-panel{
        position: absolute;
        top: 13%;
        left: 31.5%;
        height: 500px;
        width: 800px;
    }
    #characters-panel-title{
        position: relative;
        margin-top: 57px;
        text-align: center;
        margin-right: 105px;
        font-size: 30px;
        color: aqua;
        font-family: bankGothicMedium;
    }
    #characters-panel-info{
        position: absolute;
        top: 13.2%;
        left: 31.5%;
        height: 500px;
        width: 800px;
        color: white;
        font-family: bankGothicMedium;
    }
    #char-panel-info-nav-gauche img{
        position: absolute;
        top: 93%;
        left: 30%;
        width: 50px;
        cursor: pointer;
        opacity: 0.7;
    }
    #char-panel-info-nav-droite img{
        position: absolute;
        top: 93%;
        left: 50%;
        width: 50px;
        cursor: pointer;
        opacity: 0.7;
    }
    #char-panel-info-nav-nombre{
        position: absolute;
        top: 95%;
        left: 38%;
        text-align: center;
        font-size: 24px;
    }
}

@media all and (min-width: 1920px) and (display-mode: fullscreen) {
    #characters-panel{
        position: absolute;
        top: 18.5%;
        left: 31.5%;
        height: 500px;
        width: 800px;
    }
    #characters-panel-info{
        position: absolute;
        top: 18.5%;
        left: 31.5%;
        height: 500px;
        width: 800px;
        color: white;
        font-family: bankGothicMedium;
    }
}

@media all and (min-width: 2560px){
    #characters-panel{
        position: absolute;
        top: 20%;
        left: 35.5%;
        height: 500px;
        width: 800px;
    }
    #characters-panel-title{
        position: relative;
        margin-top: 157px;
        text-align: center;
        margin-right: 105px;
        font-size: 30px;
        color: aqua;
        font-family: bankGothicMedium;
    }
    #characters-panel-info{
        position: absolute;
        top: 19%;
        left: 36%;
        height: 500px;
        width: 800px;
        color: white;
        font-family: bankGothicMedium;
    }
    #char-panel-info-nav-gauche img{
        position: absolute;
        top: 575px;
        left: 30%;
        width: 50px;
        cursor: pointer;
        opacity: 0.7;
    }
    #char-panel-info-nav-droite img{
        position: absolute;
        top: 575px;
        left: 50%;
        width: 50px;
        cursor: pointer;
        opacity: 0.7;
    }
    #char-panel-info-nav-nombre{
        position: absolute;
        top: 586px;
        left: 38%;
        text-align: center;
        font-size: 24px;
    }
}

@media all and (min-width: 2560px) and (display-mode: fullscreen) {
    #char-panel-info-nav-nombre{
        top: 630px;
    }
    #char-panel-info-nav-gauche img{
        top: 620px;
    }
    #char-panel-info-nav-droite img{
        top: 620px;
    }
}

#DAH1-video-characters{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

@media all and (min-width: 1920px){
    #characters-panel ul{
    margin-top: 0;
    margin-bottom: 15px;
    padding: 0;
    }

    #characters-panel ul li{
        list-style: none;
        display: inline;
        margin-right: 8px;
    }

    #characters-panel ul li img{
        width: 90px;
    }

    #characters-panel ul li img:hover{
        animation: anim-char-panel-title 0.5s ease-in-out infinite;
        cursor: pointer;
    }
}

@media all and (min-width: 2560px){
    #characters-panel ul{
    margin-top: 0;
    margin-bottom: 15px;
    padding: 0;
    }

    #characters-panel ul li{
        list-style: none;
        display: inline;
        margin-right: 8px;
    }

    #characters-panel ul li img{
        width: 90px;
    }

    #characters-panel ul li img:hover{
        animation: anim-char-panel-title 0.5s ease-in-out infinite;
        cursor: pointer;
    }
}

#char-panel-info-titre{
    margin-left: 80px;
    margin-top: -10px;
    font-size: 26px;
}

#char-panel-info-son-1{
    position: absolute;
    top: -30px;
    left: 450px;
    width: 40px;
    cursor: pointer;
}

#char-panel-info-son-2{
    position: absolute;
    top: -30px;
    left: 500px;
    width: 40px;
    cursor: pointer;
}

#char-panel-info-son-3{
    position: absolute;
    top: -30px;
    left: 550px;
    width: 40px;
    cursor: pointer;
}

#char-panel-info-barre{
    margin-left: 50px;
    margin-top: -20px;
}

#char-panel-info-cont.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#char-panel-info-cont{
    position: absolute;
    top: 12%;
    left: -5%;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    height: 330px;
    width: 800px;
    padding-right: 50px;
    z-index: 1;
    mask-image: none;
    -webkit-mask-image: none;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#char-panel-info-cont.fade-in {
  opacity: 1;
}

#char-panel-info-texte{
    width: 55%;
    text-align: justify;
}

.opa{
    opacity: 0.8;
}

#char-panel-info-texte2{
    width: 100%;
    text-align: justify;
}

#char-panel-info-texte2 a {
    color: yellow;
    text-decoration: none;
}

#char-panel-info-tableau{
    position: absolute;
    top: 0;
    left: 435px;
    width: 350px;
    background-color: rgb(0, 0, 0, 0.3);
    font-size: 12px;
}

#char-panel-info-tableau .fatfat{
    font-weight: 600;
}

.fatfat{
    font-weight: 600;
}

.slimslim{
    font-style: italic;
}

.fatslim{
    font-weight: 600;
    font-style: italic;
}

#char-panel-info-nav-gauche img:hover{
    opacity: 1;
}

#char-panel-info-nav-droite img:hover{
    opacity: 1;
}

#char-back-to-menu1{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#char-back-to-menu1:hover{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

#char-back-to-menu2{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: bankGothicMedium;
    text-decoration: none;
    font-size: 40px;
    color: aqua;
    padding: 0;
    border: none;
    background: none;
}

#char-back-to-menu2:hover{
    text-shadow:
        0 0 1em aqua,
        0 0 0.2em aqua;
    cursor: pointer;
}

/* scene */

@media all and (min-width: 1920px){
    #characters-panel-scene{
        position: absolute;
        top: 50%;
        left: 65.5%;
        height: 400px;
        width: 400px;
        animation: fade-in ease 2s;
    }
}

@media all and (min-width: 2560px){
    #characters-panel-scene{
        position: absolute;
        top: 55%;
        left: 68%;
        height: 400px;
        width: 400px;
        animation: fade-in ease 2s;
    }
}

#characters-panel-scene-image{
    position: absolute;
    top: -15%;
    left: 5%;
    height: 500px;
    z-index: 0;
}

#characters-panel-scene-gif {
    position: absolute;
    top: -10%;
    left: -15%;
    animation: clignottement 0.1s ease-in-out infinite;
}

#characters-panel-scene-gauche{
    position: absolute;
    top: 100%;
    left: 10%;
    width: 50px;
    cursor: pointer;
    opacity: 0.7;
}

#characters-panel-scene-gauche:hover{
    opacity: 1;
}

#characters-panel-scene-droite{
    position: absolute;
    top: 100%;
    left: 80%;
    width: 50px;
    cursor: pointer;
    opacity: 0.7;
}

#characters-panel-scene-droite:hover{
    opacity: 1;
}

/* Developer Darwinism 8 : Invasion 2003: Early sites and story */

#DAH1-archives-scroll-1-8-video{
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    object-fit: fill;
    opacity: 1;
}

#DAH1-archives-1-8-choix{
    position: absolute;
    top: 0px;
    left: 100px;
    right: 100px;
    animation-name: accueil_btn;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}

#archives-1-8-choix{
    display: inline-flex;
    list-style-type: none;
    margin-top: 2%;
    background-color: #222046;
    width: 100px;
    height: 20px;
    border-radius: 30px;
    border-color: #222046;
    cursor: pointer;
}

#archives-1-8-choix:hover
{
    background-color: #5954A9;
}

#DAH1-archives-1-8-choix-texte-haut {
    position: absolute;
    top: 50px;
    left: 140px;
    color: white;
    font-family: raygun;
    font-size: 40px;
}

@media (min-width: 2560px) {
    #DAH1-archives-1-8-choix-texte-haut {
        top: 50px;
        left: 440px;
    }
}

@media (min-width: 2560px) and (display-mode: fullscreen) {
    #DAH1-archives-1-8-choix-texte-haut {
        top: 50px;
        left: 440px;
    }
}

#DAH1-archives-1-8-choix-texte-bas
{
    position: absolute;
    bottom: 200px;
    right: 100px;
    color: white;
    font-family: raygun;
    font-size: 40px;
}

#DAH1-archives-1-8-back
{
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
}

#DAH1-archives-1-8-back:hover
{
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

/* DAH1-archives-scroll-1-8-1 < 1 > Introduction */

#toptop121 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity121 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity121.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-1 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-1-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-1-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 25px;
    transform: translate(48%);
}

#DAH1-1-8-1-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-1-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-1-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-bottom: 25px;
}

#DAH1-1-8-1-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 300px;
    transform: translate(48%);
}

#DAH1-archives-1-8-1-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-1-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-1-titre,
    #DAH1-1-8-1-titre2,
    #DAH1-1-8-1-titre3,
    #DAH1-1-8-1-image,
    #DAH1-1-8-1-texte,
    #DAH1-1-8-1-texte2 {
        transform: translate(80%);
    }
}

/* DAH1-archives-scroll-1-8-2 < 2 > Part 1 - Creatures From Outer Space */

#toptop122 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity122 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity122.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-2 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-2-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-2-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-2-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-2-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-2-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-bottom: 45px;
}

#DAH1-1-8-2-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 300px;
    transform: translate(48%);
}

#DAH1-archives-1-8-2-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-2-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-2-titre,
    #DAH1-1-8-2-titre2,
    #DAH1-1-8-2-titre3,
    #DAH1-1-8-2-image,
    #DAH1-1-8-2-texte,
    #DAH1-1-8-2-texte2 {
        transform: translate(80%);
    }
}

/* DAH1-archives-scroll-1-8-3 < 3 > Invasion Site: Rockwell */

#toptop123 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity123 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity123.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-3 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-3-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-3-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-3-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-3-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-3-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 45px;
    margin-bottom: 45px;
}

#DAH1-1-8-3-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 400px;
    transform: translate(48%);
    margin-top: 50px;
    float: left;
}

#DAH1-1-8-3-texte-gauche {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 475px;
    transform: translate(100%);
    margin-bottom: 45px;
    float: left;
}

#DAH1-1-8-3-texte-droite {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 510px;
    transform: translate(100%);
    float: left;
}

#DAH1-1-8-3-image-gauche {
    transform: translate(114%);
    width: 420px;
    height: 395px;
    margin-top: 10px;
    float: left;
}

#DAH1-1-8-3-image-droite {
    transform: translate(100%);
    width: 475px;
    margin-bottom: 50px;
}

#DAH1-archives-1-8-3-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-3-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-3-titre,
    #DAH1-1-8-3-titre2,
    #DAH1-1-8-3-titre3,
    #DAH1-1-8-3-image,
    #DAH1-1-8-3-texte {
        transform: translate(80%);
    }
    #DAH1-1-8-3-texte-gauche,
    #DAH1-1-8-3-texte-droite,
    #DAH1-1-8-3-image-droite {
        transform: translate(168%);
    }
    #DAH1-1-8-3-image-gauche {
        transform: translate(190%);
    }
    #DAH1-1-8-3-texte2 {
        margin-top: 450px;
        transform: translate(-13%);
    }
}

/* DAH1-archives-scroll-1-8-4 < 4 > Invasion Site: Santa Modesta */

#toptop124 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity124 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity124.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-4 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-4-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-4-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-4-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-4-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-4-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 45px;
    margin-bottom: 45px;
}

#DAH1-1-8-4-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 400px;
    transform: translate(48%);
    margin-top: 50px;
    float: left;
}

#DAH1-1-8-4-texte-gauche {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
}

#DAH1-1-8-4-texte-droite {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 510px;
    margin-top: -40px;
    transform: translate(102%);
    float: left;
}

#DAH1-1-8-4-image-gauche {
    transform: translate(114%);
    width: 420px;
    height: 350px;
    margin-top: -20px;
    float: left;
}

#DAH1-1-8-4-image-droite {
    width: 490px;
    margin-top: -280px;
    transform: translate(-100%);
    float: right;
}

#DAH1-archives-1-8-4-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-4-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-4-titre,
    #DAH1-1-8-4-titre2,
    #DAH1-1-8-4-titre3,
    #DAH1-1-8-4-image,
    #DAH1-1-8-4-texte {
        transform: translate(80%);
    }
    #DAH1-1-8-4-texte-gauche {
        transform: translate(80%);
    }
    #DAH1-1-8-4-texte-droite {
        transform: translate(170%);
    }
    #DAH1-1-8-4-image-droite {
        transform: translate(-160%);
    }
    #DAH1-1-8-4-image-gauche {
        transform: translate(190%);
    }
    #DAH1-1-8-4-texte2 {
        margin-top: 350px;
        transform: translate(-13%);
    }
}

/* DAH1-archives-scroll-1-8-5 < 5 > Invasion Site: Century City */

#toptop125 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity125 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity125.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-5 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-5-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-5-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-5-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-5-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-5-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 45px;
    margin-bottom: 45px;
}

#DAH1-1-8-5-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 400px;
    transform: translate(48%);
    margin-top: 40px;
    float: left;
}

#DAH1-1-8-5-texte4 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 400px;
    transform: translate(48%);
    margin-top: 40px;
    float: left;
}

#DAH1-1-8-5-texte3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 400px;
    transform: translate(48%);
    margin-top: -250px;
    margin-bottom: 45px;
    float: left;
}

#DAH1-1-8-5-texte-gauche {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
}

#DAH1-1-8-5-texte-droite {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 510px;
    margin-top: -382px;
    transform: translate(-70%);
    float: right;
}

#DAH1-1-8-5-image-gauche {
    transform: translate(-98%);
    width: 525px;
    height: 350px;
    margin-top: 120px;
    margin-right: 25px;
    float: left;
}

#DAH1-1-8-5-image-droite {
    width: 500px;
    height: 350px;
    margin-top: -360px;
    margin-right: -25px;
    transform: translate(-100%);
    float: right;
}

#DAH1-archives-1-8-5-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-5-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-5-titre,
    #DAH1-1-8-5-titre2,
    #DAH1-1-8-5-titre3,
    #DAH1-1-8-5-image,
    #DAH1-1-8-5-texte {
        transform: translate(80%);
    }
    #DAH1-1-8-5-texte-gauche {
        transform: translate(80%);
    }
    #DAH1-1-8-5-texte-droite {
        margin-top: 50px;
        transform: translate(-135%);
    }
    #DAH1-1-8-5-image-droite {
        transform: translate(-160%);
    }
    #DAH1-1-8-5-image-gauche {
        margin-top: 60px;
        transform: translate(-37%);
    }
    #DAH1-1-8-5-texte2 {
        margin-top: 0px;
        transform: translate(80%);
    }
    #DAH1-1-8-5-texte4 {
        margin-top: 60px;
        transform: translate(80%);
    }
    #DAH1-1-8-5-texte3 {
        margin-top: 180px;
        transform: translate(-20%);
    }
}

/* DAH1-archives-scroll-1-8-6 < 6 > Part 2 - Invasion of the Spacemen */

#toptop126 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity126 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity126.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-6 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-6-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-6-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-6-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-6-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-6-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-bottom: 45px;
}

#DAH1-1-8-6-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 300px;
    transform: translate(48%);
}

#DAH1-archives-1-8-6-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-6-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-6-titre,
    #DAH1-1-8-6-titre2,
    #DAH1-1-8-6-titre3,
    #DAH1-1-8-6-image,
    #DAH1-1-8-6-texte,
    #DAH1-1-8-6-texte2 {
        transform: translate(80%);
    }
}

/* DAH1-archives-scroll-1-8-7 < 7 > Invasion Site: Fort Macarthur */

#toptop127 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity127 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity127.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-7 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-7-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-7-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-7-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-7-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-7-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 10px;
    margin-bottom: 45px;
}

#DAH1-1-8-7-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 100px;
    transform: translate(48%);
    margin-top: 50px;
    float: left;
}

#DAH1-1-8-7-texte3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 500px;
    transform: translate(48%);
    margin-top: 25px;
}

#DAH1-1-8-7-texte-gauche {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
}

#DAH1-1-8-7-texte-droite {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 510px;
    margin-top: 300px;
    margin-right: 370px;
    float: right;
}

#DAH1-1-8-7-image-gauche {
    width: 525px;
    height: 380px;
    margin-top: 320px;
    margin-left: -515px;
    margin-bottom: 5px;
}

#DAH1-1-8-7-image-droite {
    width: 450px;
    height: 400px;
    margin-top: -410px;
    margin-right: 50px;
    transform: translate(-100%);
    float: right;
}

#DAH1-archives-1-8-7-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-7-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-7-titre,
    #DAH1-1-8-7-titre2,
    #DAH1-1-8-7-titre3,
    #DAH1-1-8-7-image,
    #DAH1-1-8-7-texte {
        transform: translate(80%);
    }
    #DAH1-1-8-7-texte-gauche {
        transform: translate(80%);
    }
    #DAH1-1-8-7-texte-droite {
        margin-top: 250px;
        transform: translate(-65%);
    }
    #DAH1-1-8-7-image-droite {
        transform: translate(-160%);
    }
    #DAH1-1-8-7-image-gauche {
        margin-top: 260px;
        transform: translate(60%);
    }
    #DAH1-1-8-7-texte2 {
        margin-top: 0px;
        transform: translate(80%);
    }
    #DAH1-1-8-7-texte4 {
        margin-top: 60px;
        transform: translate(80%);
    }
    #DAH1-1-8-7-texte3 {
        margin-top: 80px;
        transform: translate(80%);
    }
}

/* DAH1-archives-scroll-1-8-8 < 8 > Invasion Site: San Fortune */

#toptop128 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity128 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity128.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-8 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-8-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-8-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-8-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-8-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-8-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 50px;
    margin-bottom: 45px;
}

#DAH1-1-8-8-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 20px;
    float: left;
}

#DAH1-1-8-8-texte3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 500px;
    transform: translate(48%);
    margin-top: 50px;
}

#DAH1-1-8-8-texte-gauche {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
}

#DAH1-1-8-8-texte-droite {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 510px;
    margin-top: 150px;
    margin-right: 370px;
    float: right;
}

#DAH1-1-8-8-image-gauche {
    width: 525px;
    height: 345px;
    margin-top: 170px;
    margin-left: -515px;
    margin-bottom: 5px;
}

#DAH1-1-8-8-image-droite {
    width: 500px;
    height: 370px;
    margin-top: -370px;
    margin-right: -20px;
    transform: translate(-100%);
    float: right;
}

#DAH1-archives-1-8-8-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-8-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-8-titre,
    #DAH1-1-8-8-titre2,
    #DAH1-1-8-8-titre3,
    #DAH1-1-8-8-image,
    #DAH1-1-8-8-texte {
        transform: translate(80%);
    }
    #DAH1-1-8-8-texte-gauche {
        transform: translate(80%);
    }
    #DAH1-1-8-8-texte-droite {
        margin-top: 150px;
        transform: translate(-65%);
    }
    #DAH1-1-8-8-image-droite {
        transform: translate(-160%);
    }
    #DAH1-1-8-8-image-gauche {
        margin-top: 160px;
        transform: translate(60%);
    }
    #DAH1-1-8-8-texte2 {
        margin-top: 0px;
        transform: translate(80%);
    }
    #DAH1-1-8-8-texte4 {
        margin-top: 60px;
        transform: translate(80%);
    }
    #DAH1-1-8-8-texte3 {
        margin-top: 80px;
        transform: translate(80%);
    }
}

/* DAH1-archives-scroll-1-8-9 < 9 > Invasion Site: Union Town */

#toptop129 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity129 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity129.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-9 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-9-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-9-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-9-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-9-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-9-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 50px;
    margin-bottom: 45px;
}

#DAH1-1-8-9-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 20px;
    float: left;
}

#DAH1-1-8-9-texte3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 500px;
    transform: translate(48%);
    margin-top: 80px;
}

#DAH1-1-8-9-texte-gauche {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
}

#DAH1-1-8-9-texte-droite {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 510px;
    margin-top: 65px;
    margin-right: 370px;
    float: right;
}

#DAH1-1-8-9-image-gauche {
    width: 525px;
    height: 350px;
    margin-top: 80px;
    margin-left: -515px;
    margin-bottom: 5px;
}

#DAH1-1-8-9-image-droite {
    width: 500px;
    height: 400px;
    margin-top: -405px;
    margin-right: -20px;
    transform: translate(-100%);
    float: right;
}

#DAH1-archives-1-8-9-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-9-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-9-titre,
    #DAH1-1-8-9-titre2,
    #DAH1-1-8-9-titre3,
    #DAH1-1-8-9-image,
    #DAH1-1-8-9-texte {
        transform: translate(80%);
    }
    #DAH1-1-8-9-texte-gauche {
        transform: translate(80%);
    }
    #DAH1-1-8-9-texte-droite {
        margin-top: 150px;
        transform: translate(-65%);
    }
    #DAH1-1-8-9-image-droite {
        transform: translate(-160%);
    }
    #DAH1-1-8-9-image-gauche {
        margin-top: 160px;
        transform: translate(60%);
    }
    #DAH1-1-8-9-texte2 {
        margin-top: 0px;
        transform: translate(80%);
    }
    #DAH1-1-8-9-texte4 {
        margin-top: 60px;
        transform: translate(80%);
    }
    #DAH1-1-8-9-texte3 {
        margin-top: 80px;
        transform: translate(80%);
    }
}

/* DAH1-archives-scroll-1-8-10 < 10 > Part 3 - Earth vs the Furons */

#toptop130 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity130 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity130.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-10 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-10-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-10-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-10-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-10-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-10-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-bottom: 45px;
}

#DAH1-1-8-10-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 300px;
    transform: translate(48%);
}

#DAH1-archives-1-8-10-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-10-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-10-titre,
    #DAH1-1-8-10-titre2,
    #DAH1-1-8-10-titre3,
    #DAH1-1-8-10-image,
    #DAH1-1-8-10-texte,
    #DAH1-1-8-10-texte2 {
        transform: translate(80%);
    }
}

/* DAH1-archives-scroll-1-8-11 < 11 > Invasion Site: Aerea 42 */

#toptop131 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity131 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity131.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-11 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-11-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-11-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-11-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-11-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-11-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 5px;
    margin-bottom: 45px;
}

#DAH1-1-8-11-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 50px;
    float: left;
}

#DAH1-1-8-11-texte3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 400px;
    transform: translate(48%);
    margin-top: 50px;
    float: left;
}

#DAH1-1-8-11-texte4 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-11-texte-gauche {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
}

#DAH1-1-8-11-texte-droite {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 510px;
    margin-top: 135px;
    margin-right: 370px;
    float: right;
}

#DAH1-1-8-11-image-gauche {
    width: 525px;
    height: 420px;
    margin-top: 160px;
    margin-left: -515px;
    margin-bottom: 5px;
}

#DAH1-1-8-11-image-droite {
    width: 540px;
    height: 350px;
    margin-top: -360px;
    margin-right: -60px;
    transform: translate(-100%);
    float: right;
}

#DAH1-archives-1-8-11-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-11-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-11-titre,
    #DAH1-1-8-11-titre2,
    #DAH1-1-8-11-titre3,
    #DAH1-1-8-11-image,
    #DAH1-1-8-11-texte {
        transform: translate(80%);
    }
    #DAH1-1-8-11-texte-gauche {
        transform: translate(80%);
    }
    #DAH1-1-8-11-texte-droite {
        margin-top: 150px;
        transform: translate(-65%);
    }
    #DAH1-1-8-11-image-droite {
        transform: translate(-160%);
    }
    #DAH1-1-8-11-image-gauche {
        margin-top: 160px;
        transform: translate(60%);
    }
    #DAH1-1-8-11-texte2 {
        margin-top: 20px;
        transform: translate(80%);
    }
    #DAH1-1-8-11-texte4 {
        margin-top: 60px;
        transform: translate(80%);
    }
    #DAH1-1-8-11-texte3 {
        margin-top: 146px;
        transform: translate(-20%);
    }
}

/* DAH1-archives-scroll-1-8-12 < 12 > Interlude: Arms Race */

#toptop132 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity132 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity132.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-12 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-12-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-12-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-12-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-12-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 20px;
    margin-bottom: 45px;
}

#DAH1-1-8-12-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 5px;
    margin-bottom: 45px;
}

#DAH1-1-8-12-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 450px;
    transform: translate(48%);
    margin-top: 50px;
    float: left;
}

#DAH1-1-8-12-texte3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 400px;
    transform: translate(48%);
    margin-top: 50px;
    float: left;
}

#DAH1-1-8-12-texte4 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 50px;
}

#DAH1-1-8-12-texte-gauche {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 40px;
}

#DAH1-1-8-12-texte-droite {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 510px;
    margin-top: 5px;
    margin-right: 420px;
    float: right;
}

#DAH1-1-8-12-image-gauche {
    width: 480px;
    height: 850px;
    margin-top: 10px;
    margin-left: 480px;
    margin-bottom: 5px;
}

#DAH1-1-8-12-image-droite {
    width: 480px;
    height: 260px;
    margin-top: -260px;
    margin-right: 0px;
    transform: translate(-100%);
    float: right;
}

#DAH1-archives-1-8-12-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-12-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-12-titre,
    #DAH1-1-8-12-titre2,
    #DAH1-1-8-12-titre3,
    #DAH1-1-8-12-image,
    #DAH1-1-8-12-texte {
        transform: translate(80%);
    }
    #DAH1-1-8-12-texte-gauche {
        transform: translate(80%);
    }
    #DAH1-1-8-12-texte-droite {
        margin-top: 150px;
        transform: translate(-65%);
    }
    #DAH1-1-8-12-image-droite {
        transform: translate(-160%);
    }
    #DAH1-1-8-12-image-gauche {
        margin-top: 160px;
        transform: translate(65%);
    }
    #DAH1-1-8-12-texte2 {
        margin-top: 20px;
        transform: translate(80%);
    }
    #DAH1-1-8-12-texte4 {
        margin-top: 60px;
        transform: translate(80%);
    }
    #DAH1-1-8-12-texte3 {
        margin-top: 146px;
        transform: translate(-20%);
    }
}

/* DAH1-archives-scroll-1-8-13 < 13 > Invasion Site: Capitol City */

#toptop133 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity133 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity133.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-13 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-13-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-13-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-13-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-13-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-13-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 5px;
    margin-bottom: 45px;
}

#DAH1-1-8-13-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 130px;
    transform: translate(48%);
    margin-top: 10px;
    float: left;
}

#DAH1-1-8-13-texte3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 400px;
    transform: translate(48%);
    margin-top: 50px;
    float: left;
}

#DAH1-1-8-13-texte4 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 50px;
}

#DAH1-1-8-13-texte-gauche {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
}

#DAH1-1-8-13-texte-droite {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 510px;
    margin-top: 60px;
    margin-right: 330px;
    float: right;
}

#DAH1-1-8-13-image-gauche {
    width: 560px;
    height: 340px;
    margin-top: 80px;
    margin-left: -520px;
    margin-bottom: 5px;
}

#DAH1-1-8-13-image-droite {
    width: 500px;
    height: 325px;
    margin-top: -330px;
    margin-right: -40px;
    transform: translate(-100%);
    float: right;
}

#DAH1-archives-1-8-13-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-13-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-13-titre,
    #DAH1-1-8-13-titre2,
    #DAH1-1-8-13-titre3,
    #DAH1-1-8-13-image,
    #DAH1-1-8-13-texte {
        transform: translate(80%);
    }
    #DAH1-1-8-13-texte-gauche {
        transform: translate(80%);
    }
    #DAH1-1-8-13-texte-droite {
        margin-top: 150px;
        transform: translate(-65%);
    }
    #DAH1-1-8-13-image-droite {
        transform: translate(-160%);
    }
    #DAH1-1-8-13-image-gauche {
        margin-top: 160px;
        transform: translate(57%);
    }
    #DAH1-1-8-13-texte2 {
        margin-top: 20px;
        transform: translate(80%);
    }
    #DAH1-1-8-13-texte4 {
        margin-top: 60px;
        transform: translate(80%);
    }
    #DAH1-1-8-13-texte3 {
        margin-top: 40px;
        transform: translate(80%);
    }
}

/* DAH1-archives-scroll-1-8-14 < 14 > Interlude: Destroy All Humans! */

#toptop134 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity134 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity134.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-14 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-14-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-14-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-14-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-14-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-14-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 5px;
    margin-bottom: 45px;
}

#DAH1-1-8-14-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 250px;
    transform: translate(48%);
    margin-top: 10px;
    float: left;
}

#DAH1-1-8-14-texte3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 400px;
    transform: translate(48%);
    margin-top: 50px;
    float: left;
}

#DAH1-1-8-14-texte4 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 50px;
}

#DAH1-1-8-14-texte-gauche {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 40px;
}

#DAH1-1-8-14-texte-droite {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 510px;
    margin-top: 5px;
    margin-right: 420px;
    float: right;
}

#DAH1-1-8-14-image-gauche {
    width: 480px;
    height: 300px;
    margin-top: 20px;
    margin-left: 480px;
    margin-bottom: 5px;
}

#DAH1-1-8-14-image-droite {
    width: 480px;
    height: 260px;
    margin-top: -260px;
    margin-right: 0px;
    transform: translate(-100%);
    float: right;
}

#DAH1-archives-1-8-14-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-14-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-14-titre,
    #DAH1-1-8-14-titre2,
    #DAH1-1-8-14-titre3,
    #DAH1-1-8-14-image,
    #DAH1-1-8-14-texte {
        transform: translate(80%);
    }
    #DAH1-1-8-14-texte-gauche {
        transform: translate(80%);
    }
    #DAH1-1-8-14-texte-droite {
        margin-top: 120px;
        transform: translate(-65%);
    }
    #DAH1-1-8-14-image-droite {
        transform: translate(-160%);
    }
    #DAH1-1-8-14-image-gauche {
        margin-top: 120px;
        transform: translate(67%);
    }
    #DAH1-1-8-14-texte2 {
        margin-top: 80px;
        transform: translate(80%);
    }
    #DAH1-1-8-14-texte4 {
        margin-top: 60px;
        transform: translate(80%);
    }
    #DAH1-1-8-14-texte3 {
        margin-top: 40px;
        transform: translate(80%);
    }
}

/* DAH1-archives-scroll-1-8-15 < 15 > Invasion Site: Chase Island */

#toptop135 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity135 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity135.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-15 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-15-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-15-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-15-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-15-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-15-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 5px;
    margin-bottom: 45px;
}

#DAH1-1-8-15-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 250px;
    transform: translate(48%);
    margin-top: 10px;
    float: left;
}

#DAH1-1-8-15-texte3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 400px;
    transform: translate(48%);
    margin-top: 50px;
    float: left;
}

#DAH1-1-8-15-texte4 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-top: 50px;
}

#DAH1-1-8-15-texte-gauche {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
}

#DAH1-1-8-15-texte-droite {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 510px;
    margin-top: 60px;
    margin-right: 330px;
    float: right;
}

#DAH1-1-8-15-image-gauche {
    width: 530px;
    height: 390px;
    margin-top: 70px;
    margin-left: 480px;
    margin-bottom: 5px;
}

#DAH1-1-8-15-image-droite {
    width: 500px;
    height: 325px;
    margin-top: -330px;
    margin-right: -40px;
    transform: translate(-100%);
    float: right;
}

#DAH1-archives-1-8-15-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-15-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-15-titre,
    #DAH1-1-8-15-titre2,
    #DAH1-1-8-15-titre3,
    #DAH1-1-8-15-image,
    #DAH1-1-8-15-texte {
        transform: translate(80%);
    }
    #DAH1-1-8-15-texte-gauche {
        transform: translate(80%);
    }
    #DAH1-1-8-15-texte-droite {
        margin-top: 120px;
        transform: translate(-65%);
    }
    #DAH1-1-8-15-image-droite {
        transform: translate(-160%);
    }
    #DAH1-1-8-15-image-gauche {
        margin-top: 120px;
        transform: translate(62%);
    }
    #DAH1-1-8-15-texte2 {
        margin-top:20px;
        transform: translate(80%);
    }
    #DAH1-1-8-15-texte4 {
        margin-top: 60px;
        transform: translate(80%);
    }
    #DAH1-1-8-15-texte3 {
        margin-top: 40px;
        transform: translate(80%);
    }
}

/* DAH1-archives-scroll-1-8-16 < 16 > Ending */

#toptop136 {
    position: absolute;
    top: 0;
    left: 0;
}

#blackOpacity136 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.6);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

#blackOpacity136.scrolled {
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

#DAH1-archives-scroll-1-8-16 {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--aqua) rgb(0, 0, 0, 0);
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-gutter: inherit;
    width: 100vw;
    height: 100vh;
    padding-right: 50px;
    z-index: 1;
}

#DAH1-1-8-16-titre {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 100px;
    margin-bottom: 75px;
    transform: translate(48%);
}

#DAH1-1-8-16-titre2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 45px;
    margin-bottom: 45px;
    transform: translate(48%);
}

#DAH1-1-8-16-titre3 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    margin-top: 25px;
    margin-bottom: 0px;
    transform: translate(48%);
}

#DAH1-1-8-16-image {
    transform: translate(48%);
    width: 1000px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#DAH1-1-8-16-texte {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    transform: translate(48%);
    margin-bottom: 45px;
}

#DAH1-1-8-16-texte2 {
    font-family: Raygun;
    font-size: 40px;
    color: white;
    width: 1000px;
    height: 300px;
    transform: translate(48%);
}

#DAH1-archives-1-8-16-back {
    position: fixed;
    bottom: 4rem;
    right: 4rem;
    text-align: center;
    font-family: Raygun;
    text-decoration: none;
    font-size: 40px;
    color: white;
    padding: 0;
    border: none;
    background: none;
    z-index: 2;
}

#DAH1-archives-1-8-16-back:hover {
    text-shadow: 0 0 0.2em white;
    cursor: pointer;
}

@media (min-width: 2560px) {
    #DAH1-1-8-16-titre,
    #DAH1-1-8-16-titre2,
    #DAH1-1-8-16-titre3,
    #DAH1-1-8-16-image,
    #DAH1-1-8-16-texte,
    #DAH1-1-8-16-texte2 {
        transform: translate(80%);
    }
}