* {
    font-family: 'PT Serif', serif;
	cursor: url('cursor/hand-point.cur'), auto;
}

@font-face {
	font-family : Regular;
	src: url(/_astro/regular-webfont.DXccI02O.woff2) format("woff2"), url(/_astro/regular-webfont.Bj1HO5KE.woff) format("woff");
	font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    background-image: url("../img/bg_dream4.png");
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    overflow-x: hidden;
	overflow-y: auto;
	
    display: flex;
    justify-content: center;

    flex-direction: column;
    align-items: center;
	
	padding-top: 5vh;
}

.profile {
    background-image: url("bg_chara2.png");
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 80vw;
    height: 87vh;
	
	
    border: 2px solid rgba(189,51,149, 1);
    border-radius: 0 35px 0 35px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
	
}

.water-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 20%; 
    background: url("../img/water-4.gif") bottom center / 100% auto repeat-x;
    z-index: 20;
    pointer-events: none;

    -webkit-mask-image: linear-gradient(to top, 
        rgba(0,0,0,0.5) 70%,
        transparent 90%,
        transparent 100%
    );
    mask-image: linear-gradient(to top, 
        rgba(0,0,0,0.3) 1%,
        transparent 100%,
        transparent 100%
    );
}

.water-overlay2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50%; 
    background: url("../img/water-4.gif") bottom center / 100% auto repeat-x;
    z-index: 9;
    pointer-events: none;

    -webkit-mask-image: linear-gradient(to top, 
        rgba(0,0,0,0.5) 70%,
        transparent 90%,
        transparent 100%
    );
    mask-image: linear-gradient(to top, 
        rgba(0,0,0,0.3) 1%,
        transparent 89%,
        transparent 100%
    );
}

#left_desc {
    position: absolute;
    left: 25%;
    top: 15%;
    color: white;
	z-index : 100;
	prose:text-[#f0f0ec] text-[#f0f0ec] text-lg;
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0 0 10px rgba(0, 0, 0, 0.8),
         0 0 20px rgba(0, 0, 0, 0.5);
}

#left_desc .title {
	font-family : Regular;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(162, 145, 134, 1);
}

#left_desc p {
	font-family : Regular;
	font-size : 1.5em;
    margin: 12px 0;
    line-height: 1.4;
}

/* Méga galère à expliquer mais ça sert à ce que le sprite ainsi que le cadre derrière ne bougent pas lors du changement de langue */
.sprite-wrapper {
    flex: 0 0 auto;
    justify-content: center;
    height: 100%;
    z-index: 10;
	left: 50%; top: 50%; transform: translate(23vw, -50%);
    position: absolute;
    text-align: center;
	align-items: center;
	pointer-events: none;
}

.sprite-wrapper::before {
    content: '';
    position: absolute;
    left: 47%;
    transform: translateX(-50%);
    width: 80%;
    height: 90%;
    border: 5px solid rgba(128, 128, 128, 0.4);
    z-index: -1;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    animation: cadreMovement 10s infinite alternate ease-in-out;
}

.sprite-wrapper img {
    width: auto;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 10;
}

#fr-content, #en-content {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: center;
}

#sprite {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    height: 100%;
    z-index: 10;
	text-align:center;
    position: relative;
}

#sprite::before {
    content: '';
    position: absolute;
    left: 47%;
    transform: translateX(-50%);
    width: 80%;
    height: 90%;
    border: 5px solid rgba(128, 128, 128, 0.4);
    z-index: -1;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
	animation: cadreMovement 10s infinite alternate ease-in-out;
}

#sprite img {
    width: auto;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 10;
}

#description {
    position: absolute;
    right: 6%;
    top: 70%;
    transform: translateY(-50%);
    color: white;
    text-align: left;
    z-index : 100;

    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0 0 10px rgba(0, 0, 0, 0.8),
         0 0 20px rgba(0, 0, 0, 0.5);
}

#name {
	font-family : Regular;
	font-size : 3em;
    font-weight: 700;
    color: rgba(231, 226, 220, 1);
    margin-bottom: 10px;
}

#desc {
	font-size : 140%;
    line-height: 1.6;
    max-width: 600px;
}

#desc p {
	prose:text-[#f0f0ec] text-[#f0f0ec] text-lg
    margin: 0;
}

#bulle {
	color: rgba(119, 119, 119, 0.8);
	position:absolute;
	text-align: center;
	font-style: oblique;
	z-index : 100;
	font-size : 1.2em;
    line-height: 1.6;
	prose:text-[#f0f0ec] text-[#f0f0ec] text-lg;
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0 0 10px rgba(0, 0, 0, 0.8),
         0 0 20px rgba(0, 0, 0, 0.5);
}

#bulle p {
	prose:text-[#f0f0ec] text-[#f0f0ec] text-lg
    margin: 0;
	
}

#arrow {
    position: absolute;
    top: 2%;
    left: 1%;
    width: 4%;
    height: auto;
    z-index: 10;
    cursor: pointer;
}

@keyframes lightMovement {
    0% { transform: translate(100px, -30px); opacity : 0.8;}
    100% { transform: translate(-50px, 100px); opacity : 0.4;}
}

@keyframes cadreMovement {
    0% { 
        transform: translateX(-50%) translate(0px, 0px);
    }
    100% { 
        transform: translateX(-50%) translate(-50px, 50px);
    }
}

.interview {
    width: 100%;
    height: 80%;
    bottom: -80%;
    position: absolute;
    overflow: hidden;
}

.interview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 0;
    left: 0;
	margin-bottom : 500px; 
}

.interview1 {
    color: rgb(68, 68, 68);
    font-size: 1.2em;
    font-family: 'PT Serif', serif;
    line-height: 2;
    text-align: left;
    padding: 15px 25px;
    max-width: 500px;
    margin: 0;
}

.interview2 {
    position: absolute;
    top: 15%;
    left: 47%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    font-size: 1.2em;
	color : rgb(68,68,68,1);
    text-align: left;
    padding: 20px;
    width: 80%;
    max-width: 300px;
    font-family: 'PT Serif', serif;
    line-height: 1.6;
}

.view {
    color: white;
	color : rgb(68,68,68,1);
}

.interviewName {
	font-weight: bold; color: #cc0000;
}