Salut salut! J'ai essayé de faire ça en rajoutant quelques effets hover (même si celui de l'image est pas génial :/). Par contre je ne sais pas comment gérer la barre de défilement (changer sa couleur, l'afficher par défaut) et j'avais un peu la flemme de chercher tout ça ce soir... Merci d'anvance de me dire ce qu'il manque/ ce qui n'est pas correct!

Coucou, @Dorea McH.

Pour cet exo ton rendu est correct et cette fois à part un petit espace dans l'image, ce n'est pas déformé c'est cool ! On voit bien que tu progresses. De plus les class sont compréhensibles c'est super !

Donc comme je l'ai dit, pour l'image, elle est un peu déformée à cause de ça

Code:

.imgex5 {
  display: block;
  border-radius: 45% 25%;
  width: 194px;
  height: 190px;
}

> Ton image est toute seule dans un bloc que tu as appelé blociex5, tu n'as donc pas besoin du display : block.
> L'image est carrée de 200x200 si tu la redimensionnes à 190px tu risques d'avoir un décalage de 10px par rapport à la bordure droite et basse. Tu vas devoir donc centrer ton image par text-align horizontalement et par line-height verticalement. Et pour éviter cela il suffit de fixer les proportions de l'image à 200px.

Code:

.blocex5 {
  oveflow: scroll;
}

Attention aux fautes de frappe tu as oublié un r dans overflow du coup tu ne vois pas la scroll. La valeur scroll fait que tu auras une barre de défilement horizontale et une verticale fixes, même si le texte ne dépasse pas ce qui est très moche. Il est plus esthétique d'utiliser la valeur "auto" plutôt que "scroll", overflow: auto; fait que la barre n’apparaitra que si c'est nécessaire.

Code:

.b {
  font-weight: bold;
}

"." est nécessaire pour les sélecteurs de class comme "#" l'est pour les sélecteurs d'id. "b" est une balise, le sélecteur de balise s'écrit sans signe, c'est à dire de cette façon :

Code:

b {propriété:valeur}
div {propriété:valeur}
img {propriété:valeur}

b est la balise HTML qui permet de mettre en gras par défaut donc tu n'as pas à le préciser dans le CSS sauf si tu veux changer l'effet par défaut de la balise.

La liste non ordonnée est un bloc par défaut, tu n'as pas besoin de la mettre dans une div et donc tu peux mettre directement :

Code:

<ul class="blocex5">

De plus ça va t'aider à te débarasser de ça :

Code:

<div style="clear: both;"></div>

Je vois que tu as ajouté une balise vide pour remettre les éléments dans le flux. Quand tu choisis de séparer le CSS du HTML il faut le faire jusqu'au bout. Il faut donc enlever cette partie.
Ici on veut réinitialiser la position des éléments à partir du bloc qui suit la liste, tu peux lui ajouter une class pour lui attribuer la propriété clear comme tu peux le cibler par rapport à la liste ce qui sera plus simple et plus court que de rajouter une class :

Code:

ul + div {
  clear: both;
}

Ceci veut dire "la div qui suit directement une liste ul" plus d'infos ici
C'est tout pour cet exercice, bon courage

Merci pour tes explications! je n'avais jamais utilisé la balise b avant, donc c'était la grande expérimentation ;)
Au niveau des listes, merci pour l'astuce! j'ai encore plein de choses à apprendre et pour le moment j'ai tendance à faire des div vides pour rétablir le flux (au moins je le rétablis hein )
Encore merci!

Tu fais du bon travail, t'inquiètes :3

Bon courage pour la suite, n'hésite pas à expérimenter d'autres choses et à tester d'autres exercices :3
C'était un plaisir

Coucou j'ai fait ce petit exercice :

CSS

Code:

.fiche{
        --police-titre: 'Architects Daughter', cursive;
        --police-texte: 'Arial';
        --main-bg-color: #dde3e3;
        --titre-bg-color: #a1b0b0;
        --titre-color: #ffa5af;
        --sstitre-bg-color: #f5f5f5;
        --sstitre-color: #00858d;
        --border-color: #00858d;
        width: 600px;
        height: 600px;
        overflow: hidden;
        background-color: var(--main-bg-color);
        border: 2px var(--border-color) solid;
        border-radius: 100px 50px 100px 50px;
        padding-right: 5px;
    }
    .titre{
background-color: var(--titre-bg-color);
font-family: var(--police-titre);
color: var(--titre-color);
border-radius: 150px 50px 150px 50px;;
width: 250px;
margin-left: 50px;
margin-top: 35px;
text-shadow: 1px 1px 1px black;
text-align: center;
    }

    .titre:last-of-type{
        position: absolute;
        left: 280px;
       top: 240px;
    }

    #caracteristique{
        width: 250px;
        height: 130px;
        overflow: auto;
        scrollbar-color: #f5f5f5 #00858d;
  scrollbar-width: thin;
  font-family: var(--police-texte);
