@media (min-width: 1025px) {.dropdown-menu, .modal-content, .panel, .list-group-item {  background-color: rgba(250, 250, 250, 0.9); } }html, body {background: #264A66;background-attachment: inherit;}.nav-pills>li>a {color: #2f84c0 }body a {color: #1c4f73 } .nav-pills>li {background: rgba(235,243,249,0.9) } body .navbar-inverse .navbar-nav>li>a:hover, body .nav-pills .active a:hover, body .btn-info:hover, body a.list-group-item.active:hover {background-color: #13354d } body .smallertop {background-color: #266a9a } body .btn-info, body a.list-group-item.active, body .nav-pills .active a { background-color: #2F84C0 } body .panel, body .btn-info, body .btn-info:hover, body a.list-group-item.active, body .navbar-orange { border-color: #266a9a; } .dropdown-menu a { color: #333; } .panel-default>.panel-heading { background-color: #599dcd; } .blogTitle, a.list-group-item.active, body .navbar-orange .navbar-nav>li>a, .navbar-inverse .col-sm-12:not(.smallertop) .navbar-nav>li>a, .panel-default>.panel-heading, body .nav-pills .active a, .btn-info { color:#ffffff; } body a.navbar-brand .rezregular { color:#ffffff !important; } 
        
        /* ============================================================
   JUMALOLENTO V5.1 - TRUE BREATH ENGINE
   ============================================================
   Varsinaiset pinnat pysyvät lähes mustina.
   Hengitys tapahtuu pääasiassa:
   - glow intensity
   - reunan kirkkaus
   - tekstin hehku
   - erittäin pieni punainen pintasävy

   Ei enää hidasta ”stroboa”.
   ============================================================ */


/* ============================================================
   1. MASTER BREATH PROPERTIES
   ============================================================ */

@property --breath-power {
    syntax: ”<number>”;
    inherits: true;
    initial-value: .18;
}

@property --breath-edge {
    syntax: ”<color>”;
    inherits: true;
    initial-value: #520000;
}

@property --breath-text {
    syntax: ”<color>”;
    inherits: true;
    initial-value: #a00000;
}

@property --breath-title {
    syntax: ”<color>”;
    inherits: true;
    initial-value: #c00000;
}


/* ============================================================
   2. STATIC THEME COLORS

   Nämä EIVÄT enää vaihdu voimakkaasti hengityksessä.
   ============================================================ */

:root {

    --breath-time: 5.6s;

    /* varsinainen pinta pysyy mustana */
    --v5-page: #000000;
    --v5-surface: #030000;
    --v5-deep: #000000;

    /* master breath muuttaa näitä */
    --breath-power: .18;
    --breath-edge: #520000;
    --breath-text: #a00000;
    --breath-title: #c00000;

    --hover-speed: 110ms;
}


/* ============================================================
   3. LUONNOLLISEMPI HENGITYSRYTMI

   0 -> 46 % = sisäänhengitys
   46 -> 58 % = pieni huippu / viive
   58 -> 100 % = uloshengitys

   Tämä tuntuu selvästi luonnollisemmalta kuin 0/50/100.
   ============================================================ */

@-webkit-keyframes trueBreath {

    0% {
        --breath-power: .14;
        --breath-edge: #480000;
        --breath-text: #980000;
        --breath-title: #b50000;

        -webkit-animation-timing-function:
            cubic-bezier(.42, 0, .18, 1);
    }

    46% {
        --breath-power: 1;
        --breath-edge: #ff0000;
        --breath-text: #e80000;
        --breath-title: #ff0000;

        -webkit-animation-timing-function:
            cubic-bezier(.22, .05, .55, 1);
    }

    58% {
        --breath-power: .92;
        --breath-edge: #e60000;
        --breath-text: #df0000;
        --breath-title: #f50000;

        -webkit-animation-timing-function:
            cubic-bezier(.45, 0, .58, 1);
    }

    100% {
        --breath-power: .14;
        --breath-edge: #480000;
        --breath-text: #980000;
        --breath-title: #b50000;
    }
}


@keyframes trueBreath {

    0% {
        --breath-power: .14;
        --breath-edge: #480000;
        --breath-text: #980000;
        --breath-title: #b50000;

        animation-timing-function:
            cubic-bezier(.42, 0, .18, 1);
    }

    46% {
        --breath-power: 1;
        --breath-edge: #ff0000;
        --breath-text: #e80000;
        --breath-title: #ff0000;

        animation-timing-function:
            cubic-bezier(.22, .05, .55, 1);
    }

    58% {
        --breath-power: .92;
        --breath-edge: #e60000;
        --breath-text: #df0000;
        --breath-title: #f50000;

        animation-timing-function:
            cubic-bezier(.45, 0, .58, 1);
    }

    100% {
        --breath-power: .14;
        --breath-edge: #480000;
        --breath-text: #980000;
        --breath-title: #b50000;
    }
}


/* ============================================================
   4. BODY = AINOA MASTER CLOCK
   ============================================================ */

body,
body.body {

    --breath-power: .14;
    --breath-edge: #480000;
    --breath-text: #980000;
    --breath-title: #b50000;

    -webkit-animation:
        trueBreath
        var(--breath-time)
        linear
        infinite !important;

    animation:
        trueBreath
        var(--breath-time)
        linear
        infinite !important;


    background-color:
        var(--v5-page) !important;


    background-image:

        linear-gradient(
            rgba(0,0,0,.88),
            rgba(8,0,0,.94)
        ),

        url('https://i.imgur.com/6UiVVpo.jpg') !important;


    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    background-attachment:
        fixed !important;


    color:
        var(--breath-text) !important;


    min-height:
        100vh;

    overflow-x:
        hidden;
}


/* ============================================================
   5. KOKO SIVUN AURA

   Tässä varsinainen ”hengitys” näkyy.
   Tausta ei vaihda väriä edestakaisin.
   ============================================================ */

body.body::before {

    content: ””;

    position:
        fixed;

    inset:
        -8%;

    z-index:
        0;

    pointer-events:
        none;


    background:

        radial-gradient(
            ellipse at 50% 7%,
            rgba(255,0,0,.32),
            transparent 31%
        ),

        radial-gradient(
            ellipse at 50% 94%,
            rgba(255,0,0,.20),
            transparent 39%
        ),

        radial-gradient(
            ellipse at 0% 50%,
            rgba(255,0,0,.11),
            transparent 28%
        ),

        radial-gradient(
            ellipse at 100% 50%,
            rgba(255,0,0,.11),
            transparent 28%
        );


    /*
       .14 -> 1 -> .14
       GPU:lle kevyt opacity-muutos.
    */

    opacity:
        var(--breath-power);


    will-change:
        opacity;
}


/* ============================================================
   6. NORMAALIN TILAN VÄRIT

   Näitä käytetään muualla V5 CSS:ssä.
   ============================================================ */

body {

    --v5-edge:
        var(--breath-edge);

    --v5-text:
        var(--breath-text);

    --v5-title:
        var(--breath-title);
}


/* ============================================================
   7. HOVER: OIKEA MUSTA <-> PUNAINEN TEEMAKÄÄNTÖ

   Tämä on eri asia kuin hengitys.
   Siksi sitä EI yhdistetä trueBreath-keyframeen.
   ============================================================ */

body:has(
    :is(
        a,
        button,
        .btn,
        .dropdown-toggle,
        .list-group-item,
        .thumbnail,
        input[type=”submit”],
        input[type=”button”],
        [role=”button”]
    ):hover
) {

    --v5-page: #ff0000;

    --v5-surface: #e60000;

    --v5-deep: #ff0000;

    --v5-edge: #000000;

    --v5-text: #000000;

    --v5-title: #000000;
}


/* ============================================================
   8. HOVEROITU KOHDE TAKAISIN PUNAMUSTAKSI
   ============================================================ */

:is(
    a,
    button,
    .btn,
    .dropdown-toggle,
    .list-group-item,
    .thumbnail,
    input[type=”submit”],
    input[type=”button”],
    [role=”button”]
):hover {

    --v5-surface: #030000 !important;

    --v5-deep: #000000 !important;

    --v5-edge: #ff0000 !important;

    --v5-text: #ff1717 !important;

    --v5-title: #ff0000 !important;
}

/* ============================================================
   9. RANDOMIN BOOTSTRAP GRID

   EI taustaa
   EI borderia
   EI box-shadowta
   EI omaa animaatiota

   Tämä korjaa aiemmissa versioissa hajonneen navbarin.
   ============================================================ */

.container,
.row,

[class^=”col-xs-”],
[class*=” col-xs-”],

[class^=”col-sm-”],
[class*=” col-sm-”],

[class^=”col-md-”],
[class*=” col-md-”] {

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;

    outline:
        none !important;

    -webkit-animation:
        none !important;

    animation:
        none !important;
}


/* ============================================================
   10. PÄÄRAKENNE

   Randomin lähdekoodissa:
   #body.main
   #left
   #center
   #footer
   ============================================================ */

#body,
#body.main,
.main,
#left,
#center,
#footer {

    position:
        relative;

    z-index:
        1;


    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;
}


