/* esthetique générale */
:root {
  --primary-color:  rgb(236, 156, 180);
  --secondary-color: rgb(255, 223, 227);
  --tertiary-color: rgb(143, 141, 224);
  --quartiary_color: rgb(0);
  --background-color: white;

  --text-color1: var(--primary-color);
  --text-color2: var(--tertiary-color);
  --shadow-color: var(--primary-color);

  --fontsize: 1.2vw;
  --fontsize_big: 2.5vw;
  --fontsize_bigbig: 3vw;
  --fontsize_small: 0.6vw;
  --fontsize_medium: 1.75vw;
}

/* fonts */

.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}

.secondary_color{
    color: var(--secondary-color);
}

.tertiary_color{
    color: var(--tertiary-color);
}

.quartiary_color{
    color: var(--quartiary-color);
}

body {
    opacity: 0;
    cursor: url("../medias/cursor.png"), auto;
    top:0;
    margin:0;
    padding-top: 1px;
	font-family:serif;
    font-size: var(--fontsize);
	color: var(--text-color1);
	background: var(--background-color);
    animation: fadein 0.5s forwards ease-in-out;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

a{
    cursor: url("../medias/cursor_doigt.png"), auto;
	text-decoration: none; 
	color: var(--text-color1);

}

.texte a{
    text-decoration: underline dotted var(--text-color2); 
}

#fond a:hover{
    color: var(--text-color2);
}



table, th, td {
  border: 1px solid var(--primary-color);
  border-collapse: collapse;
  text-align: center;
}

table img{
    height:10vw;
}

li{
    list-style-type: none;
    list-style-position: inside;
}



::selection {
	color: white;
	background: var(--tertiary-color);
}

/* caractéristiques générales des blocks  */
.block {
    box-sizing: border-box;
    width : 90vw; 
    height:auto;

    margin-right:5vw; 
	margin-left:5vw;
    margin-bottom:0.7vw; 
	margin-top:0.7vw; 

    display:block;
    overflow:auto;
    /* background-color: var(--primary-color); */
}

#fond{
    overflow-x: hidden;
	text-align: center;
    padding:1.5vw; 
    padding-top: 0;
    height: calc(100vh - 11.0vw) ;
    background-color: var(--secondary-color); 
    border-style: solid;
    border-width: 0.2vw;
    border-radius: 2vw;
    border-color: white;
    box-shadow: 0vw 0vw 2vw var(--primary-color);
    scrollbar-width: none; 
}

#entete{
    align-items: center;
    margin-bottom:2vw;
    margin-top:2vw;
    height: var(--fontsize_bigbig);
    overflow: hidden;
}

#entete > span{
    text-align:center;
    flex: 1;
}

#nom_site{
    font-size: var(--fontsize_bigbig);
    transition: font-size 0.1s 0.1s ease-in, font-weight 0.1s 0.1s;
}

#nom_site span{
    transition: font-size 0.2s ease-in, font-weight 0.2s ease;
}

#nom_site:hover{ 
    font-size: calc(var(--fontsize_bigbig)/3) ;
    /* font-weight: 900; */
}

#nom_site:hover span{
    font-size:calc(var(--fontsize_bigbig)*4/3) ;
    font-weight: 100;
}

.menu a{
    display: inline-block;
    margin:0.5vw 0.6vw;
    padding: 0.1vw 0.8vw 0.14vw;
    background-color: white;
    border-style: solid;
    border-width: 0.15vw;
    border-radius: 2vw;
    border-color: var(--primary-color);
    width: 6.5vw;
}

.menu a:hover{
    color:var(--tertiary-color);
    box-shadow: 0px 0px 0.5vw var(--tertiary-color);
    border-color: var(--tertiary-color);
}

#pied{
	text-align: left;
    color: var(--text-color1);
    padding: 0.5vw 0px;
}

#pied a{
    color: var(--background-color);
    text-shadow: 0px 0px 4px var(--text-color1);
}

#pied a:hover{
    color: var(--background-color);
    text-shadow: 0px 0px 4px var(--text-color2);
}



/* caractéristiques générales du contenu */