margin-left: 30px;
    }

#avatar{
    border: 2px var(--border-color) solid;
    width: 200px;
    height: 200px;
    padding: 5px;
    border-radius: 100px 50px 100px 50px;
    position: absolute;
      top: 20px;
      left: 350px;
}
    #avatar img{
      width: 200px;
      height: 200px;
      border-radius: 100px 50px 100px 50px;
    }

    .sstitre{
        background-color: var(--sstitre-bg-color);
font-family: var(--police-titre);
color: var(--sstitre-color);
border-radius: 150px 50px 150px 50px;;
width: 250px;
margin-left: 50px;
margin-top: 25px;
text-align: center;
    }

    
    #contenu{
        width: 250px;
        height: 180px;
        overflow: auto;
        scrollbar-color: #f5f5f5 #00858d;
  scrollbar-width: thin;
  font-family: var(--police-texte);
margin-left: 50px;
    }

    #contenu:last-of-type{
        width: 250px;
        height: 220px;
        overflow: auto;
        scrollbar-color: #f5f5f5 #00858d;
  scrollbar-width: thin;
  font-family: var(--police-texte);
position: absolute;
top: 360px;
left: 280px;
    }

    #credits{
      position: relative;
      left: 170px;
      top: 5px;
      opacity: 0.5;
    }

HTML

Code:

<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
<div class="fiche">
    <h1 class="titre">
Nom et Prénom
    </h1>
    <div id="caracteristique">
        <ul>
            <li><b>Age : </b>XX ans</li>
            <li><b>Date de naissance : </b>00/00/00</li>
            <li><b>Pays : </b>votre choix</li>
            <li><b>Type / Sang : </b>votre choix</li>
            <li><b>Camps : </b>votre choix</li>
            <li><b>Option 1 : </b>XXXXX</li>
            <li><b>Option 2 : </b>XXXX</li>
        </ul>
    </div>
    <div id="avatar">
        <img src="https://cdn.discordapp.com/attachments/759289628103802883/773813817003606026/moonlight_by_tamplierpainter_de80tgi-fullview.png" />
    </div>
    <h1 class="titre">
        Caractéristiques
            </h1>
            <h2 class="sstitre">Aspect physique</h2>
<div id="contenu">
    Quisque at eleifend dolor. Suspendisse hendrerit enim et nulla pulvinar semper. Maecenas dictum convallis rhoncus. Donec suscipit porta mollis. Donec neque libero, scelerisque eget enim id, porttitor laoreet diam. Pellentesque sollicitudin, mi at aliquet aliquet, purus arcu suscipit odio, quis finibus ex arcu sit amet velit. Cras lectus turpis, sodales at ex id, sodales faucibus lacus. Ut sed efficitur arcu. Aliquam pellentesque ornare gravida. Suspendisse hendrerit mollis tempor. Donec blandit, turpis vel finibus egestas, tellus orci ullamcorper nibh, id rutrum nibh tellus vitae nisi. Phasellus sit amet nunc mauris. Suspendisse convallis consectetur lorem, lobortis consectetur nisl tristique a. Aliquam erat volutpat. Praesent tempus ligula viverra tristique varius.
</div>
<h1 class="titre">
    Histoire
        </h1>
        <div id="contenu">
            Quisque at eleifend dolor. Suspendisse hendrerit enim et nulla pulvinar semper. Maecenas dictum convallis rhoncus. Donec suscipit porta mollis. Donec neque libero, scelerisque eget enim id, porttitor laoreet diam. Pellentesque sollicitudin, mi at aliquet aliquet, purus arcu suscipit odio, quis finibus ex arcu sit amet velit. Cras lectus turpis, sodales at ex id, sodales faucibus lacus. Ut sed efficitur arcu. Aliquam pellentesque ornare gravida. Suspendisse hendrerit mollis tempor. Donec blandit, turpis vel finibus egestas, tellus orci ullamcorper nibh, id rutrum nibh tellus vitae nisi. Phasellus sit amet nunc mauris. Suspendisse convallis consectetur lorem, lobortis consectetur nisl tristique a. Aliquam erat volutpat. Praesent tempus ligula viverra tristique varius.
        </div>
