@font-face {
    font-family: "Aoboshi";
    src: url('./fonts/AoboshiOne-Regular.ttf');
    font-display: swap;
}

@font-face {
    font-family: "VollkornSC";
    src: url('./fonts/VollkornSC-Regular.ttf');
    font-display: swap;
}

@font-face {
    font-family: "Julius";
    src: url('./fonts/JuliusSansOne-Regular.ttf');
    font-display: swap;
}

@font-face {
    font-family: "Koulen";
    src: url('./fonts/Koulen-Regular.ttf');
    font-display: swap;
}

@font-face {
    font-family: "DarkerGrote";
    src: url('./fonts/DarkerGrotesque-Regular.ttf');
    font-display: swap;
}

@font-face {
    font-family: "Dela";
    src: url('./fonts/DelaGothicOne-Regular.ttf');
    font-display: swap;
}

@font-face {
    font-family: "Motivational";
    src: url('./fonts/Cinzel-Regular.ttf');
    font-display: swap;
}

@font-face {
    font-family: "Motivational-Bold";
    src: url('./fonts/Cinzel-Bold.ttf');
    font-display: swap;
}

@font-face {
    font-family: "FancySerif";
    src: url('./fonts/PlayfairDisplay-Regular.ttf');
    font-display: swap;
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}  

:root {
    --White: rgb(210, 210, 210);
    --Gold: rgb(224, 187, 117);
    --Black: rgb(30, 30, 30);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

div {
    scroll-behavior: smooth;
}

body, .rule-body {
    background: rgb(10, 10, 10);
}

li {
    list-style-type: none
}

/* Scroll-Bar */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background-color: rgb(30, 30, 30);
}
  
::-webkit-scrollbar-thumb {
    background-color: rgb(70, 70, 70);
    border-radius: 5px;
}

/* KEK */

.centre {
    text-align: center;
}

.desktop-flex {
    display: flex;
}

.vert-centre {
    display: flex;
    align-items: center;
}

/* Header */

header {
    background: var(--White);
    padding: 20px 200px;
    display: flex;
    justify-content: space-between;
}

header > li, a {
    list-style: none;
    text-decoration: none;
    transition: 0.1s;
    color: var(--Black);
    font-family: "Motivational";
}

.logo, .logo:visited {
    cursor: pointer;
    font-size: 18px;
    transition: 0.2s;
    color: var(--Black);
    font-family: "Motivational";
}

.logo:hover {
    opacity: 50%;
}

a:hover {
    opacity: 70%;
}

.nav_links {
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.contactlink {
    border-radius: 69px;
    padding: 10px 20px;
    background: rgb(50, 50, 50);
    color: var(--White);
}

/* Mobile NavBar */

#mnb-hamburger {
    font-size: 30px;
    font-weight: bold;
    display: none;
}

#mnb-hamburger-btn {
    transition: 0.1s all;
    font-family: "DarkerGrote";
}

#mobilenavbar {
    font-family: "Motivational";
    transition: 0.1s all;
}

.mnb_links {
    display: none;
    background: var(--White);
}

.mnb-link {
    padding: 5px 10px;
    display: block;
    color: var(--Black);
}

.mnb-contactlink {
    background: rgb(50, 50, 50);
    color: var(--White);
}

/* 404 */

#fourofour {
    margin-top: 300px;
    text-align: center;
}

.foftxt {
    font-family: "Koulen";
    font-size: 50px;
}

.fofttxt {
    font-family: "Aoboshi";
    font-size: 16px;
}

.fofhref {
    display: inline-block;
    border: 1px var(--Gold) solid;
    color: var(--Gold);
    margin: 25px 150px;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bolder;
}

/* Page */

p {
    color: var(--White);
}

.mpbtxt {
    padding-top: 100px;
    padding-bottom: 20px;
    text-align: center;
    font-family: "Julius";
    font-size: 50px;
}

.mainpagebg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.pexels.com/photos/261102/pexels-photo-261102.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
}

