@font-face {
    font-family: ywBig;
    src: url('assets\\fonts\\FOT-RowdyStd-EB.otf');
}

@font-face {
    font-family: ywCool;
    src: url('assets\\fonts\\fot-yuruka-std.ttf');
}

@font-face {
    font-family: sub;
    src: url('assets\\fonts\\FOT-SeuratProN-B.otf');
}


body {
    position: relative;
    background-image: url('assets/background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/patern2.png');
    background-size: 15vw 15vw;
    background-repeat: repeat;
    background-position: 0 0;
    opacity: 0.15; /* sur le patern de yokai watch 1 l'opacité semble être à 10% mais 15 est ce qui est le plus fidèle au résultat*/
    /* filter: brightness(100); objectif avoir un blanc bien pétant 255 */
    pointer-events: none;
    z-index: -1;
    animation: movePatern 10s linear infinite;
}

@keyframes movePatern {
    from {
        background-position: 0 0, center;
    }
    to {
        background-position: 15vw 15vw, center;
    }
}

html {
  scroll-behavior: smooth;
}

.spacer {
    height: calc(100vw*150/1600 + 0.5*33vw*655/2048 + 5vh);
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: sub;
    font-size: larger;
    width: 60vw;
    margin: 0 20vw 0 20vw;
}

.container2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 60vw;
    margin: 0 20vw 0 20vw;
}

.copyright {
    color: white;
    font-size: 2em;
    font-family: sub;
    margin: 0 auto 0 auto;
}

h1 {
    font-family: ywCool;
}

.h0 {
    font-family: ywCool;
    font-size: 2.5em;
}

.h0 > .gradient-text {
    -webkit-text-stroke: 2px white;
}

u{
    color: #880000;
}

.separator{
    width: 60vw;
    height: 0;
    border-width: 0;
    background-color: transparent;
    border-style: dashed;
}

.get_btn {
    width: 25vw;
    height: calc(25vw*125/540);
    background-image: url('assets/get.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: resizing 2s ease-in-out infinite;
}

.dl_btn {
    width: calc(0.15*60vw);
    height: calc(2/3*0.15*60vw);
    background-image: url('assets/ver1.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 0.75vw 0 0.75vw;
}

.v2{
    background-image: url('assets/ver2.png');
}

.dl_btn:hover{
    transform: scale(1.2);
}

@keyframes resizing {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.header {
    position: relative;
    background-image: url('assets/nuage_g.png'), url('assets/head.png'), url('assets/nuage_d.png');
    width: 100vw;
    height: calc(100vw*886/1780);
    background-size: 10vw auto, 80vw auto, 10vw auto;
    background-repeat: no-repeat;
    background-position: left top, center top, right top;
    z-index: 1;
}

.header_gradient {
    position: absolute;
    top: calc(100vw*850/1780);
    left: 0;
    width: 100vw;
    height: calc(100vw*150/1600);
    background-image: linear-gradient(to bottom, rgba(236, 244, 251, 1), rgba(236, 244, 251, 0));
    pointer-events: none; /* permet de cliquer à travers le gradient */
    z-index: 0;
}

.cloud {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    width: 33vw;
    height: fit-content;
    z-index: 2;
}

.cloud img {
    display: block;
    width: 100%; 
    height: auto;
}

/* Positions initiales */
.cl {
    left: 10vw;
    top: calc(100vw*760/1780);
    animation: float-left 8.4s ease-in-out infinite;
}

.cc {
    left: calc((100vw - 33vw)/2);
    top: calc(100vw*800/1780);
    animation: float-center 9s ease-in-out infinite;
    animation-delay: -3s;
}

.cr {
    right: 10vw;
    top: calc(100vw*760/1780);
    animation: float-right 8.7s ease-in-out infinite;
    animation-delay: -1.75s;
    transform: rotate(-7deg);
}

.cloud:hover img {
  transform: scale(1.2);
}

/* Animation de flottement */
@keyframes float-left {
  0%, 100% {
    transform: rotate(7deg) translateY(0);
  }
  50% {
    transform: rotate(7deg) translateY(calc(0.5*33vw*655/2048));
  }
}

@keyframes float-right {
  0%, 100% {
    transform: rotate(-7deg) translateY(0);
  }
  50% {
    transform: rotate(-7deg) translateY(calc(0.5*33vw*655/2048));
  }
}

@keyframes float-center {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(0.5*33vw*655/2048));
  }
}

.hitbox {
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
    width: calc(80vw/3);
    height: 100%;
    z-index: 999; /* toujours au-dessus */
    background: transparent; /* invisible */
    cursor: pointer;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: lightblue;
    background-image: url('assets/icons/shogunyan.png'), url('assets/icons/nyanmurai.png'), url('assets/icons/foudomyo.png');
    background-size: 10vw, 10vw, 10vw;
    background-repeat: no-repeat;
    background-position: 30vw 45vh, 45vw 45vh, 60vw 45vh;
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.33));
    animation: poyo 1.5s infinite;
    z-index: 9999;
}

