:root {
    --text-color-default: #bcc;
    --text-color-highlight: #dee;
    --text-color-skills-highlight: #ffe7cd;
    --text-color-skills-default: #ebd9be;
    --text-color-footer: #456;

    --text-font-default: 'berenika', sans-serif;

    --text-font-size-default: 11pt;

    --text-shadow: 0 0 2px black;
    --text-shadow-hover: 0 0 4px black;
    --box-shadow: 0 0 15px 5px rgba(0,0,0,0.5);

    --bg-clickable: url(images/layout/backgrounds/background_clickable.png) top left repeat;
    --bg-clickable: url(images/layout/backgrounds/background_clickable.png) top left repeat;
}



html {
    color: var(--text-color-default);
    text-shadow: var(--text-shadow);

    background: #000 radial-gradient(ellipse at 40% 30%, #134 0%, #134 20%, #012 50%, black 100%) no-repeat;

    width: 100%;
    min-height: 100vh;

    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-color: #566 #344;
    scrollbar-width: thin;

    font-family: var(--text-font-default);
    font-size: var(--text-font-size-default);
}

/** webkit scrollbar styling **/
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #344;
}
::-webkit-scrollbar-thumb {
    background: #566;
}


table {
    color: var(--text-font-default);
    text-shadow: none;
}


form {
    text-shadow: none;
}


input {
    background-color: #455;
    color: var(--text-color-default);
    font-size: var(--text-font-size-default);
}


/* Button */
.irdInNavButton, .irdInLoginBtn,
.irdButton, .irdButton-disabled, .irdButton-static
{
    background: var(--bg-clickable);
    cursor:pointer;

    padding: 8px 10px 10px 10px;
    box-sizing: border-box;

    color: var(--text-color-default);
    text-shadow: var(--text-shadow);
    font-size: 11pt;

    text-align: center;

    font-family: 'berenika', sans-serif;
    text-shadow:1px 1px black;

    border-top: 1px solid #455;
    border-left: 1px solid #344;
    border-right: 1px solid #233;
    border-bottom: 1px solid #122;

    box-shadow: 0 1px 4px black;

    user-select:none;
}

/*
.irdInLoginBtn > *, .irdInNavButton > *,
.irdButton > * {
    opacity: 0.8;
    transition: opacity 0.2s;
}
*/

.irdButton, .irdButton-disabled, .irdButton-static
{
    border-radius: 6px 9px 6px 12px;
    margin: 8px;
    min-width: 120px;
    font-weight: bold;
}

.irdButton::first-letter, .irdButton-disabled::first-letter, .irdButton-static::first-letter {
    font-family: "vinque", serif;
    font-weight: normal;
    padding-right: 0.05rem;
    font-size: 1.2rem;
}


/* Button:hover */
.irdInNavButton:hover, .irdInLoginBtn:hover,
.irdButton:hover, .irdButton-static:hover
{
    text-shadow: var(--text-shadow-hover);

    /*
    border-top: 2px solid #566;
    border-left: 2px solid #455;
    border-right: 2px solid #344;
    border-bottom: 2px solid #233;
    */

    border-top: 1px solid #566;
    border-left: 1px solid #455;
    border-right: 1px solid #344;
    border-bottom: 1px solid #233;

    filter: brightness(110%);
    transition: filter 0.25s ease-in-out;
}

/*
.irdInNavButton:hover > *, .irdInLoginBtn:hover > *,
.irdButton:hover > *
{
    opacity: 1.0;
    transition: opacity 0.2s;
}
*/

.irdButton-disabled
{
    cursor: not-allowed;
    color:#788;
}


/* sliders */
.ui-slider {
    background: #233 !important;
    border-color: #455 !important;
}

.ui-slider-handle {
    background: #abd !important;
}


.xdebug-error
{
    color: black;
}