/* import de la police du site */
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');


/* pour remettre les valeurs à 0 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* tout sur le body */
body {
    /* image de fond du body */
    background-image:url(images/fond\ blog.png);
    background-attachment: fixed;
    background-size: cover;

    /* police du site */
    font-family: Comic Sans MS;
    font-weight: 400;
    font-style: normal;

    /* pour dire que le body fait la taille de l'écran */
    width: 100vw;
    height: 100vh;

    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/*changer couleur liens*/
a {
    color: rgb(41, 82, 164);
    font-weight: normal;
    text-decoration: none;
}

a:hover {
    color: rgb(41, 82, 164);
    font-weight: normal;
    text-decoration: none;
}

a:visited {
    color: rgb(96, 48, 116);
    text-decoration: none;
}


/* style du cadre xp */
#cadrediv {
    background-image: url(images/cadrexptest.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 65%;
    aspect-ratio: 18/11;
    margin-top: 5%;
    padding: 1.33% 1.8% 1.3% 1.5%;
    position: relative;
    text-align: left;
    margin-left: -5%;
}

/* style du texte dans le cadre xp */
#textedanscadre {
    height: 91%;
    width: 103.5%;
    margin-left:-1%;
    margin-top:6.8%;
    justify-content: center;
    align-content: center;
    overflow: auto;
    scrollbar-color: hsla(0, 0%, 69%, 1) white;
}

/* style des h1 */
h1 {
    color: #ffffff;
    text-shadow: 1.5px 1px 2.5px hsla(0, 0%, 0%);
    font-family: Tahoma;
    transform: scaleX(0.95);
    text-align:left;
    display: inline-block;
    text-decoration: none;
}

/* style des h2 */
h2 {
    color: #000000;
    font-weight: normal;
    text-decoration: underline;

}

/* style des h3 */
h3 {
    font-weight:750;
    font-size: 2.3vh;
}

/* style des paragraphes */
p {
    font-size: 2.5vh;
    color: #000000;
    text-align: left;
}



/* div pour retour au site */
.retourausite {
    margin-top: 20%;
    align-items: center;
    text-align: center;
}
/* image retour au site */
.logo {
    width: 9vh;
    filter: drop-shadow(1.5px 1.5px 2px hsla(0, 0%, 0%, 0.8));
}

/* div liste articles */
.listearticles {
    margin-top: 7%;
    align-items: center;
    text-align: center;
}

