/* =====================================================================================================
// Project      : CoinMachine platform
// Context      : blockchain/cryptocurrency education and consulting, IT developement
// File         : web3medias.css
// Role         : web3medias.php special CSS stylesheet
// Author       : CoinMachine
// Creation     : 2023-06-12
// Last update  : 2021-06-28
// ===================================================================================================== */

/* *** *** *** CONTAINERS *** *** *** */
#bc-main-content {
    
}
.blockchain {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    padding-bottom: 10px;
    border: 1px dotted #06c883;
    box-shadow: inset -1px -1px 4px 1px #ebef7b;
}
.blockchain .row {
    position: relative;
    transform: skew(0,0);
}
.bc-description {
    opacity: 0.9;
    margin: 2px;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #ebef7b, #34f8ee);
    font-weight: 700;
    text-align: justify;
    font-family: "Lekton";
    font-size: 1.1em;
}
.bc-description::first-letter {
    color: #06acc8;
    font-weight: 900;
}
/* *** *** *** MINI NAVIGATION MENU *** *** *** */
#bcd-mini-menu {
    position: fixed;
    top: 45%;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #ebef7b, #06c883);
    font-family: "Audiowide";
}
#bcd-mini-menu h4, #bcd-mini-menu h4 a {
    text-decoration: none;
    font-family: "Audiowide";
    font-size: 1.5em;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #ebef7b, #06c883);
}
#bcd-mini-menu ul, #bcd-mini-menu ul li {
    margin-left: 20px;
    margin-bottom: 1px;
    padding: 0;
}
#bcd-mini-menu ul li, #bcd-mini-menu ul li a {
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #ebef7b, #06c883);
    font-size: 1.1em;
}
#bcd-mini-menu ul li a,
#bcd-mini-menu h4 a {
    transition: all 1.75s ease-in-out;
}
#bcd-mini-menu ul li a:hover,
#bcd-mini-menu h4 a:hover  {
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #06acc8, #8306c8);
}
/* *** *** *** TITRAGES *** *** *** */
#bc-dashboard-label, #bc-blockchains-list article h3,
#bc-blockchains-list article h4 {
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #06c883, #ebef7b);
}
#bc-dashboard-label {
    margin: 10px auto;
    font-family: "Audiowide";
    font-size: 2.5rem;
    text-align: right;
}
#bc-dashboard-label span {
    margin-left: 10px;
}
#bc-main-content article h3 {
    margin-top: 10px;
    padding-left: 20px;
    font-family: "Audiowide";
}
#bc-blockchains-list article h3 {
    margin-top: 10px;
    font-family: "Audiowide";
}
.bc-consensus {
    margin-top: 10px;
    margin-right: 5px;
    font-family: "Share Tech Mono";
    text-align: right;
}
/* *** *** *** USER CLASSES *** *** *** */
.bc-token-logo {
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
    margin-left: 5px;
}
.bc-article-titles, .bc-blockscan-link {
    text-decoration: none;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #ebef7b, #06c883);
    transition: all 1.75s ease-in-out;
}
.bc-article-titles:hover, .bc-blockscan-link:hover {
    background-image: linear-gradient(45deg, #06acc8, #8306c8);
}
.bc-blockscan-link-label {
    text-decoration: none;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #06c883, #ebef7b);
}
.bc-article-titles {
    font-family: "Audiowide";
    font-size: 1.1em;
    text-align: center;
}
.bc-blockscan-link-label {
    font-family: "Audiowide";
    font-size: 1em;
    text-align: right;
}
.bc-blockscan-link {
    font-family: "Share Tech";
    font-size: 0.9em;
    text-align: left;
}
.bc-blockscan-link span, .bc-blockscan-link span {
    margin-left: 5px;
    font-size: 0.8em;
}
/* *** *** *** REFERENCES SECTIONS *** *** *** */
.bc-references {
    display: none;
    border: none;
}
.bc-ref-titles, .bc-ref-titles .row {
    margin: 5px auto;
    padding: 5px;
    text-decoration: none;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #06c883, #ebef7b);
}
.bc-ref-titles:hover, .bc-ref-titles .row:hover {
    background-image: linear-gradient(45deg,#06acc8, #8306c8);
}
.bc-ref-titles span, .bc-ref-titles-content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}
.bc-ref-titles-content {
    font-family: "Audiowide";
    font-size: 0.9em;
    letter-spacing: 0.65em;
    color: #06c883;
    animation: blinkky 1.5s infinite;
    cursor: pointer;
}
.bc-references{
    margin: 0;
    padding: 5px;
}
.bc-ref-details, .bc-ref-details li, .bc-ref-details li a {
    text-decoration: none;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #06c883, #ebef7b);
}
.bc-ref-details li a:hover {
    background-image: linear-gradient(45deg, #06acc8, #8306c8);
}
.bc-ref-rubrics, .bc-ref-rubrics li {
    margin: 0px;
    margin-left: 20px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #ebef7b, #06c883);
    font-family: "Audiowide";
    font-size: 1.1em;
}
.bc-ref-details li {
    margin: 0px;
    margin-left: 30px;
    padding: 0px;
}
.bc-ref-details li a {
    margin: 0px;
    padding: 0px;
    font-family: "Share Tech";
    font-size: 0.75em;
}
.bc-ref-tooltip {
    font-size: 0.9em;
    font-weight: 800;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: #06c883;
    animation: blinkky 4s infinite;
}
.bc-ref-tooltip:hover {
    cursor: pointer;
    background-image: linear-gradient(45deg, #06c883, #ebef7b);
}
.bc-ref-noref {
    margin: 0;
    margin-left: 10px;    
}
.bc-ref-noref, .bc-noref-titles-content {
    padding: 0;
    text-decoration: none;
    text-align: center;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #06c883, #ebef7b);
    font-family: "Share Tech Mono";
}
.bc-noref-titles-content {
    font-size: 0.9em;
}
/* *** *** *** ANIMATIONS *** *** *** */
@keyframes blinkky {
    0% {
        color: #06c883;
        opacity: 1;
    }
    50% {
        color: #ebef7b;
        opacity: 0.95;
    }
    100% {
        color: #06c883;
        opacity: 1;
    }
}
/* *** *** *** MEDIA QUERIES *** *** *** */
@media screen and (max-width: 1350px) {
    #bcd-mini-menu {
        top: 40%;
    }
}
@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 992px) {

}
@media screen and (max-width: 768px) {

}
@media screen and (max-width: 576px) {

}
@media screen and (max-width: 480px) {
    #bc-dashboard-label {
        font-size: 1.25em;
    }
    #bcd-mini-menu {
        top: 25%;
        left: 0;
    }
    #bcd-mini-menu h4 {
        display: none;
    }
    #bcd-mini-menu ul li {
        max-width: 15%;
        flex-wrap: wrap;
        margin: 0;
    }
    #bcd-mini-menu ul li a {
        font-size: 0.75em;
    }
    #bc-main-content {
        margin-top: 30px;
    }
    #bc-blockchains-list article {
        padding: 5px;
        box-shadow: none;
    }
    #bc-blockchains-list article h3 {
        font-size: 1.25em;
    }
    .bc-article-titles {
        font-size: 0.9em;
    }
    .bc-consensus {
        font-size: 0.75em;
    }
    .bc-blockscan-link-label {
        font-size: 0.5em;
    }
    .bc-blockscan-link {
        font-size: 0.5em;
    }
    .text-container {
        margin: 0 auto;
        padding: 0;
    }
    .text-container .row {
        margin: 0;
        margin-left: 10px;
        margin-right: 15px;
        padding: 2px;
    }
    .bc-description {
        padding: 0;
        font-size: 0.6em;
    }
    .bc-ref-titles {
        font-size: 0.5em;
    }
    .bc-ref-rubrics {
        font-size: 0.5em;
    }
    .bc-ref-details, .bc-ref-details li a {
        margin: 2px auto;
        padding-left: 0px;
    }
    .bc-ref-details {
        font-size: 0.5em;
    }
    .bc-ref-details li a {
        font-size: 1em;
    }
}
@media screen and (max-width: 376px) {
    #bcd-mini-menu {
        top: 35%;
    }
    #bcd-mini-menu ul li {
        margin-top: 0;
        margin-bottom: 2px;
        padding: 0;
        line-height: 0.9em;
    }
    #bcd-mini-menu ul li a {
        font-size: 0.65em;
        margin: 0;
        padding: 0;
    }
    .bc-ref-details {
        font-size: 1em;
    }
    .bc-ref-details li a {
        font-size: 0.9em;
    }
    .bc-ref-details li a span,
    .bc-ref-tooltip {
        margin-left: 4px;
        font-size: 1em;
    }
}
@media screen and (max-width: 360px) {
    #bcd-mini-menu ul li a {
        font-size: 0.5em;
    }
    .bc-ref-titles {
        font-size: 0.4em;
    }
    .bc-ref-details {
        margin-left: 5px;
        padding-left: 0px;
        font-size: 0.8em;
    }
    .bc-ref-details li {
        margin-left: 10px;
    }
    .bc-ref-details li a {
        margin-left: 0;
        padding-left: 0;
        padding-right: 20px;
        flex-wrap: wrap;
        font-size: 1em;
    }
    .bc-ref-details li a span,
    .bc-ref-tooltip {
        margin-left: 2px;
        font-size: 1em;
    }
}