.mindsetpagebg {
    background-image: url('https://images.unsplash.com/photo-1542317048-7a6ce1a438c8?q=80&w=2129&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    object-fit: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.earningsbg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://moonback-hotelbeds.b-cdn.net/88/889713/889713a_hb_a_010.jpg?width=3840&quality=75');
    object-fit: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.quotesbg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s.copyy.xyz/content/ai/Jesus_Having_A_Speech_1.jpg');
    object-fit: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.dtpagebg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s.copyy.xyz/content/ai/DIGIAITO.jpg');
    object-fit: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sectxt {
    font-size: 30px;
    font-family: "Koulen";
    padding: 20px 150px;
}

.ntxt {
    font-family: "Aoboshi";
    padding: 0px 150px;
}

.qntxt {
    font-family: "DarkerGrote";
}

.qntxt > a {
    color: var(--White);
    text-decoration: underline;
    font-family: "DarkerGrote";
}

.quotesheet {
    padding: 5px 150px;
    font-family: "Motivational";
}

.quotesdownload {
    display: inline-block;
    border: 1px var(--Gold) solid;
    color: var(--Gold);
    margin: 25px 150px;
    padding: 10px 20px;
    border-radius: 4px;
}

.mpbstxt {
    font-size: 20px;
    text-align: center; 
    padding-bottom: 30px;
    font-family: "DarkerGrote";
}

.graphs {
    text-align: center;
    display: grid;
    grid-template-columns: auto auto auto;
}

.graphnumber {
    font-size: 55px;
    font-family: "Koulen";
}

.graphtitle {
    font-family: "Julius";
    font-size: 18px;
}

.gold-text {
    background-image: linear-gradient(90deg, rgb(255, 204, 105) 2.68%, rgb(253, 229, 182) 61.25%, rgb(255, 221, 155) 104.69%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.channels, .digitaltools {
    text-align: center;
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.channels {
    grid-template-columns: auto auto;
}

.channel, .digitaltool {
    height: 100px;
    border-radius: 619px;
}

/* Footer */

footer {
    margin-top: 50px;
    padding: 20px;
    background: rgb(20,20,20);
}

.copyright {
    margin: 20px 0px;
    font-size: 18px;
    text-align: center;
    font-family: "Motivational";
    color: var(--White);
}

.socials {
    text-align: center;
    display: flex;
}

.sociallink {
    flex: 1;
}

.work-with-me:hover {
    opacity: 1 !important;
    background: rgb(70, 70, 70);
}

.work-with-me {
    display: inline-block;
    background: rgb(30, 30, 30);
    font-family: "DarkerGrote";
    color: white;
    text-align: center;
    padding: 10px 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Effects */

.green-text-shadow {
    text-shadow: 0 0 10px rgba(51, 255, 11, 0.9);
}

.red-text-shadow {
    text-shadow: 0 0 10px rgba(255, 40, 40, 0.9);
}

/* rule/{num} */

.rc-img-1 {
    background-image: url('./img/rc1.png');
    background-position: center;
    background-size: cover;
}

.rule-container {
    display: inline-block;
    background: rgba(0, 0, 0, 0.7);
    margin-top: 300px;
    text-align: center;
    padding: 20px 80px;
}

.rule-head {
    font-size: 52px;
    font-family: "Motivational";
    margin-bottom: 10px;
}

.rule-text {
    font-size: 22px;
    font-family: "Motivational";
    margin-bottom: 5px;
}

.rule-sub-text {
    font-size: 18px;
    font-family: "DarkerGrote";
}

.rule-href, .rule-href:visited {
    color: white !important;
}

/* Work with me */

.ntxt-dg {
    font-family: "DarkerGrote";
    padding: 0px 150px;
}

.cw-youtubes {
    text-align: center;
}

.cw-youtube-embed {
    margin: 20px;
}

.apply-boxes {
    margin: 0px 150px;
}

.apply-box {
    padding: 10px 30px;
    border: rgb(80, 80, 80) 1px solid;
    border-radius: 5px;
    margin: 20px;
    width: 720px;
}

.apply-box-title {
    font-family: "Motivational";
    margin-bottom: 10px;
    font-size: 24px;
    color: rgb(224, 187, 117);
}

.apply-box-txt {
    font-family: "DarkerGrote";
    font-size: 18px;
}

.apply-box-title > .vert-centre > .material-symbols-outlined {
    margin-right: 10px;
}

/* ---------------- [ EARNINGS ] --------------------- */

.earnings-poster {
    background: rgb(224, 187, 117);
    padding: 7px 0;
}

.earnings-poster-text {
    color: rgb(30, 30, 30);
    font-family: "DarkerGrote";
    text-align: center;
}

.earnings-poster-btn {
    border: rgb(50, 50, 50) 1px solid;
    font-size: 14px;
    padding: 2px 10px;
    border-radius: 7px;
    margin-left: 10px;
}

.earnings-poster-btn:hover {
    background: rgb(155, 116, 40);
    color: white;
}

.earnings-title {
    font-family: "Motivational";
    font-size: 40px;
    padding: 20px 150px;
}

.earnings-section-title {
    font-family: "Aoboshi";
    padding: 0px 150px;
    margin: 20px 0 5px 0;
}

.earnings-text {
    font-family: "DarkerGrote";
    padding: 0px 150px;
}

.earnings-li {
    font-family: "DarkerGrote";
    color: white;
    padding: 0px 165px;
}

.earnings-statistics-image {
    margin-top: 40px;
    height: 660px;
}