:root {
    /* COLORS */
    --blue: #13AFE0;
    --pink: #EC2178;
    --blue-shade: #162D6D;
    --pink-shade: #8F1B4D;
    --white: #FFF;
    --gray: #909090;
    --dark-gray: #3d3d3d;
    --black: #000;
    --cont-clr-dflt: #071A21;
    --cont-clr-prim: #0E2436;
    --cont-clr-sec: #060616;
    --cont-clr-sec-shade: #383845; /* 0.2 opacity of white on --cont-clr-sec*/

    /* BORDER */
    --border-width-sm: 0.1em;
    --border-width-dflt: 0.4em;
    --border-radius-sm: 0.1em;
    --border-radius-dflt: 0.4em;
    --border-radius-lg: 1em;

    /* TRANSITION */
    --trans-time-short: 0.12s;
    --trans-time-long: 1s;
}


/* ===== YOOTHEME ===== */

@media screen and (max-width: 540px) {
    .uk-h1 {
        font-size: 1em !important;
    }

    .uk-heading-small {
        font-size: 1.5em !important;
    }
}

.uk-overlay-default, .uk-overlay-primary {
    border-radius: var(--border-radius-dflt);
}

@media screen and (max-width: 540px) {
    .uk-overlay-default div h3, .uk-overlay-primary div h3 {
        font-size: 1em !important;
    }
}

@media screen and (max-width: 540px) {
    .uk-subnav li a {
        font-size: 14px !important;
    }
}

.uk-button {
    transition: var(--trans-time-short);
}

.uk-slideshow-items {
    border: var(--border-width-dflt) solid var(--cont-clr-dflt);
    border-radius: var(--border-radius-lg);
}

.uk-slideshow img, .uk-tile {
    border-radius: var(--border-radius-dflt)
}



/* ===== ALERT ===== */

.alert-text {
    padding-left: 1.5em;
}



/* ===== ANCHOR LINK ===== */

.uk-heading-line:hover .anchor-link, .uk-heading-divider:hover .anchor-link {
    opacity: 100%;
}

.anchor-link {
    content: url("images/svg/hashtag.svg");
    width: 30px;
    margin-right: 0.1em;
}



/* ===== BACK BUTTON ===== */

#back-btn-cont {
    display: block;
    position: relative;
}

#back-btn-cont.back-btn-cont-docked-left {
    position: absolute;
}

#back-btn-cont.back-btn-cont-hidden {
    display: none;
}

#back-btn-cont a {
    margin: 2em 0 0 2em;
}



/* ===== CODE ===== */

code {
    border: var(--border-width-sm) solid var(--gray);
    margin: 0.5em;
}

.code-lg {
    font-size: 2em;
    margin: 0.5em;
}


/* ===== CLOSE BUTTON ===== */

svg.close-btn-svg {
    position: absolute;
    width: 1.4em;
    height: auto;
    border-radius: var(--border-radius-sm);
    transition: var(--trans-time-short);
}

svg.close-btn-svg:hover {
    cursor: pointer;
    background: var(--cont-clr-sec-shade);
}

svg.close-btn-svg path {
    d: path("M 30 30 L 70 70 M 30 70 L 70 30");
    width: 100%;
    height: auto;
    stroke: var(--gray);
    stroke-width: 5;
    transition: var(--trans-time-short);
}


/* ===== HEADING LINK ===== */

.heading-link {
    transition: var(--trans-time-short);
}

.heading-link:hover {
    padding: 0 0 0 3%;
}



/* ===== HIGHLIGHT ELEMENT ===== */

@keyframes highlight-element {
    from {
        background: var(--white);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.highlight-element {
    animation: highlight-element var(--trans-time-long);
}



/* ===== IMAGE ===== */

.img-cont img, .uk-cover-container.uk-transition-toggle {
    border: var(--border-width-dflt) solid var(--cont-clr-dflt);
    border-radius: var(--border-radius-lg);
}



/* ===== TABLE ===== */

.tb {
    display: block;
    overflow: auto;
    border-radius: var(--border-radius-dflt);
}

@keyframes bg-move {
    from { background-position: 0 0; }
    to { background-position: 100% 100%; }
}

.tb thead {
    font-size: 2em;
    color: var(--white);
    background: linear-gradient(45deg, var(--pink), var(--pink-shade));
    background-size: 100% 10000%;
    animation: bg-move 4s linear infinite alternate;
}

thead.tb-first-td-width-wide td:first-child {
    width: 60%;
}

thead.tb-first-td-width-dflt td:first-child {
    width: 40%;
}

.tb thead td:last-child {
    width: 100%;
}

.tb tbody {
    border-bottom: var(--border-width-dflt) solid var(--pink);
}

.tb tbody tr {
    transition: var(--trans-time-short);
}

.tb tbody tr:hover {
    border-bottom: var(--border-width-dflt) solid var(--blue);
}

.tb tbody td {
    border: var(--border-width-sm) solid var(--gray);
}

.tb-1 tbody td:nth-child(2) {
    vertical-align: middle;
}

.tb-body-heading {
    text-align: center;
    background: var(--cont-clr-sec);
}

tr.tb-tr-centered td {
    text-align: center;
}

tr.tb-tr-centered-not-first td:nth-child(n+2) {
    text-align: center;
}



/* ===== TEXT DESCRIPTION ===== */

.text-desc {
    color: var(--gray);
}

.text-desc[data-desc]:not([data-desc=""]) {
    text-decoration: underline;
}

.text-desc[data-desc]:not([data-desc=""]):hover {
    text-decoration: none;
}

.text-desc-cont {
    opacity: 1;
    position: absolute;
    width: 20em;
    height: auto;
    color: var(--white);
    background-color: var(--cont-clr-sec);
    border: var(--border-width-sm) solid var(--gray);
    border-radius: var(--border-radius-dflt);
    padding: 0.6em 2em 0.6em 0.6em; /* right padding for close button */
    transition: opacity var(--trans-time-short);
}

.text-desc-cont.text-desc-cont-hidden {
    opacity: 0;
}



/* ===== TYPED TEXT ===== */

@media (min-width: 1024px) {
    .typed-text-cont {
        display: inline-block;
    }

    @keyframes text-typing {
        from { width: 0; }
        to { width: 100%; }
    }

    @keyframes cursor-blinking {
        from { border-right-color: var(--blue); }
        to { border-right-color: transparent; }
    }

    .typed-text {
        overflow: hidden;
        white-space: nowrap;
        font-family: 'Open Sans', monospace;
        border-right: 0.15em solid transparent;
        animation: text-typing calc(0.1s * var(--typed-text-length)) steps(var(--typed-text-length), end) forwards, cursor-blinking 0.5s infinite;
    }
}



/* ===== MAP ===== */

.map {
    border: var(--border-width-dflt) solid var(--cont-clr-dflt);
    border-radius: var(--border-radius-lg);

    width: 100%;
    height: 40em;
}

@media screen and (max-width: 480px) {
    .map  { height: 20em; }
}


/* ===== WARNING LIST ===== */

.warning-list li:nth-child(odd) {
    background: #535311 !important;
}

.warning-list li:nth-child(even) {
    background: var(--cont-clr-dflt) !important;
}