.footer {
    margin: 10vh 0 0 0;
    height: 100vw;
    background-color: transparent;
    display: flex;
    background-image: url('assets/pad/Oreille_Pad_G.png'), url('assets/pad/Oreille_Pad_D.png'), url('assets/pad/Oeil_Pad.png'), url('assets/pad/Oeil_Pad.png'), url('assets/pad/Bouche_Pad.png'), url('assets/pad/black.png');
    background-size: calc(24vw) calc(24vw*977/1442 + 1px), calc(24vw) calc(24vw*977/1442 + 1px), 24vw 24vw, 24vw 24vw, 80vw auto, 100vw calc(100vw - 24vw*977/1442);
    background-position: left top, right top, 5vw calc(24vw*977/1442 + 10vw), 71vw calc(24vw*977/1442 + 10vw), center calc(24vw*977/1442 + 10vw + 24vw + 10vw), left calc(24vw*977/1442);
    background-repeat: no-repeat;
}

.screen {
    display: flex;
    flex-direction: column;
    width: 95vw;
    height: calc(95vw - 24vw*977/1442);
    margin: calc(24vw*977/1442 + 2.5vw) 2.5vw 2.5vw 2.5vw;
    background-color: rgba(84, 84, 84, 0.33);
    border-radius: 10%;
}

.screen > .gradient-text {
    margin: 0 auto 10vw auto;
    height: calc(1.5*50vw*100/970.7);
    font-family: ywCool;
    font-size: calc(50vw*100/970.7);
    -webkit-text-stroke: calc(0.04*(50vw*100/970.7)) white;
}

a > .gradient-text {
    box-sizing: content-box;
    margin: auto 0 auto 15vw;
    height: calc(1.21*50vw*100/970.7);
    font-family: ywCool;
    font-size: calc(0.80*50vw*100/970.7);
    -webkit-text-stroke: calc(0.04*(50vw*100/970.7)) white;
}

.gradient-text {
    text-align: center;
    align-items: center;
    display: inline-block; /* largeur de la div = largeur du texte */
    background: -webkit-linear-gradient(bottom left, #E65F42, #F6B03A, #C7BA31, #9CC328, #5CACCC);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 4px white;
    background-size: 100% 1%;
}

#ytb::before, #ytb::after,
#mail::before, #mail::after,
#dcd::before, #dcd::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 12.5vw; height: 12.5vw;
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease-in-out;
    border-radius: 2.5vw;
}

#ytb::before {
    background-image: url('assets/icons/youtube_icon.png');
    opacity: 1;
}

#mail::before {
    background-color: #5CACCC;
    background-image: url('assets/icons/mail.png');
    opacity: 1;
}

#dcd::before {
    background-image: url('assets/icons/discord_icon.png');
    opacity: 1;
}

#ytb::after{
    background-image: url('assets/icons/wibwob.png');
    opacity: 0;
}

#mail::after {
    background-image: url('assets/icons/gmail.png');
    opacity: 0;
}

#dcd::after {
    background-image: url('assets/icons/server.jpg');
    opacity: 0;
}

#ytb:hover::before, #mail:hover::before, #dcd:hover::before {
    opacity: 0;
}

#ytb:hover::after, #mail:hover::after, #dcd:hover::after {
    opacity: 1;
}

#ytb, #mail, #dcd {
    background-size: 12.5vw;
    background-repeat: no-repeat;
    background-position: left center;
    height: 12.5vw;
    width: 37vw;
    position: relative;
    overflow: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

#ytb, #mail, #dcd{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 2.5vw;
}

#btnTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 5vw;
    height: 5vw;
    display: none; /* Caché au départ */
    border: none;
    cursor: pointer;
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.33));
    background-image: url('assets/top_btn.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
}
    
