:root {
    --bs-header: #001E28;
}
body {
    /* font-family: "Poppins", Sans-serif; */
    font-family: 'Roboto',sans-serif;
    background-color: #EEEEEE;
}
a {
    text-decoration: none;
}
/* faucet */
.navbar-right {
    float: right;
}
.bgr-dark {
    border-bottom: 5px solid #8445ff;
    padding: 15px;
}
.navbar-brand {
    font-size: 25px;
    letter-spacing: 2px;
    font-weight: 900;
}
.ml-auto {
    margin-left: auto;
    margin-right: 100px;
}
.float-md-right {
    float: right;
}
.main-faucet h1 {
    display: none;
}
.main-faucet h2 {
    margin: 30px;
    font-size: 45px;
    font-weight: 700;
    color: #333;
}
.show-ref {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px;
}
.ads img {
    max-width: 100%;
}
.mx-400 {
    max-width: 800px;
    margin: 0 auto;
}
.payout {
    padding: 20px;
    background-color: beige;
    font-weight: 700;
}
.center select{
    max-width: 350px;
    margin-bottom: 10px;
}
.ads-left img,
.ads-right img{
    margin-bottom: 10px;
}
/* faucet */
.bg-header {
    background-color: var(--bs-header);
}
.main-header .title {
    padding-top: 10px;
    padding-bottom: 30px;
}
.main-header .title h1 {
    color: #FFFFFF;
    font-size: 35px;
    max-width: 500px;
    margin: 0 auto;
    padding-bottom: 5px;
    margin-bottom: 5px;
    font-weight: 800;
    letter-spacing: 1px;
    border-bottom: 3px solid #e6dcdc;
}
.main-header .title .description {
    color: #FFFFFF;
    max-width: 500px;
    margin: 0 auto;
    letter-spacing: 1px;
    font-size: 16px;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1140px;
    }
}
.main-header {
    padding-top: 20px;
}
.navbar-dark .navbar-nav .nav-link {
    font-size: 18px;
    padding-right: 14px;
    padding-left: 16px;
    color: #fff;
}
.navbar-brand {
    font-size: 25px;
    letter-spacing: 2px;
}
.btn {
    padding: 3px;
}
.footer .footer-top {
    padding: 30px 0 50px;
    background-color: rgb(219, 205, 205);
}
.footer .footer-top h4 {
    font-size: 16px;
    border-bottom: 1px solid;
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-align: left;
}
.icon-nav {
    display: none;
}
.icon-nav span {
    font-size: 22px;
    cursor: pointer;
}
/* page */
.page-content .content img{
    max-width: 100%;
}
.page-content .ads img {
    margin-bottom: 10px;
}
.ads {
    margin-bottom: 10px;
}
.footer-copyright span {
    font-size: 12px;
}
.footer-powered {
    font-size: 12px;
}
/* end page */
@media (max-width: 768px) {
    .page-content .content img{
        height: auto;
    }
   .item-home-bottom {
       display: flex;
       justify-content: space-around;
       align-items: center;
       padding: 2px;
   }
   .footer-copyright {
       font-size: 12px;
       text-align: center;
       margin-bottom: 5px;
   }
   .footer-powered {
      font-size: 12px;
      text-align: center !important; 
   }
   .icon-nav {
    display: block;
   }
   .capcha-ads img {
       margin-bottom: 5px;
   }
}

/* Stage 4: responsive faucet, pages and advertising placements. */
.container, .container-fluid, .row > [class*="col-"] { min-width: 0; }
.main-faucet { min-width: 0; overflow-wrap: anywhere; }
.main-faucet h2 { font-size: clamp(1.5rem, 4vw, 2.8rem); margin: 20px 0; }
.main-header .title h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); overflow-wrap: anywhere; }
.show-ref { max-width: 100%; padding: clamp(16px, 4vw, 60px); overflow-wrap: anywhere; }
.show-ref .ref { width: 100%; min-width: 0; }
.page-content .content { min-width: 0; overflow-wrap: anywhere; }
.page-content .content img, .page-content .content video, .main-faucet img { max-width: 100%; height: auto; }
.page-content .content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ads, .ads-left, .ads-right, .capcha-ads { max-width: 100%; overflow-x: auto; }
.ads img, .ads-left img, .ads-right img, .capcha-ads img { max-width: 100%; height: auto; }
.ads iframe, .ads-left iframe, .ads-right iframe, .capcha-ads iframe { max-width: 100%; }
.table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.modal-dialog { max-width: min(95vw, 800px); margin-left: auto; margin-right: auto; }
.modal-content { min-width: 0; }
@media (max-width: 767.98px) {
    .navbar-brand { max-width: 74vw; font-size: 20px; overflow-wrap: anywhere; }
    .ml-auto { margin-right: 0; }
    .show-ref h3 { font-size: 1.25rem; }
    .main-faucet h2 { margin: 16px 0; }
    .modal-dialog { margin: 12px auto; }
    .main-header { padding-top: 12px; }
}