/*
*   Universal Website Style
*/
body {
    margin: 0;
    margin-top: 0em;
    padding: 0;
    background-color: #141d2b; /* Blue Grey darken-4 */
    color: #cfd8dc;
    font-family: roboto-regular;
}

footer {
    font-size: 0.7em;
    margin-top: -0.2em;
}

footer a {
    text-decoration: none;
    color: #cfd8dc;
}

.container {
    width: 100vw;
}

.container-fluid {
    width: 36%;
    margin: 0 auto;
}

.container-flex {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}

.box {
    flex: 1;
}

yellow-fg {
    background-color: #ffee58;
    color: #000000;
    padding: 0px 5px 0px 5px;
    cursor: pointer;
}

blue-txt {
    color:  #cfd8dc;
}

txt-lt {
    text-decoration: line-through;
}

/** Header Part */
#main-container {
    text-align: center;
}

#head-nav-area {
    padding-top: 8em;
}

#head-nav-area #hex-number-text {
    font-size: 3em;
}

#head-nav-area #quote-text {
    font-style: italic;
}
/** // Header Part */

/** Fonts tag necessities */
rolight {
    font-family: 'roboto-light';
}

robold {
    font-family: 'roboto-bold';
}

rothin {
    font-family: 'roboto-thin';
}

romed {
    font-family: 'roboto-medium';
}

roreg {
    font-family: 'roboto-regular';
}
/** // Fonts tag necessities */

/** Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

/* tooltip top positioned */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: 50%;
    margin-left: -60px;
    font-family: roboto-regular;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 0.5s;
}
/* // */


/* tooltip bottom positioned */
.tooltip .tooltiptext-right {
    visibility: hidden;
    width: 10em;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 2.3em;
    left: 110%;
}

.tooltip .tooltiptext-right::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptext-right {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext-right {
    opacity: 0;
    transition: opacity 0.5s;
}
/** // */