*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#fff8fc url("background.jpg");
font-family:Verdana;
overflow-y:auto;
}

/* SITE */

.container{
width:1100px;
margin:0px auto;
background:#fff8fc;

}

/* HEADER */

.header img{
display:block;
width:100%;
height:250px;
object-fit:cover;
border:2px solid #f4d2e3;
}

.header{
position:relative;
}

.site-title{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:60px;
font-family:"Georgia", serif;
font-style:italic;
color:#ff6fb5;
text-shadow:
2px 2px 0 white,
4px 4px 8px rgba(255,255,255,0.8);
letter-spacing:3px;
pointer-events:none;
}


/* BARRE GIF HAUT */

.top-gifs{
display:flex;
}

.top-gifs img{
width:20%;
height:45px;
object-fit:cover;
display:block;
border:2px solid #f4d2e3;
}

/* STRUCTURE */

.main-grid{
display:grid;
grid-template-columns:220px 620px 220px;
gap:10px;
padding:10px;
border:2px solid #f4d2e3;
background:#FEE7F8
align-items:start;
}

/* COLONNES */

.left-column,
.right-column{
display:flex;
flex-direction:column;
gap:0px;
border:2px solid #f4d2e3;
}


.center-column{
display:flex;
flex-direction:column;
gap:0px;
}

/* IMAGES GAUCHE / DROITE */



/* IMAGES MILIEU */

.center-column > img{
width:100%;
height:300px;
object-fit:cover;
display:block;
}

/* GIF STRIPS */

.gif-strip{
display:flex;
height:45px;
border:2px solid #f4d2e3;
overflow:hidden;
}

.gif-strip img{
width:20%;
height:100%;
object-fit:cover;
border:2px solid #f4d2e3;
}

/* SPOTIFY */

.playlist-box{
width:220px;
height:350px;
overflow:hidden;
border:4px solid #f4d2e3;
background:white;
}

/* CALENDRIER */

.calendar-box{
width:220px;
min-height:180px;
padding:10px;
background:white;
overflow:hidden;
}

/* FOOTER */

.footer{
display:flex;
}

.footer img{
width:16.66%;
height:45px;
object-fit:cover;
border:4px solid #f4d2e3;
display:block;
}

/* SCROLLBAR ROSE */

::-webkit-scrollbar{
width:12px;
}

::-webkit-scrollbar-track{
background:#ffe6f3;
}

::-webkit-scrollbar-thumb{
background:#ff9ccc;
border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
background:#ff7db7;
}

.left-column,
.right-column{
display:flex;
flex-direction:column;
border:4px solid #f4d2e3;
gap:1px;
}

.left-column img,
.right-column img{
width:100%;
height:160px;
object-fit:cover;
display:block;
border:4px solid #f4d2e3;
border:none
}



.center-column > img{
width:100%;
height:280px;
object-fit:cover;
display:block;
border:none
}

.spotify-box{
width:100%;
height:350px;
overflow:hidden;
}

.calendar-box{
width:100%;
padding:10px;
background:#fff0f8;
gap:10px;
overflow:hidden;
}

.bottom-fill{
width:100%;
height:220px;
object-fit:cover;
border:4px solid #f4d2e3;
display:block;
}

.container{
background:#ffe8f4;
}

.left-bottom{
height:125px !important;
}

.right-bottom{
height:70px !important;
}