/* ==========================================================
   YouTube Widget
   Dieterle Programmierung
   ========================================================== */

.ytstats{

    display:flex;
    justify-content:flex-start;
    align-items:stretch;
    flex-wrap:wrap;

    gap:14px;

    margin:20px 0;

    font-family:"Segoe UI",Tahoma,Arial,sans-serif;

}

.card{

    width:96px;

    padding:14px 8px;

    text-align:center;

    border-radius:12px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.04)
    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(6px);

    box-shadow:
        0 4px 12px rgba(0,0,0,.30);

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease,
        background .20s ease;

}

.card:hover{

    transform:translateY(-4px) scale(1.04);

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.07)
    );

    border-color:#ff5050;

    box-shadow:
        0 10px 25px rgba(0,0,0,.40),
        0 0 12px rgba(255,80,80,.25);

}

.icon{

    font-size:22px;

    margin-bottom:6px;

    line-height:1;

}

.number{

    font-size:24px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:4px;

}

.label{

    font-size:12px;

    color:#d7d7d7;

    letter-spacing:.4px;

    text-transform:uppercase;

}


/* ===================================
   Farben
   =================================== */

.views .icon,
.views .number{

    color:#59b0ff;

}

.likes .icon,
.likes .number{

    color:#ff6666;

}

.comments .icon,
.comments .number{

    color:#4fd986;

}


/* ===================================
   Mobile
   =================================== */

@media(max-width:650px){

    .ytstats{

        justify-content:center;

    }

    .card{

        width:90px;

        padding:12px 6px;

    }

    .number{

        font-size:21px;

    }

}

.ytUpdated{

    margin-top:10px;

    font-size:12px;

    color:#b8b8b8;

    font-style:italic;

}