@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: "Josefin Sans", sans-serif;
}

:root {
    --rumi-palette-1: #CBD2BD;
    --rumi-palette-2: #F7F7F7;
    --rumi-palette-3: #AB8E53;
    --rumi-palette-4: #EDD4A5;
    --rumi-palette-5: #F37A72;
    --rumi-palette-6: #D0B6F2;
    --rumi-palette-7: #855685;
    --rumi-palette-8: #E4EBDA;
    --rumi-palette-9: #E67575;
    --rumi-palette-10: #AB3E3E;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(359deg)
    }
}

@keyframes heartbeat {
    0%, 42%, 46%, 50%, 92%, 96%, 100% {
        transform: scale(1)
    }
    44%, 48%, 94%, 98% {
        transform: scale(1.2)
    }
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.container {
    width: 90vh;
    height: 90vh;
    min-width: 500px;
    min-height: 500px;
}

@media screen and (orientation:portrait) {
    .container {
        width: 90vw;
        height: 90vw;
        min-width: 500px;
        min-height: 500px;
    }

    body {
        overflow-y: auto;
    }
}

.heartbeat {
    display: none;
    opacity: 0;
    width: 100px;
    height: 100px;
    background: url('/assets/img/RumiRuthea/heart.png') center no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 99;
    animation: heartbeat 2s ease infinite;
}

header.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    background: var(--rumi-palette-8);
}

header.header .tagline {
    display: flex;
    align-items: center;
    justify-content: start;
    position: absolute;
    left: -10px;
    background: var(--rumi-palette-6);
    padding: 10px 100px 10px 20px;
    flex: 1;
    transform: skewX(25deg);
}

header.header .tagline .tagline-text {
    color: var(--rumi-palette-10);
    transform: skewX(-25deg);
    font-style: italic;
}

header.header .sub-tagline {
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 22px;
    color: var(--rumi-palette-9);
    padding-right: 10px;
    flex: 1
}

main.main {
    background: var(--rumi-palette-6);
    margin-top: 4px;
}

main.main .main-header {
    display: flex;
    justify-content: space-around;
    padding: 5px 0;
}

main.main article.vtuber-card {
    display: flex;
    flex-direction: row;
    background: var(--rumi-palette-8);
    margin: 0 20px;
    padding: 20px;
}

main.main article.vtuber-card .col {
    flex: 1;
    width: fit-content;
}

main.main article.vtuber-card .col .vtuber-photo {
    display: flex;
    width: 100%;
}

main.main article.vtuber-card .col .vtuber-photo img.vtuber-photo-img {
    width: 250px;
    height: 250px;
    margin: auto;
}

main.main article.vtuber-card .col .vtuber-photo.is-dynamic-eye {
    display: block;
    width: 250px;
    height: 250px;
    margin: auto;
}

main.main article.vtuber-card .col .vtuber-photo.is-dynamic-eye .vtuber-eyes {
    width: 100%;
    height: 100%;
    background: url('/assets/img/RumiRuthea/dynamic-vtuber-photo/eyes.png') center no-repeat;
    background-size: contain;
    position: relative;
}

main.main article.vtuber-card .col .vtuber-photo.is-dynamic-eye .vtuber-pupils {
    width: 100%;
    height: 100%;
    background: url('/assets/img/RumiRuthea/dynamic-vtuber-photo/pupils.png') center no-repeat;
    background-size: contain;
    position: relative;
    top: -253px;
    left: -3px;
    transform: translateX(3px) translateY(3px);
    transition: .1s linear;
}

main.main article.vtuber-card .col .vtuber-photo.is-dynamic-eye .vtuber-main {
    width: 100%;
    height: 100%;
    background: url('/assets/img/RumiRuthea/dynamic-vtuber-photo/eyes_open.png') center no-repeat;
    background-size: contain;
    position: relative;
    top: -500px;
}

main.main article.vtuber-card .col .vtuber-photo.is-dynamic-eye .vtuber-main.is-blinking {
    background: url('/assets/img/RumiRuthea/dynamic-vtuber-photo/blink.png') center no-repeat;
    background-size: contain;
}

main.main article.vtuber-card .col .vtuber-name {
    text-align: center;
    font-size: 30px;
    margin: 20px auto;
    color: var(--rumi-palette-7)
}

main.main article.vtuber-card .col .vtuber-description {
    margin: 20px auto;
}

main.main article.vtuber-card .col .vtuber-detail {
    width: 100%;
}

main.main article.vtuber-card .col .vtuber-detail tr {
    height: 22px;
}

main.main article.vtuber-card .col .vtuber-detail tr td {
    font-size: 14px;
}

main.main article.vtuber-card .col .vtuber-detail tr td:nth-child(1) {
    width: 110px;
}

main.main article.vtuber-card .col .vtuber-detail tr td:nth-child(2) {
    width: 2px;
}

main.main article.vtuber-card .col .vtuber-likes,
main.main article.vtuber-card .col .vtuber-dislikes {
    border: 2px solid var(--rumi-palette-7);
    margin-bottom: 20px;
}

main.main article.vtuber-card .col .vtuber-likes .vtuber-likes-text,
main.main article.vtuber-card .col .vtuber-dislikes .vtuber-dislikes-text {
    background: var(--rumi-palette-6);
    padding: 5px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
}

main.main article.vtuber-card .col .vtuber-likes ul li,
main.main article.vtuber-card .col .vtuber-dislikes ul li {
    list-style-type: none;
    list-style-position: inside;
    margin-left: 30px;
    line-height: 20px;
}

main.main article.vtuber-card .col .vtuber-likes ul li::before,
main.main article.vtuber-card .col .vtuber-dislikes ul li::before {
    content: '';
    display: flex;
    background: url(/assets/img/RumiRuthea/ornaments/icons.svg);
    background-size: contain;
    position: relative;
    top: 15px;
    left: -20px;
    margin-top: -10px;
    color: #000;
    fill: #000;
    width: 10px;
    height: 10px;
    animation: rotate 2s linear infinite;
}

main.main article.vtuber-card .col .vtuber-messages {
    color: red;
}

main.main article.vtuber-card .col .vtuber-messages a {
    color: red;
}

main.main .main-footer {
    display: flex;
    width: 100%;
}

main.main .main-footer .socials {
    display: flex;
    justify-content: space-around;
    width: 50%;
    margin: auto;
    padding: 10px;
}

main.main .main-footer .socials .icons {
    transform: scale(1);
    opacity: .5;
    cursor: pointer;
    transition: .3s ease;
}

main.main .main-footer .socials .icons:hover {
    transform: scale(1.2) rotate(10deg);
    opacity: 1;
    transition: .3s ease;
}

main.main .main-footer .socials .icons svg {
    width: 20px;
    height: 20px;
}