* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Staatliches', cursive;
    color: #FFF;
    background: #7cd8d0;
    padding: 2rem 0;
}
text{
    font-family: 'Staatliches', cursive;
    font-size:25px;
    pointer-events:none;
}
h1 { font-size: clamp(2.5rem, 10vw, 5rem); line-height: 1.1em; font-family: 'Staatliches', cursive; text-shadow: clamp(-5px, 10vw, -10px)  clamp(5px, 10vw, 10px) 0 rgba(0,0,0,0.2);  }
h2 { font-size: clamp(1rem, 10vw, 3rem); font-family: 'Staatliches', cursive;}
a { color: #FFF; }
.center { background: #1e988e; text-align: center; padding: clamp(4rem, 10vw, 10rem) 2rem; max-width: 1200px; width: 100%; margin: 0 auto; border-radius: 2%; box-shadow: -20px 20px 0 rgba(0,0,0,0.2); }
.center_chart { max-width: 600px; width: 100%; margin: 0 auto; position: relative; padding: 2rem 0; }
.center_chart svg text { font-family: 'Staatliches', cursive; }
.center_message { position: absolute; width: 100%; max-width: 600px; padding: 1rem; background: #FFF; border-radius: 30px; transition: transform 0.5s, opacity 0.5s; transform: translateX(-50%) translateY(100%); left: 50%; top: 100%; opacity: 0; box-shadow: 0 20px 0 rgba(0,0,0,0.2);  }
.center_message.active { left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); opacity: 1;  }
.center_message h3 { color: #000;  font-size: clamp(1rem, 10vw, 3rem); }
//.chart_selecter { transform: translateX( 50px); }
.img_label { color: #FFF; }
.chart_faces_face { display: none; }
.chart_faces_face.active { display: block; transition: transform 1.5s; }
.chart_faces_face.complete { transform:  translateX(0)  translateY(0) scale(2); filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)); }
.chart_faces { position: absolute; left: 50%; top: 50%; transform: translateX(-50%)  translateY(-50%); margin-top: -15px; }
.shared { background: #FFF; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 30px; margin-bottom: 1rem; position: relative; }
.shared p { align-items: center; justify-content: center; display: flex; }
.shared * { color: #000; }
.shared span { font-size: 2rem; display: block; margin-right: 0.5rem; }
.shared a { text-decoration: none; display: block; }


@media all and (max-width: 600px) { 
    .center { padding: 2rem 0.5rem;  margin: 0; border-radius: 0; box-shadow: none; } 
    body { padding: 0; margin: 0;  background: #1e988e; }
    .center_message.active { top: auto; bottom: 15%; transform:  translateX(-50%) translateY(0); width: 80%; }
    h1 { text-shadow: -3px 5px 0 rgba(0,0,0,0.2);  }
    .chart_faces_face.complete { transform:  translateX(0)  translateY(0) scale(1.5); filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)); }
    .shared { position: absolute; left: 0; bottom: 0; display: block; margin-bottom: 0; border-radius: 0 20px 0 0; }
    .shared p span{ font-size: 1rem; }
    .shared svg { height: 20px; width: auto; }
}


#result h1{
    font-size: 50px;
    font-weight: bold;
    position: absolute;
    padding: 0;
    margin: 0;
    top:50%;
    -webkit-transform:translate(0,-50%);
            transform:translate(0,-50%);
}