/* =====================================================================================================
// Project      : CoinMachine platform
// Context      : blockchain/cryptocurrency education and consulting, IT developement
// File         : main.css
// Role         : main CSS stylesheet
// Author       : CoinMachine
// Creation     : 2023-06-11
// Last update  : 2023-12-29
// ===================================================================================================== */
/* 
    green : #60e660
    lightgreen : #60e6a3
*/
* {
    box-sizing: border-box!important;
}
body {
    margin: 0;
    padding: 0;
    background: black;
    color: #60e660;
}
/* *** *** *** CONTAINER *** *** *** */
#site-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
/* *** *** *** SITE HEADER *** *** *** */
#site-header {
    margin: 0px auto;
    padding: 0px;
}
#site-logo, #site-logo img {
    margin: 0;
    padding: 0;
}
#site-logo img {
    width: 75%;
    height: 75%;
    object-fit: contain;
}
#site-title {
    text-align: center;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #ebef7b, #06c883);
}
#site-title h1 {
    font-family: "Frijole";
    font-variant: small-caps;
    font-size: 80px;
    letter-spacing: 0.1em;
}
#site-title h2, #site-title h3 {
    font-family: "Syncopate";
    text-shadow: 2px 2px 3px darkgray;
}
#site-title h2 {
    font-size: 40px;
    letter-spacing: 0.1em;
}
#site-title h3 {
    font-size: 26px;
}
/* *** *** *** MAIN NAVIGATION BAR *** *** *** */
#main-navbar-container, #main-navbar-container ul
#main-navbar-container ul li,
#main-navbar-container a, #main-navbar-container ul li a,
#main-navbar-container button, #main-navbar-container div {
    color: #06c883;
}
#main-navbar {
    justify-content: center;
    align-items: center;
    margin: 0px auto;
    color: #06c883;
    text-align: center;
}
#main-navbar-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}
#menu-logo {
    max-width: 50px;
}
.nav-item {
    width: 100%;
}
#main-navbar-container a, #main-navbar-container ul li a {
    width: fit-content;
    min-width: 150px;
    margin: 0 10px;
    padding: 5px 15px;
    font-family: "Aldrich";
    font-size: 20px;
    text-align: center;
    background-color: #000;
    color: #00a36a;
    transition: all 0.85s ease-in-out;
}
#main-navbar-container a:hover {
    background-color: #00a36a;
    color: #000;
    border-radius: 20px;
}
.ddm-user li a span {
    margin-left: 5px;
    margin-right: 5px;
}
.ddm-user {
    flex-wrap: nowrap;
    min-width: 18rem;
    width: 180px;
    padding-left: 10px;
    opacity: 0.85;
    background-color: #000;
    border: 1px solid #06c883;
}
.ddm-user li {
    margin-right: 20px;
}
.ddm-user li, .ddm-user li a {
    display: inline-block;
    width: 100%;
    flex-wrap: nowrap;
    padding: 5px 15px;
    font-family: "Aldrich";
    font-size: 20px;
    text-align: left;
    transition: all 0.85s ease-in-out; 
}
.ddm-user li:hover, .ddm-user li a:hover {
    background-color: #06c883;
    color: #000;
    border-radius: 20px;
}
.ddm-hr {
    margin: 5px auto;
    width: 90%;
    background-color: #06c883;
}
.ddm-subtitle {
    padding-left: 5px;
    text-align: center;
    font-family: "Aldrich";
    font-variant: small-caps;
    font-size: 1.4em;
    color: #ebef7b;
}
.ddm-subtitle span {
    margin-right: 10px;
}
#user-toggler, #user-toggler span {
    color: #06c883;
}
#user-toggler:hover, #user-toggler span:hover {
    color: #ebef7b;
}
.navbar-toggler-icon {
    color: #06c883;
    background-color: #06c883;
}
/* *** *** *** FOOTER *** *** *** */
footer {
    margin: 10px auto;
    padding: 0 40px;
    color: #00a36a;
}
footer .row p {
    margin: 1px auto;
    padding: 0;
    font-family: "Aldrich";
    font-size: 1.em;
    text-align: center;
}
footer .row p span {
    margin: 0 3px;
}
footer .row p a {
    color: #ebef7b;
    text-decoration: none;
    transition: all 0.85s ease-in-out;
    animation: green-yellow 3s infinite;
}
footer .row p a:hover {
    text-decoration: underline;
    color: #00a36a;
}
/* Scroller styling */
.scroller {
    height: 1.2em;
    line-height: 1.2em;
    position: relative;
    overflow: hidden;
    width: 100%;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #ebef7b, #06c883);
  }
  .scroller > span {
    position: absolute;
    top: 0;
    animation: slide-scroll 15s infinite;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #ebef7b, #06c883);
  }
