@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans:wght@100;200;300;400;500;600;700;800&display=swap');

/* SETTING COLOR PALETTE TO BE USED */

:root {
    --white-color: hsl(0, 0%, 100%);
    --black-color: hsl(0, 0%, 0%);

    --gray-color: hsl(0, 0%, 80%);
    --gray-dark-color: hsl(0, 0%, 50%);

    --lilac-color: hsl(275, 40%, 65%); /* rgb(172, 130, 201) */
    --lilac-dark-color: hsl(275, 40%, 45%); /* rgb(122, 69, 161) */

    --plum-color: hsl(275, 30%, 40%); /* rgb(107, 71, 133) */
    --plum-dark-color: hsl(275, 30%, 25%); /* rgb(71, 47, 89) */

    --lavender-color: hsl(275, 40%, 90%); /* rgb(238, 219, 250) */
    --lavender-light-color: hsl(275, 40%, 96%); /* rgb(248, 238, 253) */
    --lavender-dark-color: hsl(275, 40%, 86%); /* rgb(238, 219, 250) */
}

*,
body {
    scroll-behavior: smooth;
    font-family: 'Playpen Sans', cursive;
}

/* SETTING STYLE TO SCROLL BAR */

::-webkit-scrollbar {
    width: .60rem;
    background-color: var(--lilac-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--plum-color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--plum-dark-color);
}

/* CUSTOM TITLE */

[data-title] {
    position: relative;
}

[data-title]:hover::before {
    content: attr(data-title);
    position: absolute;
    bottom: -26px;
    display: inline-block;
    padding: 3px 6px;
    border-radius: 2px;
    background: none;
    color: var(--lilac-dark-color);
    font-weight: bold;
    font-size: 14px;
    font-family: sans-serif;
    white-space: nowrap;
}

[data-title]:hover::after {
    position: absolute;
    bottom: -10px;
    left: 8px;
    display: inline-block;
    color: #fff;
    border: 8px solid transparent;
}

/* OTHER SETTINGS */

.main {
    transition: transform .15s ease-in;
}

.main:hover {
    transform: scale(1.05);
}


.main-box {
    transition: transform .15s ease-in;
}

.main-box:hover {
    transform: scale(1.025);
}

.img-main {
    width: 250px;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 500px;
    margin: auto;
}

.img-nami {
    background-image: url('../images/nami.jpeg');
}

.name-nana {
    display: flex;
    justify-content: space-between;
}