.contenu{
    box-sizing: border-box;
    margin:1vw;
    padding:1vw 1vw;
    border-style: dotted;
    border-color: var(--primary-color);
    border-radius: 2vw;
    border-width: 0.15vw;
    background-color: var(--background-color);
    /* sbox-shadow: 0vw 0.1vw 2vw var(--tertiary-color); */
}

.flexbox{
    display: flex;
    align-items: center;
}

.contenuflex1{
    
    flex:1;
}
.contenuflex2{
    flex:2;
}
.contenuflex4{
    flex:4;
}

.leftalign{
	text-align: left;
}
.rightalign{
	text-align: right;
}
.centeralign{
	text-align: center;
}

.titre{
    box-shadow: none;
    border-style: none;
    font-size: var(--fontsize_big);
    background: transparent;
}
.titre_objet{
    background: white;
}


/* gallerie et images et stickers*/

img{
    max-width:100%;
    box-sizing: border-box;
}


.gallerie img{
    margin: 1vw;
    object-fit: contain;
    border:dotted 0.4vw transparent;
}

.gallerie .sticker{
    max-width: 14vw;
    max-height: 14vw;
}

.gallerie img:not(.sticker){
    object-fit: cover;
    width:14vw;
    height:14vw;
}

.gallerie div{
display: inline-block;
}

.gallerie img:not(.sticker):hover{
    box-shadow: 0px 0px 1.5vw var(--tertiary-color), 0px 0px 1vw var(--tertiary-color);
    border:solid 0.15vw var(--background-color) ;
}

.carousel{
    height : 65vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scrollbar-width: none; 

}

.image_carousel{
    display: inline-block;
    max-height: 100%;
    max-width: calc(100% - 2vw);
    margin: 1vw;
    scroll-snap-align: center;

}

.scroll_hint{
    position:fixed;
    left: 87vw;
    top: 8vw;
}



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

@keyframes stickers_move_horizontal {
    0% {left: 0vw;}
    25% {left: 4vw;}
    50% {left: 0vw;}
    75% {left: -4vw;}
    100% {left: 0vw;}
}


@keyframes stickers_move_vertical {
    0% {top: -4vw;}
    25% {top: 8vw;}
    50% {top: 16vw;}
    75% {top: 8vw;}
    100% {top: -4vw;}
}

.sticker{
    position:relative;
    animation:stickers_rotate 10s linear infinite, 
                stickers_move_horizontal 10s ease-out infinite,  
                stickers_move_vertical 10s  ease-in infinite;
    animation-delay: -25s;
}

.sticker:hover{
    filter: drop-shadow(0px 0px 1.5vw var(--tertiary-color));
}

.decoration1{
    position: fixed;
    top:5.5vw;
    left:2vw;
    width: 10vw;
    rotate: -15deg;
}
.decoration2{
    position: fixed;
    top:6vw;
    left:86vw;
    width: 6vw;
}
.decoration3{
    position: fixed;
    top:9vw;
    left:92vw;
    width: 7vw;
}

.retour{
    position: relative;
    left: 40vw;
}





@media screen and ((max-aspect-ratio: 1)){

    body{

    }
    :root {
        --fontsize: 3.5vw;
        --fontsize_big: 5vw;
        --fontsize_bigbig: 6vw;
        --fontsize_small: 1.2vw;
        --fontsize_medium: 3.5vw;
    }  

    /* page d'acceuil */
    .gallerie .sticker{
        max-width: 20vw;
        max-height: 20vw;
    }

    /* Entete */
    .menu a{
        width: auto;
    }

    #entete{
        height: auto;
    }


    /* Blocks */
    #fond{
        min-height: calc(100vh - 24vw);
        height: auto ;
    }

    .contenu{
        padding: 3vw;
    }

    /* Gallerie */
    .gallerie img:not(.sticker){
        width: 36vw;
        height: 36vw;
    }
    .decoration1, .decoration2, .decoration3{
        display: none;
    }

    /* Contenu */
    #fond .flexbox{
        display: block;
    }

    .carousel{
        height : auto;
    }

    .scroll_hint{
        display: none;
    }

    .retour{
    left: 35vw;
}



    /* Blog */

    

}