/* =====================================================
Dette er stylesheet for Bulby. 

Overskrifter skal indholde: Fil Navn + Kode:xxx
===================================================== */

/* =====================================================
   bulby sider på logo          ( index.php )   start
===================================================== */
/* Styrer størrelsen på det nye overskrifts-logo midt på siden */
.index__title img {
    display: block;
    margin: 0 auto;       /* Centrerer logoet perfekt på siden */
    width: 420px;          /* Gør det responsivt */
    max-width:  90%;     /* Den perfekte bredde, så det står skarpt og tydeligt */
    height: auto;
}
/* ==============================================================
   bulby sider på emne kort-  emne/Grundlæggende-Viden.php Start
Kode: WVF9
================================================================= */
/* Gør det første kort klar til at have en maskot svævende over sig */
.note-card--bulby-WVF9 {
    position: relative !important;
}

/* Placerer Bulby præcist på overkanten i højre side af kortet */
.bulby-card-mascot-WVF9 {
    position: absolute;
    top: -77px;          /* Trækker ham op, så hans ben hænger over kanten */
    left: 10px;         /* Placerer ham i højre hjørne af kortet (du kan ændre til left: 20px hvis han skal sidde til venstre) */
    width: 80px;         /* Den perfekte størrelse, så han er synlig uden at dominere */
    height: auto;
    z-index: 5;         /* Sikrer at han ligger forrest og ikke gemmer sig bag kortet */
    pointer-events: none; /* Gør at man stadig kan klikke på kortet, selvom man rammer Bulby */
}

/* ==============================================================
   bulby sider på emne kort-  emne/Kredsløb-forbindelser.php Start
Kode: YQV9
================================================================= */
/* Gør det første kort klar til at have en maskot svævende over sig */
.note-card--bulby-YQV9 {
    position: relative !important;
}

/* Placerer Bulby præcist på overkanten i højre side af kortet */
.bulby-card-mascot-YQV9 {
    position: absolute;
    top: -75px;          /* Trækker ham op, så hans ben hænger over kanten */
    left: 10px;         /* Placerer ham i højre hjørne af kortet (du kan ændre til left: 20px hvis han skal sidde til venstre) */
    width: 80px;         /* Den perfekte størrelse, så han er synlig uden at dominere */
    height: auto;
    z-index: 5;         /* Sikrer at han ligger forrest og ikke gemmer sig bag kortet */
    pointer-events: none; /* Gør at man stadig kan klikke på kortet, selvom man rammer Bulby */
}

/*--------------------------*/

#bulby-footer {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
}

#bulby {
    width: 130px;
    cursor: pointer;
    animation: float 3s ease-in-out infinite;
}

#bulby-bubble {
    position: absolute;
    right: 140px;
    bottom: 60px;

    background: #1E293B;
    color: #E9FFF8;

    border: 2px solid #28C59D;
    border-radius: 16px;

    padding: 12px 16px;

    width: 240px;

    font-size: 14px;
    line-height: 1.4;

    box-shadow: 0 10px 20px rgba(0,0,0,.3);
}

@keyframes float {
    0%,100%{
        transform:translateY(0);
    }

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