/* ============================================================
   11. PANEELIT

   Randomin oikeat selectorit:
   .panel
   .panel-default
   .box
   .modal-content
   .dropdown-menu
   .notifi
   ============================================================ */

.panel,
.panel-default,
.box,
.modal-content,
.dropdown-menu,
.notifi {

    position:
        relative;


    background-color:
        var(--v5-surface) !important;


    background-image:

        linear-gradient(
            135deg,
            rgba(255,255,255,.028),
            transparent 20%,
            color-mix(
                in srgb,
                var(--v5-edge) 3%,
                transparent
            ) 60%,
            transparent 80%,
            rgba(255,255,255,.012)
        ) !important;


    border:
        1px solid var(--v5-edge) !important;


    color:
        var(--v5-text) !important;


    box-shadow:

        inset 0 0 0 1px
        color-mix(
            in srgb,
            var(--v5-edge) 7%,
            transparent
        ),

        inset 0 0 18px
        color-mix(
            in srgb,
            var(--v5-edge) 4%,
            transparent
        ),

        0 2px 8px
        rgba(0,0,0,.56) !important;


    transition:

        background-color var(--hover-speed) ease,
        border-color var(--hover-speed) ease,
        color var(--hover-speed) ease;
}


/* ============================================================
   12. PANEELIEN HENGITTÄVÄ GLOW

   Ei animaatiota per paneeli.
   Opacity tulee master clockista.
   ============================================================ */