/* style des noms sous applis */
.titreapp {
    font-size: 0.95vw;
    font-family: Tahoma;
    position: relative;
    color: #ffffff;
    text-shadow: 1.5px 1.5px 2px black;
    filter: drop-shadow(1.5px 1.5px 2px hsla(0, 0%, 0%, 0.5));
    transform: scaleX(1.1);
    margin-top: 0.5%;
    text-align: center;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.boitelienapp {
    width: 100%;
}

/* style des titres des applis */
.nomducadre {
    position: absolute;
    z-index:2;
    font-size: 2.5vh;
    float: left;
    width: 70%;
    margin-left: -0.10em;
    margin-top: -0.40em;
    font-family: "Trebuchet MS", Tahoma, sans-serif;
}

/* croix pour retour accueil blog */
.retouraccueilblog {
    position: absolute;
    left: 95%;
    top: 1.85%;
    z-index:2;
}
.croix {
    width: 4.25vh;
    height: 4.25vh;
    display:block;
}
.boitelien {
    width: 100%;
}

/* div pour les applis */
.containerapps {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    align-content: flex-start;
    width: 7%;
    height: 100%;
    margin-left: 1%;
    position:fixed;
    left: 0%;
}

/* style des sticky notes */
.stickynote {
    width:17vw;
    height:35vh;
    background-image: linear-gradient(rgb(255, 251, 18), rgb(255, 140, 0));
    align-self: right;
    font-family: Comic Sans MS;
    font-weight:100;
    position: absolute;
    right:6%;
    bottom:27%;
    opacity:0.8;    
    box-shadow: 2px 2px 1px hsla(1, 1%, 1%, 0.7);
    padding: 0.5%;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    
}

.stickynote p {
    font-size: 2.5vh;
    margin-top: 3%;
}

.stickynote2 p {
    font-size: 2.5vh;
    margin-top: 3%;
}

.stickynotetitre {
    height: 4.5vh;
    text-align: center;
    background-image: linear-gradient(rgb(255, 251, 18), rgb(255, 174, 0));
    text-shadow: 1.5px 1.5px 1px white;
}

.stickynote2 {
    width:17vw;
    height:35vh;
    background-image: linear-gradient(rgb(152, 164, 250), rgb(79, 98, 246));
    align-self: right;
    font-family: Comic Sans MS;
    font-weight:100;
    position: absolute;
    right:2%;
    bottom:2%;
    opacity:0.9;    
    box-shadow: 2px 2px 1px hsla(1, 1%, 1%, 0.7);
    padding: 0.5%;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
}

.stickynotetitre2 {
    height: 4.5vh;
    text-align: center;
    background-image: linear-gradient(rgb(152, 164, 250), rgb(79, 98, 246));
    text-shadow: 1.5px 1.5px 1px white;
}

/* style du cadre paint */
#cadrepaint {
    background-image: url(images/paintfenetretest.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 79%;
    aspect-ratio: 18/15;
    margin-top: 3%;
    margin-left:-5%;
    padding: 1.33% 1.8% 1.3% 1.5%;
    position: relative;
    text-align: left;
}

.retouraccueilblogpaint {
    position: absolute;
    left: 94.3%;
    top: 1.7%;
    z-index:2;
}

/* liens pour retourner à la liste des posts + des tags */
.lienretourlisteposts {
    float: right;
    text-decoration: underline;
}

/* cadre de fond pour les pages avec les tags seulement */
#cadreword {
    background-image: url(images/wordfenetre.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 89%;
    aspect-ratio: 18/17;
    margin-top: 2%;
    margin-left:-5%;
    padding: 1.33% 1.8% 1.3% 2%;
    position: relative;
    text-align: left;
}

/* style du texte pour pages avec les tags seulement */
#textedanscadreword {
    height: 60%;
    width: 90%;
    margin-left: 5%;
    margin-top:26%;
    justify-content: center;
    align-content: center;
    overflow: auto;
    scrollbar-color: #ffffff hsla(0, 0%, 69%, 0.0);
    }

/* style de la croix retour accueil pages avec les tags seulement */
.retouraccueilblog-tags {
    position: absolute;
    left: 94.3%;
    top: 1.4%;
    z-index:2;
}

/* mettre les liens soulignés */
.lientags {
    text-decoration: underline;
}

/* cadre de fond corbeille */
#cadrecorbeille {
    background-image: url(images/xp_recyclebin.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 78%;
    aspect-ratio: 18/16;
    margin-top: 4%;
    margin-left:-3%;
    padding: 1.33% 1.8% 1.3% 2%;
    position: relative;
    text-align: left;
}

/* style de la croix retour accueil corbeille seulement */
.retouraccueilblog-corbeille {
    position: absolute;
    left: 94%;
    top: 1%;
    z-index:2;
}

/* style du texte corbeille seulement */
#textedanscadrecorbeille {
    height: 65%;
    width: 50%;
    margin-left: 50%;
    margin-top:30%;
    justify-content: center;
    overflow: auto;
    }

/* style du titre corbeille seulement */
.nomducadre-corbeille {
    position: absolute;
    z-index:2;
    font-size: 2.5vh;
    float: left;
    width: 70%;
    margin-left: -0.54em;
    margin-top: -0.50em;
    font-family: "Trebuchet MS", Tahoma, sans-serif;
}