/* *** *** *** ANIMATIONS *** *** *** */
@keyframes green-yellow {
    0% {
        color: #ebef7b;
    }
    50% {
        color: #00a36a;
    }
    100% {
        color: #ebef7b;
    }
}
@keyframes slide-scroll {
    0% {
      top: 0;
    }
    10% {
        top: -1.2em;
    }
    20% {
        top: -2.4em;
    }
    30% {
      top: -3.6em;
    }
    40% {
      top: -4.8em;
    }
    50% {
        top: -6.0em;
    }
    60% {
        top: -4.8em;
    }
    70% {
        top: -3.6em;
    }
    80% {
        top: -2.4em;
    }
    90% {
        top: -1.2em;
    }
  }
/* *** *** *** MEDIA QUERIES *** *** *** */
@media screen and (max-width: 1350px) {

}
@media screen and (max-width: 1200px) {
    #site-title h1 {
        font-size: 60px;
    }
    #site-title h2, #site-title h3 {
        text-shadow: 2px 2px 3px darkgray;
    }
    #site-title h2 {
        font-size: 40px;
    }
    #site-title h3 {
        font-size: 26px;
    }
    #main-navbar-container a, #main-navbar-container ul li a {
        font-size: 14px;
    }
}
@media screen and (max-width: 992px) {
    #site-title h1 {
        font-size: 45px;
    }
    #site-title h2 {
        font-size: 30px;
    }
    #site-title h3 {
        font-size: 20px;
    }
    #menu-logo {
        max-width: 35px;
    }
    #main-navbar-container a, #main-navbar-container ul li a,
    .nav-link {
        min-width: 100px;
        font-size: 15px;
    }
}
@media screen and (max-width: 768px) {
    #site-logo {
        max-width: 100px;
    }
    #site-title h1 {
        font-size: 30px;
    }
    #site-title h2 {
        font-size: 20px;
    }
    #site-title h3 {
        font-size: 16px;
    }
    #main-navbar-container a, #main-navbar-container ul li a,
    .nav-link {
        min-width: 80px;
        font-size: 12px;
    }
}
@media screen and (max-width: 576px) {
    #site-logo img{
        max-width: 70px;
    }
    #site-title h2, #site-title h3 {
        font-size: 12px;
        text-shadow: 1px 1px 2px darkgray;
    }
    #main-navbar-container a, #main-navbar-container ul li a {
        font-size: 16px;
    }
}
@media screen and (max-width: 480px) {
    #site-logo img{
        max-width: 70px;
    }
    #site-title h1 {
        font-size: 26px;
    }
    #main-navbar-container a, #main-navbar-container ul li a,
    .dropdown-item, .ddm-user {
        max-width: 60px;
        font-size: 14px;
    }
}
@media screen and (max-width: 360px) {
    #site-title h1 {
        font-size: 20px;
    }
    #site-title h2 {
        font-size: 10px;
    } #site-title h3 {
        font-size: 8px;
    }
    #main-navbar-container a, #main-navbar-container ul li a {
        width: auto;
        margin: 0 auto;
        padding: 0;
        font-size: 0.5em;
    }
    .ddm-user {
        margin-right: 100px;
    }
    .ddm-subtitle {
        font-size: 0.6em;
    }
}