.panel::after,
.box::after,
.modal-content::after {

    content: ””;

    position:
        absolute;

    inset:
        -2px;

    z-index:
        4;

    pointer-events:
        none;


    border:
        1px solid var(--v5-edge);

    border-radius:
        inherit;


    box-shadow:

        0 0 8px
        color-mix(
            in srgb,
            var(--v5-edge) 72%,
            transparent
        ),

        0 0 20px
        color-mix(
            in srgb,
            var(--v5-edge) 38%,
            transparent
        ),

        0 0 38px
        color-mix(
            in srgb,
            var(--v5-edge) 15%,
            transparent
        ),

        inset 0 0 10px
        color-mix(
            in srgb,
            var(--v5-edge) 8%,
            transparent
        );


    opacity:
        var(--v5-glow);


    will-change:
        opacity;
}


/* ============================================================
   13. PANEL BODY

   Ei omaa animaatiota.
   ============================================================ */

.panel-body {

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;

    color:
        inherit !important;
}


/* ============================================================
   14. PANEL HEADINGS
   ============================================================ */

.panel-heading,
.panel-default > .panel-heading,
.header,
.ovari {

    background-color:
        var(--v5-deep) !important;


    background-image:

        linear-gradient(
            to bottom,
            rgba(255,255,255,.035),
            transparent 38%,
            color-mix(
                in srgb,
                var(--v5-edge) 4%,
                transparent
            )
        ) !important;


    border:
        none !important;

    border-bottom:
        1px solid var(--v5-edge) !important;


    color:
        var(--v5-title) !important;


    box-shadow:

        inset 0 -1px 0
        color-mix(
            in srgb,
            var(--v5-edge) 30%,
            transparent
        ) !important;
}


/* ============================================================
   15. OTSIKOT

   Väri hengittää master clockin kautta.
   Ei erillistä keyframea.
   ============================================================ */

