@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800&display=swap');

body{
    margin:0;
    padding:0;
    text-align:center;
    font-family:"M PLUS Rounded 1c",sans-serif;

    background:#fff5fb;

    background-image:
    radial-gradient(#ffd4e8 2px,transparent 2px),
    radial-gradient(#bfefff 2px,transparent 2px);

    background-size:40px 40px;
    background-position:0 0,20px 20px;
}

h1{

    color:#ff5ea8;

    font-size:55px;

    margin-top:40px;

    letter-spacing:4px;

    text-shadow:
    3px 3px #bdeeff,
    0 0 15px white;

    animation:fuwafuwa 3s ease-in-out infinite;
}

h1::before{
    content:"🎀";
    margin-right:12px;
}

h1::after{
    content:"🎀";
    margin-left:12px;
}

p{

    color:#ff82ba;

    font-size:20px;

    font-weight:bold;
}

.profile-box{

    position:relative;

    width:900px;

    margin:40px auto;

    padding:40px;

    background:rgba(255,255,255,.96);

    border:6px solid #ffb4d8;

    border-radius:35px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:45px;

    box-shadow:
    0 0 25px #ffd9eb,
    0 0 45px #bfefff;

    transition:.3s;
}

.profile-box:hover{

    transform:scale(1.02);

}

.profile-box::before{

    content:"🎀";

    position:absolute;

    top:-20px;

    left:-20px;

    font-size:48px;
}

.profile-box::after{

    content:"🩷";

    position:absolute;

    bottom:-18px;

    right:-18px;

    font-size:38px;
}

.profile-image{

    width:240px;

    height:240px;

    object-fit:cover;

    border-radius:50%;

    border:8px solid #ffb6da;

    box-shadow:
    0 0 15px #ffd5e8,
    0 0 30px #bdeeff;

    animation:float 4s ease-in-out infinite;
}

table{

    width:520px;

    border-collapse:separate;

    border-spacing:0;

    overflow:hidden;

    border-radius:25px;

    border:4px solid #9adfff;

    background:white;

    transition:.3s;
}

table:hover{

    transform:scale(1.02);

}

th{

    width:180px;

    background:#ff98c8;

    color:white;

    font-size:20px;

    padding:18px;

    border-bottom:2px solid #ffd9eb;
}

td{

    background:#fff8fc;

    color:#666;

    font-size:19px;

    padding:18px;

    text-align:left;

    padding-left:25px;
}

tr:nth-child(even) td{

    background:#eefaff;

}

tr:hover th{

    background:#86d9ff;

}

tr:hover td{

    background:#ffe3f1;

}

@keyframes fuwafuwa{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0px);
}

}

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0px);
}

}