<span id="credits">Exercice Fiche n°1 Epicode par Ayfoth</span>

</div>

Aperçu

Bonjour bonjour !
Je me suis prêté à l'exercice, avec les habituels couacs entre le rendu dans le logiciel et le rendu sur forumactif xD Pour le positionnement j'ai obté pour un display:flex et des margins pour corriger le tir de la transition. Par contre je n'ai pas réussi à faire les ovales sur la scrollbar ;-;




Le HTML :

Code:


<div class="container">
    <div class="infor">
        <div class="title">Nom et Prénom</div>
        <div class="description">
              <ul>
                   <li><b>Âge : </b>lorem</li>
                   <li><b>Genre : </b>lorem</li>
                   <li><b>Origine : </b>lorem</li>
                   <li><b>Études : </b>lorem</li>
                   <li><b>Groupe : </b>lorem</li>
                   <li><b>Particularités : </b>lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
             </ul>
       </div>
  </div>
  <div class="vavatar">
       <img class="vava" src="https://zupimages.net/up/21/39/l987.png">
  </div>
  <div class="bloc">
       <div class="title">Description</div>
       <div class="description">
           <div class="subtitle">Physique</div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

           <div class="subtitle">Mentale</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </div>
    </div>
  <div class="bloc">
    <div class="title">Histoire</div>
       <div class="description">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
    <div class="credits">Par Void sur Epicode<br>Basé sur la maquette de Reine des Ténèbres</div>
</div>

Le CSS :

Code:

.container {
    height: 550px;
    width: 480px;
    background-color: #dde3e3;
    border-radius: 100px 50px 100px 50px;
    border: 2px dashed #004b6f;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.title {
    background-color: #004b6f;
    width: 200px;
    height: 40px;
    border-top-left-radius : 120px 25px;
    border-top-right-radius : 60px 15px;
    border-bottom-left-radius : 60px 15px;
    border-bottom-right-radius : 120px 25px;
    text-align: center;
    font-family: 'Architects Daughter', cursive;
    color: #ff99ca;
    font-size: 25px;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
    line-height: 35px;
}

.subtitle {
    width: 185px;
    height: 25px;
    font-family: 'Architects Daughter', cursive;
    background-color: #f5f5f5;
    color: #004b6f;
    border-radius: 80px / 15px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 23px;
   margin-bottom: 10px;
}

.infor, .bloc {
    height: 200px;
    width: 170px;
}

.bloc {
    margin: 15px 40px 10px 10px;
}

.infor {
    margin: 30px 10px 0px 0px;
}

.description {
    height: 190px;
    width: 200px;
    overflow-y: scroll;
    text-align: justify;
    font-family: 'Arial';
    font-size: 14px;
    padding: 25px 10px 0px 0px;
}

.description ul li b {
    font-family: 'Architects Daughter', cursive;
    font-size: 18px;
}

.description::-webkit-scrollbar {
    width: 3px;
    background-color: #004b6f;
}

.description::-webkit-scrollbar-thumb {
    background-color: #f5f5f5;
    border-radius: 100px / 100px;
}

.description::-webkit-scrollbar-track {
   background-color: #004b6f;
}

.vavatar {
    height: 200px;
    width: 200px;
    border-radius: 100px 50px 100px 50px;
    border: 2px solid #ff99ca;
    margin: 0px 0px 10px 40px;
}

.vava {
    border-radius: 100px 50px 100px 50px;
    padding: 3px;
}

.credits {
    font-family: 'Arial';
    font-size: 9px;
    color: #004b6f;
    text-align: center;
    line-height: 10px;
    margin-top: 15px;
}

Salut salut @Void !
Ton code est très propre et je n'ai repéré aucune coquille  
Mais j'ai quand même quelques remarques à faire.

- Déjà, je ne sais pas sur quel logiciel/site tu as codé et si du coup ton affichage est différent, mais les blocs .description ont une hauteur trop importante et empiète sur les blocs d'en dessous. Sur Epicode, ça n'arrive pas parce qu'il y a un box-sizing: border-box; qui s'applique à toute les divs: ce qui veut dire que la largeur et la hauteur seront celles indiquées par width et height respectivement et ne seront pas impactées par le padding. Mais si tu n'as pas ce box-sizing: border-box, le padding ajoute des pixels (dans le cas de .description, cela ajoute 25px de hauteur et 10px de largeur). Et ça fini par empiéter sur les autres blocs !