.usertitle,
.blogTitle,

.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
.panel-heading h5 {

    color:
        var(--v5-title) !important;


    text-shadow:

        0 0 4px
        color-mix(
            in srgb,
            var(--v5-edge) 70%,
            transparent
        ),

        0 0 13px
        color-mix(
            in srgb,
            var(--v5-edge) 25%,
            transparent
        ) !important;
}


/* Randomin käyttäjänimi sisältää inline stylejä */

.usertitle span,
.usertitle span[style] {

    background:
        transparent !important;

    color:
        inherit !important;

    text-decoration:
        none !important;
}


/* ============================================================
   16. TEKSTIHENGITYS

   Ei enää body * animationia.

   Teksti vain käyttää master clockista saatavaa väriä.
   ============================================================ */

.panel-body,
.panel-body p,
.panel-body span,
.panel-body small,
.panel-body strong,
.panel-body b,
.panel-body i,
.panel-body em,
.panel-body li,
.panel-body dt,
.panel-body dd,
.panel-body td,
.panel-body th,
.friendinfo,
.friendinfo *,
.comment,
.infolist,
#footer {

    color:
        var(--v5-text) !important;
}


/* linkit */

.panel-body a,
.friendinfo a,
#footer a {

    color:
        var(--v5-text) !important;


    text-shadow:

        0 0 3px
        color-mix(
            in srgb,
            var(--v5-edge) 25%,
            transparent
        ) !important;
}


/* ============================================================
   17. NAVBAR

   Randomin lähdekoodissa:
   .navbar.navbar-inverse.navbar-orange.navbar-fixed-top
   ============================================================ */

.navbar,
.navbar-inverse,
.navbar-orange {

    position:
        relative;


    background-color:
        var(--v5-deep) !important;


    background-image:

        linear-gradient(
            to bottom,
            rgba(255,255,255,.028),
            transparent 44%,
            color-mix(
                in srgb,
                var(--v5-edge) 3%,
                transparent
            )
        ) !important;


    border:
        none !important;

    border-bottom:
        1px solid var(--v5-edge) !important;


    color:
        var(--v5-text) !important;


    box-shadow:

        0 2px 10px
        rgba(0,0,0,.65) !important;
}


/* navbarin yksi yhteinen hengittävä alareuna */

.navbar::after {

    content: ””;

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -2px;

    height:
        2px;

    z-index:
        5;

    pointer-events:
        none;


    background:
        var(--v5-edge);


    box-shadow:

        0 0 8px
        color-mix(
            in srgb,
            var(--v5-edge) 80%,
            transparent
        ),

        0 0 20px
        color-mix(
            in srgb,
            var(--v5-edge) 42%,
            transparent
        );


    opacity:
        var(--v5-glow);
}


/* ============================================================
   18. NAVBARIN RAKENNE

   NÄIHIN EI KOSKETA VISUAALISESTI.
   ============================================================ */

.navbar .container,
.navbar .row,
.navbar .col-sm-12,
.navbar-header,
.navbar-collapse,
.navbar-collapse2,
.collapse,
.collapse2,
.navbar-nav,
.navbar-nav > li {

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;

    outline:
        none !important;
}


/* ============================================================
   19. RANDOMIN TOINEN NAVBAR-RIVI
   .smallertop
   ============================================================ */

.smallertop {

    background-color:
        var(--v5-deep) !important;


    border:
        none !important;

    border-top:
        1px solid var(--v5-edge) !important;

    border-bottom:
        1px solid var(--v5-edge) !important;


    color:
        var(--v5-text) !important;
}


/* ============================================================
   20. NAVBAR LINKIT

   Ei omaa animaatiota.
   ============================================================ */

.navbar-nav > li > a,
.navbar-brand,
.navbar .dropdown-toggle {

    background:
        transparent !important;

    border:
        1px solid transparent !important;

    box-shadow:
        none !important;


    color:
        var(--v5-text) !important;


    text-shadow:

        0 0 3px
        color-mix(
            in srgb,
            var(--v5-edge) 22%,
            transparent
        ) !important;


    transition:

        background-color var(--hover-speed) ease,
        color var(--hover-speed) ease,
        border-color var(--hover-speed) ease,
        box-shadow var(--hover-speed) ease;
}