/* style pour le lien dans la corbeille avec le chat */
#chatkk {
    width: 20%;
}
#txtchatkk {
    font-size:80%;
    margin-left:-75%;
    margin-top:2%;
}
.chattxtcorbeille-container {
    display: flex;
}
#txtpetitgris-corbeille {
    color:#434343;
    font-size: 80%;
}
.lienchatcorbeille {
    width:100%;
}

.textetamagotchi {
    position: absolute;
    left: 25%;
    bottom: 62%;
    text-align: center;
    font-size: 150%;
    font-weight: bold;
}

.tamagotchi {
    position: absolute;
    width: 40%;
    display: block;
    margin: auto;
    gap: 25px;
    left: 35%;
    top: 40%;
}

.animtama {
    transition: transform 0.3s;
}

.animtama:hover {
    transform: scale(1.1);
}

#cadredivnouveau {
    width: 55%;
    margin-top: 3%;
    margin-left: -8.5%;
}

.imagetop {
    position: absolute;
    margin-left: -0.5%;
    width: 56.06%;
}

#textedanscadrenouveau {
    z-index: -2;
    background-color: #ffffff;
    height: 100%;
    width: 100.5%;
    margin-left:-0.65%;
    margin-top:6%;
    padding: 2% 5% 1% 5%;
    justify-content: center;
    align-content: center;
    box-shadow:
	  inset #000AA2 0 0 0 0.2vmax, 
        inset #0156E6 0 0 0 0.4vmax, 
        inset #000AA2 0 0 0 0.6vmax;
    border-radius: 1vmax;
}

.nomducadrenouveau {
    position: absolute;
    z-index:2;
    font-size: 2.8vh;
    float: left;
    width: 70%;
    margin-left: 0.3em;
    margin-top: 0.8em;
    font-family: "Trebuchet MS", Tahoma, sans-serif;
}

.retouraccueilarticles {
    position: absolute;
    left: 71.25%;
    top: 8%;
    z-index:2;
}
.croixarticles {
    width: 4.9vh;
    height: 4.9vh;
    display:block;
}

.cadreblinkies {
    background-color: #ffffff;
    height: 27%;
    width: 12.9%;
    padding: 1%;
    box-shadow:
	  inset #000AA2 0 0 0 0.2vmax, 
        inset #0156E6 0 0 0 0.4vmax, 
        inset #000AA2 0 0 0 0.6vmax;
    border-radius: 1vmax;
    position: absolute;
    right: 4%;
    top: 5%;
    display:grid;
}

.blinkie {
    width: 10.8vmax;
    height: 1.45vmax;
}

.taskbar {
    width: 100%;
    position: relative;
    margin-top: 7%;
}

.boitelienblinkie {
    height: 1.4vmax;
    width: 10.8vmax;
    display: grid;
}

.cadrepub {
    background-color: #ffffff;
    height: 55%;
    width: 17%;
    padding: 1%;
    box-shadow:
	    inset #000AA2 0 0 0 0.2vmax, 
        inset #0156E6 0 0 0 0.4vmax, 
        inset #000AA2 0 0 0 0.6vmax;
    border-radius: 1vmax;
    position: absolute;
    right: 4.5%;
    top: 125%;
    display: grid;
}

.centrer {
    width: 25%;
    margin: auto;
    border: black solid 1px;
    display: block;
}

.justecentrer {
    margin: auto;
    border: black solid 1px;
    display: block;
    width: 100%;
}

.cadrevid {
    margin: auto;
    border: black solid 1px;
    display: block;
    padding: 1% 1% 3% 1%;
    width: 50%;
}

.centrertxt {
    text-align: center;
    padding-top: 5%;
}

.groupeimg {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: .5rem;
}

.imgplage {
    width: 24%;
    border: black solid 1px;
}

.pubimg {
    width:100%;
    height:100%;
}

.blogseparation {
    margin: auto;
    display: block;
    width: 100%;
}