Pour continuer sur les largeurs et hauteurs, il aurait fallu une largeur adaptée pour .infor et .bloc pour que, déjà, le contenu ne dépasse pas des contenants, et pour ne pas avoir à mettre des margin. Par exemple, la balise .bloc à une largeur définie de 170px mais contient elle-même la balise .description qui a une largeur supérieure, soit de 200px (pas très logique) ;

- Il me semble qu'il manque un petit overflow: hidden; à .vavatar pour empêcher l'image de dépasser ;

- Je vois que tu as utilisé les balises liste  <li> et <ul>, ce qui est un bon point; pour continuer sur les balises sémantiques, n'hésite pas à utiliser les balises titre <h1> à <h6> et les balises paragraphe <p> ;

- Il manque le lien vers l'hébergement de la police "Architects Daughter" ; (seulement dans le code que tu donnes)

Par contre je n'ai pas réussi à faire les ovales sur la scrollbar ;-;

Ce n'est pas exactement un arrondis, plus un dégradé (enfin je le vois comme ça). Un solution pour avoir ce rendu (sur Chrome), c'est du coup de remplacer la couleur du background par un dégradé. Pour cela, tu as la propriété gradient. Sur la maquette, c'est un dégradé du centre vers l'extérieur de #F5F5F5 vers #61B1B8, ce qui donne :

Code:

.description::-webkit-scrollbar-thumb {
    background: radial-gradient(circle, #F5F5F5 90%, #61B1B8 100%);
}

ensuite, tu as une bordure de 1px dégradée autour de cette barre dégradée, que tu peux ajouter en utilisant la propriété border-image. Sur la maquette, ça ressemble à un dégradé du haut vers le bas de #00858C puis #F5F5F5 et retour a #00858C, ce qui se traduit par:

Code:

.description::-webkit-scrollbar-thumb {
    border: 1px solid;
    border-image: linear-gradient(to top, #00858C, #F5F5F5, #00858C) 1;
}

On a donc au final:

Code:

.description::-webkit-scrollbar-thumb {
    background: #F5F5F5; /* au cas où la navigateur ne supporte pas gradient */
    background: radial-gradient(circle, #F5F5F5 90%, #61B1B8 100%);
    border: 1px solid;
    border-image: linear-gradient(to top, #00858C, #F5F5F5, #00858C) 1;
}

C'est un résumé très rapide, je t'ai mis des liens vers de courtes explications sur chaque propriétés mais si tu veux plus d'explications/précisions, n'hésite pas (:

Je crois avoir fait le tour. Encore une fois, si quelque chose n'est pas clair, dis-le moi, je développerais plus en détail. o/

Coucou @Sunhae !

Tout d'abord, désolé pour ces deux semaines de retard, j'ai eu un problème de punaise de lit dans mon immeuble, ça a touché mon appart alors j'ai dû mettre toutes mes affaires dans des sacs poubelles sur mon bureau, impossible de me poser sur mon ordinateur pendant ces deux semaines consécutives T.T

Ensuite, merci beaucoup de prendre le temps de me faire tes retours !
Je comprenais pas trop le soucis avec le box-sizing car je ne l'avais pas utilisé ni sur VSC ni sur mon forum test, puis je me suis rendu compte que cette propriété faisait parti du CSS de base en mordernBB

Du coup je l'ai désactivé le temps de faire mes corrections, donc normalement le codage corrigé fonctionne dans les deux cas ! Avec tes retours, j'ai pu simplifier encore plus mon code (merci beaucoup   ), j'ai retiré la quasi totalité des margins de correction sauf pour les crédits (c'était un peu du chipotage, je voulais pas qu'ils soient trop collé au bas xD) et la class subtitle pour l'espacer du texte. J'ai corrigé les problèmes de largeurs/hauteurs, par contre pour le dépassement de l'image, comme au début je voyais pas le problème (vu que j'avais box-sizing: border-box; d'office sur mon forum test), je n'ai pas réglé le problème avec overflow: hidden;, mais avec un peu de flexbox (là encore oui, j'aime beaucoup trop cette propriété).

Pour les balises h1 à h6, j'avoue être un peu frileux avec. Ce n'est pas que je ne sache pas les utiliser, mais dans mes cours on m'a dit qu'elles s'utilisaient seulement pour donner un ordre d'importance sur un site web, h1 correspondant au titre du site et h6 aux crédits tout en bas d'une page (par exemple). Du coup je me dis que je dois faire attention avec ça pour prendre les bonnes habitudes et réserver ces balises pour le corps du site, pas pour une simple fiche. Je sais pas si c'est clair ? xD Pour la balise p, j'avais commencé le code en l'utilisant pour les descriptions, sauf que ça faisait tout bugué sans que je comprenne exactement pourquoi. Sans doute parce que ça devenait trop spécifique avec la liste (ça donnait .bloc p ul li b {...}, le problème ne venant pas du display (j'ai essayé xD). Du coup je l'ai abandonné pour une div. J'aurais pu l'utiliser à l'intérieur de ma class description, mais ça ne m'étais pas utile alors je me suis dit que c'était rajouter du code pour rien

Merci BEAUCOUP pour le dégradé, j'avais complètement oublié qu'on pouvait les faire en radial  Du coup je l'ai ajouté à mon CSS, j'ai préféré ne pas mettre de bordures car je trouve ça plus joli comme ça //pan//. Par contre, j'ai pas trop compris pourquoi, mais en le faisant sur mon forum test, le dégradé ne fonctionnait pas. Quand j'ai inspecté la scrollbar avec l'outil dev de chrome, ça m'indiquait que la valeur était erronée °° Du coup j'ai remplacé les couleurs hexadécimales en couleur RGB et là ça a fonctionné. C'est bizarre parce que normalement ça marche l'hexadécimal sur un gradient. Peut-être que sur un radial-gradient non ? M'enfin bon, au moins ça fonctionne quand même xD

DONC voici le résultat :




Le code HTML complet cette fois :

Code:

<link href="https://dl.dropboxusercontent.com/s/g9ypmuclrymmkky/exercices.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
<div class="background">
    <div class="container">
        <div class="bloc">
            <div class="title">Nom et Prénom</div>
            <div class="description">
                <ul>
                    <li><b>Âge : </b> lorem</li>
                    <li><b>Genre : </b>lorem</li>
                    <li><b>Origine : </b>lorem</li>
                    <li><b>Études : </b>lorem</li>
                    <li><b>Groupe : </b>lorem</li>
                    <li><b>Particularités : </b>lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                </ul>
            </div>
        </div>
        <div class="bloc">
            <div class="vava">
                <img src="https://zupimages.net/up/21/39/l987.png">
            </div>
        </div>
        <div class="bloc">
            <div class="title">Description</div>
            <div class="description">
                <div class="subtitle">Physique</div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                <div class="subtitle">Mentale</div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
        <div class="bloc">
            <div class="title">Histoire</div>
            <div class="description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>
    <div class="credits">
        Par Void sur Epicode<br>Basé sur la maquette de Reine des Ténèbres
    </div>
</div>


Et le CSS :

Code:

.background {
    height: 550px;
    width: 480px;
    margin: auto;
    background-color: #e3e3e3;
    border-radius: 100px 50px 100px 50px;
    border: 2px dashed #004b6f;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.container {
    height: 480px;
    width: 480px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: end;
}

.title {
    background-color: #004b6f;
    width: 200px;
    height: 40px;
    margin: auto;
    border-top-left-radius : 120px 25px;
    border-top-right-radius : 60px 15px;
    border-bottom-left-radius : 60px 15px;
    border-bottom-right-radius : 120px 25px;
    text-align: center;
    font-family: 'Architects Daughter', cursive;
    color: #ff99ca;
    font-size: 25px;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
    line-height: 35px;
}

.subtitle {
    width: 165px;
    height: 25px;
    margin: auto;
    margin-bottom: 10px;
    font-family: 'Architects Daughter', cursive;
    background-color: #f5f5f5;
    color: #004b6f;
    border-radius: 80px / 15px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 23px;
}

.bloc {
    height: 230px;
    width: 210px;
}

.description {
    height: 170px;
    width: 180px;
    padding: 10px;
    margin: auto;
    overflow-y: scroll;
    text-align: justify;
    font-family: 'Arial';
    font-size: 14px;
}

.description ul li b {
    font-family: 'Architects Daughter', cursive;
}

.description::-webkit-scrollbar {
    width: 5px;
}

.description::-webkit-scrollbar-thumb {
    background: #F5F5F5;
    background: radial-gradient(rgb(245,245,245) 60%, rgb(0,75,111) 85%);
}

.description::-webkit-scrollbar-track {
    background: #004b6f;
}

.vava {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 206px;
    width: 206px;
    border-radius: 100px 50px 100px 50px;
    border: 2px solid #ff99ca;
}

.vava img {
    height: 200px;
    width: 200px;
    padding: 3px;
    border-radius: 100px 50px 100px 50px;
}

.credits {
    font-family: 'Arial';
    font-size: 9px;
    color: #004b6f;
    text-align: center;
    line-height: 10px;
    margin-top: -20px;
}