/* ============================================================
   21. PROFILEMENU / NAV PILLS
   ============================================================ */

.nav-pills > li,
.profilemenu > li {

    background:
        transparent !important;

    border:
        none !important;
}


.nav-pills > li > a,
.profilemenu > li > a {

    background-color:
        var(--v5-deep) !important;


    border:
        1px solid var(--v5-edge) !important;


    color:
        var(--v5-text) !important;


    box-shadow:
        none !important;


    transition:

        background-color var(--hover-speed) ease,
        border-color var(--hover-speed) ease,
        color var(--hover-speed) ease,
        box-shadow var(--hover-speed) ease;
}


/* aktiivinen tabi */

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,

.profilemenu > li.active > a,
.profilemenu > li.active > a:hover,
.profilemenu > li.active > a:focus {

    border-color:
        var(--v5-edge) !important;


    box-shadow:

        inset 0 -2px 0
        var(--v5-edge),

        0 0 10px
        color-mix(
            in srgb,
            var(--v5-edge) 45%,
            transparent
        ) !important;


    font-weight:
        700 !important;
}


/* ============================================================
   22. BUTTONS
   ============================================================ */

.btn,
.btn-default,
.btn-info,
.btn-primary,
.btn-success,
.btn-warning,
.btn-danger {

    background-color:
        var(--v5-deep) !important;


    background-image:

        linear-gradient(
            to bottom,
            rgba(255,255,255,.025),
            transparent
        ) !important;


    border:
        1px solid var(--v5-edge) !important;


    color:
        var(--v5-text) !important;


    box-shadow:

        inset 0 0 8px
        color-mix(
            in srgb,
            var(--v5-edge) 5%,
            transparent
        ) !important;
}


/* ============================================================
   23. LIST GROUP
   ============================================================ */

.list-group {

    background:
        transparent !important;
}


.list-group-item {

    background-color:
        var(--v5-deep) !important;


    border-color:
        var(--v5-edge) !important;


    color:
        var(--v5-text) !important;
}


/* ============================================================
   24. THUMBNAILS
   ============================================================ */

.thumbnail {

    background-color:
        var(--v5-surface) !important;


    border:
        1px solid var(--v5-edge) !important;


    color:
        var(--v5-text) !important;
}


/* ============================================================
   25. HOVEROITU KLIKATTAVA KOHDE

   Tätä käyttäjä katsoo hoverin aikana.
   ============================================================ */

:is(
    a,
    button,
    .btn,
    .list-group-item,
    .thumbnail,
    .dropdown-toggle,
    [role=”button”]
):hover {

    background-color:
        var(--v5-surface) !important;


    border-color:
        var(--v5-edge) !important;


    color:
        var(--v5-text) !important;


    box-shadow:

        inset 0 0 10px
        rgba(255,0,0,.09),

        0 0 9px
        rgba(255,0,0,.90),

        0 0 22px
        rgba(255,0,0,.48),

        0 0 42px
        rgba(255,0,0,.16) !important;


    text-shadow:

        0 0 5px
        rgba(255,0,0,.90),

        0 0 14px
        rgba(255,0,0,.26) !important;


    text-decoration:
        none !important;
}


:is(
    a,
    button,
    .btn,
    .list-group-item,
    .thumbnail,
    .dropdown-toggle,
    [role=”button”]
):hover * {

    color:
        inherit !important;
}


/* ============================================================
   26. INPUTIT

   Myös nämä seuraavat global swapia,
   mutta niitä ei animoida erillisinä.
   ============================================================ */

input,
textarea,
select,
.form-control {

    background-color:
        var(--v5-deep) !important;


    color:
        var(--v5-text) !important;


    border:
        1px solid var(--v5-edge) !important;


    box-shadow:

        inset 0 0 8px
        color-mix(
            in srgb,
            var(--v5-edge) 7%,
            transparent
        ) !important;


    text-shadow:
        none !important;


    -webkit-animation:
        none !important;

    animation:
        none !important;
}