#btnTop:hover {
    transform: scale(1.2);
}

@keyframes poyo {
  0% {background-position: 30vw 45vh, 45vw 45vh, 60vw 45vh; background-size: 10vw, 10vw, 10vw;}
  25% {background-position: 29vw 35vh, 45vw 45vh, 60vw 45vh; background-size: 12vw, 10vw, 10vw;}
  50% {background-position: 30vw 45vh, 44vw 35vh, 60vw 45vh; background-size: 10vw, 12vw, 10vw;}
  75% {background-position: 30vw 45vh, 45vw 45vh, 59vw 35vh; background-size: 10vw, 10vw, 12vw;}
  100% {background-position: 30vw 45vh, 45vw 45vh, 60vw 45vh; background-size: 10vw, 10vw, 10vw;}
}

.temp-spacer {
    height: 50vh;
}

@media (max-aspect-ratio: 1){ /*donc l'écran est plus long que large */
    .separator{
        width: 100vw;
    }

    .container {
        width: 100vw;
        margin: 0;
    }

    .header_gradient {
        top: calc(100vw*850/1424);
    }

    .header {
        height: calc(100vw*886/1424);
        background-size: 100vw auto;
    }

    .cloud {
        width: 41.25vw;
    }

    /* Positions initiales */
    .cl {
        left: 0vw;
        top: calc(100vw*760/1424);
    }

    .cc {
        left: calc((100vw - 41.25vw)/2);
        top: calc(100vw*800/1424);
    }

    .cr {
        right: 0vw;
        top: calc(100vw*760/1424);
    }

    /* Animation de flottement */
    @keyframes float-left {
    0%, 100% {
        transform: rotate(7deg) translateY(0);
    }
    50% {
        transform: rotate(7deg) translateY(calc(0.5*41.25vw*655/2048));
    }
    }

    @keyframes float-right {
    0%, 100% {
        transform: rotate(-7deg) translateY(0);
    }
    50% {
        transform: rotate(-7deg) translateY(calc(0.5*41.25vw*655/2048));
    }
    }

    @keyframes float-center {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(calc(0.5*41.25vw*655/2048));
    }
    }

    #preloader {
        background-position: 20vw 42vh, 42vw 42vh, 64vw 42vh;
        background-size: 16vw, 16vw, 16vw;
    }

    @keyframes poyo {
        0% {background-position: 20vw 42vh, 42vw 42vh, 64vw 42vh; background-size: 16vw, 16vw, 16vw;}
        25% {background-position: 19vw 32vh, 42vw 42vh, 64vw 42vh; background-size: 18vw, 16vw, 16vw;}
        50% {background-position: 20vw 42vh, 41vw 32vh, 64vw 42vh; background-size: 16vw, 18vw, 16vw;}
        75% {background-position: 20vw 42vh, 42vw 42vh, 63vw 32vh; background-size: 16vw, 16vw, 18vw;}
        100% {background-position: 20vw 42vh, 42vw 42vh, 64vw 42vh; background-size: 16vw, 16vw, 16vw;}
    }

    .get_btn {
        width: 60vw;
        height: calc(60vw*125/540);
    }

    .footer {
        background-size: 30vw calc(30vw*977/1442 + 1px), 30vw calc(30vw*977/1442 + 1px), 30vw 30vw, 30vw 30vw, 80vw auto, 100vw calc(100vw - 30vw*977/1442);
        background-position: left top, right top, 5vw calc(30vw*977/1442 + 10vw), 65vw calc(30vw*977/1442 + 10vw), center calc(30vw*977/1442 + 10vw + 30vw + 10vw), left calc(30vw*977/1442);
    }

    .copyright {
        font-size: 1em;
    }

    #btnTop {
        width: 12.5vw;
        height: 12.5vw;
    }

    p {
        font-size: 12px;
    }

    h1 {
        font-size: 1em;
    }

    .h0 {
        font-size: 1.75em;
    }

    .container2 {
       width: 100vw;
       margin: 0;
    }

    .dl_btn {
        width: calc(0.20*100vw);
        height: calc(2/3*0.20*100vw);
        margin: 0 1vw 0 0.1vw;
    }

    .spacer {
        height: calc(100vw*150/1600 + 0.5*41.25vw*655/2048 + 5vh);
    }
}