input:focus,
textarea:focus,
select:focus,
.form-control:focus {

    outline:
        none !important;


    border-color:
        var(--v5-edge) !important;


    box-shadow:

        inset 0 0 10px
        color-mix(
            in srgb,
            var(--v5-edge) 10%,
            transparent
        ),

        0 0 12px
        color-mix(
            in srgb,
            var(--v5-edge) 45%,
            transparent
        ) !important;
}


input::placeholder,
textarea::placeholder {

    color:
        var(--v5-text) !important;

    opacity:
        .65 !important;
}


input[type=”checkbox”],
input[type=”radio”] {

    accent-color:
        #ff0000 !important;
}


/* ============================================================
   27. DROPDOWNS
   ============================================================ */

.dropdown-menu > li > a {

    background:
        transparent !important;

    color:
        var(--v5-text) !important;
}


.dropdown-menu > li > a:hover {

    background-color:
        var(--v5-surface) !important;

    color:
        var(--v5-text) !important;
}


/* ============================================================
   28. NOTIFICATIONS
   ============================================================ */

.notification {

    background:
        transparent !important;


    color:
        inherit !important;


    border-bottom:
        1px solid var(--v5-edge) !important;
}


/* ============================================================
   29. TABLES / INFOLIST
   ============================================================ */

table,
tbody,
thead,
tr,
td,
th,
dl,
dt,
dd {

    background:
        transparent !important;


    color:
        inherit !important;


    border-color:
        var(--v5-edge) !important;
}


/* ============================================================
   30. KUVAT YLEISESTI

   Ei jatkuvia filter-animaatioita.
   ============================================================ */

img {

    transition:

        filter 140ms ease,
        -webkit-filter 140ms ease,
        transform 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease !important;
}


.thumbnail img,
img.thumb,
img.img-rounded {

    border:
        2px ridge var(--v5-edge) !important;


    box-shadow:

        0 0 7px
        color-mix(
            in srgb,
            var(--v5-edge) 25%,
            transparent
        ) !important;
}


/* ============================================================
   31. PROFIILIKUVAN NORMAALITILA

   Tämä vastaa lähetettyä Randomin rakennetta:

   #left
     .panel
       .panel-body
         a
           img.thumb
   ============================================================ */

#left > .panel:first-of-type
.panel-body > a:first-of-type > img.thumb,

#left > .panel:first-of-type
.panel-body > a:first-of-type img,

#left img#currentimage,

img#currentimage {

    -webkit-filter:
        none !important;

    filter:
        none !important;


    transform:
        translateZ(0)
        scale(1) !important;


    transform-origin:
        center center !important;


    will-change:
        filter, transform;


    border:
        3px ridge #850000 !important;


    box-shadow:

        0 0 8px
        rgba(255,0,0,.30),

        0 0 20px
        rgba(255,0,0,.10) !important;
}


/* ============================================================
   32. PROFIILIKUVAN INVERT

   TÄMÄ ON NYT SIDOTTU RANDOMIN OIKEAAN DOM-RAKENTEESEEN.

   Toimii:
   - hiiri kuvan päällä
   - hiiri kuvan linkin päällä
   - .thumb
   - #currentimage
   ============================================================ */

#left > .panel:first-of-type
.panel-body > a:first-of-type > img.thumb:hover,

#left > .panel:first-of-type
.panel-body > a:first-of-type:hover > img.thumb,

#left > .panel:first-of-type
.panel-body > a:first-of-type:hover img,

#left img#currentimage:hover,

#left a:hover img#currentimage,

img#currentimage:hover,

a:hover img#currentimage {

    -webkit-filter:
        invert(100%) !important;

    filter:
        invert(100%) !important;


    transform:
        translateZ(0)
        scale(1.035) !important;


    border-color:
        #ff0000 !important;


    box-shadow:

        0 0 12px
        rgba(255,0,0,.95),

        0 0 27px
        rgba(255,0,0,.60),

        0 0 52px
        rgba(255,0,0,.23) !important;
}


/* ============================================================
   33. HARD FALLBACK PROFIILIKUVALLE

   Lähetetyssä HTML:ssä vasemman ensimmäisen paneelin
   ensimmäisen linkin kuva ON profiilikuva.

   Tämä osuu siihen riippumatta kuvan classista.
   ============================================================ */

body.body #body #left
.panel:first-of-type
.panel-body > a:first-of-type:hover > img,

body.body #body #left
.panel:first-of-type
.panel-body > a:first-of-type:hover img {

    -webkit-filter:
        invert(1) !important;

    filter:
        invert(1) !important;


    transform:
        translateZ(0)
        scale(1.035) !important;
}


/* ============================================================
   34. NAVBAR-KUVAT EIVÄT INVERTTOIDU

   Profiilikuvan fallback ei osu navbarin avatariin muutenkaan,
   mutta tämä tekee asian eksplisiittiseksi.
   ============================================================ */

.navbar img,
.navbar img:hover,
.navbar a:hover img,
.navbar-brand img,
.navbar-brand:hover img,
img.logosmall,
img.logosmall:hover {

    -webkit-filter:
        none !important;

    filter:
        none !important;

    transform:
        none !important;
}


/* ============================================================
   35. RANDOMIN GLYPHICONIT
   ============================================================ */

.glyphicon,
.glyphicon * {

    color:
        inherit !important;

    text-shadow:
        none !important;
}


/* ============================================================
   36. RANDOMIN WIDGET SYSTEM

   Lähdekoodissa:
   .bumper
   .nobumper
   .fbumper
   .scriptbumper

   Randomi käyttää näihin jQuery UI:n:
   draggable()
   resizable()
   rotatable()

   Emme koske niiden transformiin.
   ============================================================ */

.bumper,
.nobumper,
.fbumper,
.scriptbumper {

    -webkit-animation:
        none !important;

    animation:
        none !important;
}


.bumper img,
.nobumper img,
.fbumper img {

    width:
        100%;

    height:
        auto;
}


/* ============================================================
   37. CHART / VIDEO / CANVAS / SVG
   ============================================================ */

video,
canvas,
svg,
#chart,
#chart * {

    -webkit-animation:
        none !important;

    animation:
        none !important;

    text-shadow:
        none !important;
}


/* ============================================================
   38. SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {

    width:
        10px;

    height:
        10px;
}


::-webkit-scrollbar-track {

    background:
        var(--v5-deep);
}


::-webkit-scrollbar-thumb {

    background:
        var(--v5-edge);

    border:
        2px solid var(--v5-deep);

    border-radius:
        3px;
}


::-webkit-scrollbar-thumb:hover {

    background:
        #ff0000;
}


/* ============================================================
   39. FOCUS
   ============================================================ */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {

    outline:
        2px solid var(--v5-edge) !important;

    outline-offset:
        2px !important;


    box-shadow:

        0 0 9px
        color-mix(
            in srgb,
            var(--v5-edge) 80%,
            transparent
        ),

        0 0 22px
        color-mix(
            in srgb,
            var(--v5-edge) 30%,
            transparent
        ) !important;
}


/* ============================================================
   40. CURSOR
   ============================================================ */

a,
button,
.btn,
.dropdown-toggle,
.list-group-item,
.thumbnail,
input[type=”submit”],
input[type=”button”],
[role=”button”] {

    cursor:
        pointer !important;
}


/* ============================================================
   41. TEXT SELECTION
   ============================================================ */

::selection {

    background:
        #ff0000;

    color:
        #000000;
}


/* ============================================================
   42. MOBILE

   Säilyttää Randomin oman offcanvas-logiikan.
   ============================================================ */

@media (max-width: 767px) {

    .navbar-offcanvas {

        left:
            -250px;
    }
}


/* ============================================================
   43. VIIMEINEN PROFIILIKUVAN SUOJA

   TAHALLA KOKO CSS:N LOPUSSA.

   Mikään ylempi img/filter-sääntö ei voi enää tulla tämän
   jälkeen kumoamaan profiilikuvan invertiä.
   ============================================================ */

body.body #body #left
.panel:first-of-type
.panel-body > a:first-of-type:hover img {

    -webkit-filter:
        invert(100%) !important;

    filter:
        invert(100%) !important;
} @media (max-width: 767px) {
.navbar-offcanvas {
  left: -250px;}
}