@font-face { 
    font-family:maxwellheader; src: url("../fonts/max-header.ttf")/*tpa=https://maxwellthecat.info/fonts/max-header.ttf*/; 
}

@font-face { 
    font-family:MazzardM; src: url("../fonts/MazzardM.ttf")/*tpa=https://maxwellthecat.info/fonts/MazzardM.ttf*/; 
}


* { 
    margin: 0px; 
    padding: 0px;
}
body {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}
body { 
    background-color:#777777;
    max-width:2500px;
    margin:0 auto !important;
}

button {
    border: none;
    cursor: pointer;
}
button a {
    text-decoration: none;
    color:black;
}
button:hover {
    opacity:50%;
}

html { 
	scroll-behavior: smooth; 

}

.clear { 
    clear:both;

}

.left {
    float:left; 
}

.right {
    float:right; 
}
/* HEADER CSS STYLING */

header { 
    height:auto;
    width:100%; 
    position:fixed;
    max-width:2500px;
    background-color:#777777;
    z-index:1;
    border-bottom:1px solid #ffffff !Important;
} 

.inner-width {
    width:90%; 
    margin:0 auto;
    height:75px;
    padding:1% 0;
}

.logo {
    float:left;
}

.logo img {
    height:75px;
} 

.navigation-menu {
    float: right; 
    display: flex; 
    align-items:center; 
    margin:30px 0;
    background-color:#777777;
}

.navigation-menu a { 
    font-family:MazzardM;
    color:white;
    font-size:1.2rem;
    text-decoration: inherit;
    margin-left:10px;
    letter-spacing: 1px;
}

.navigation-menu a:hover {
    opacity:50%;
}

.social-buttons-header {
    float:right;
    padding:0 20px;
} 

.social-buttons-header img {
    height:30px;
    padding:0 5px;
    margin:25px 0;
} 

.social-buttons-header img:hover {
    opacity:50%;
} 

.social-buy-now-button-header { 
    width:75px;
    background-color:#777777;
    text-align:center;
    font-family:MazzardM;
    font-size:1.2rem;
    padding: 10px 10px;
    border-radius: 25px;
    margin:22px 0 22px 20px;
    border:1px solid #ffffff !Important;
}

.social-buy-now-button-header:hover {
    opacity:50%;
}

.social-buy-now-button-header a { 
    text-decoration: inherit;
    color:white;   
    padding:10px 0;
}

.menu-toggle-btn{ 
    float:right; 
    color:white;
    font-size:26px; 
    display:none !important;
}

.menu-toggle-btn:hover{ 
    opacity: 50%;

}

@media screen and (max-width:700px) {
    .menu-toggle-btn{
        display:block !important;
        margin:30px 10px;

    }
    .site-title-container-left-button {
        padding: 5px 5px 0 5px !important;
        width:30px !important;;
    }
    .site-title-container-left {
        float:none !important;
        width:90% !important; 
        margin:0 auto;
    }
    .site-title-container-right {
        float:none !important;
        width:90% !Important; 
        margin:0 auto;
    }
    .container-wrapper { 
        width:100% !important; 
        margin:0 auto !Important;
    }
    .navigation-menu{
        position:fixed; 
        width:100%; 
        max-width:150px; 
        top:73px; 
        right:0; 
        display:none;
        box-sizing:border-box; 
        padding:10px;
        border-bottom-left-radius: 10px;
        border-left:1px solid white;
        border-bottom:1px solid white;
    }
    .navigation-menu::before{ 
        position:absolute;
    }
    .navigation-menu a {
        display:block; 
        margin: 10px 0;
    }

    .navigation-menu.active  {
        display:block !important;
    }
    .social-buttons-header img {
        display:none;
    }
    .social-buy-now-button-header { 
        width:auto;
        text-align:center;
        font-size:0.9rem;
    }
    .inner-width {
        padding:2% 0;

    }
    .logo img { 
        height:70px;
    }
}


/* HEADER CSS STYLING */ 

#homepage-max {
    margin:0 0 20% 0;
}
.container-wrapper {
    width:80%; 
    height:auto; 
    margin:0 auto;
    padding:100px 0 0 0;
} 

.site-title-container-left {
    width:50%;
    height:auto; 
} 

.site-title-container-left h1 {
    font-family:maxwellheader; 
    font-size:5rem;
    color:#ffffff;
    margin:25% 0 0 0;
} 

.site-title-container-left p {
    font-family:MazzardM;
    font-size:1.4rem;
    max-width:68%;
    line-height:30px;
    color:white;
} 

.site-title-container-left-button {
    padding: 30px 5px 0 5px;
    width:50px;
}

.site-title-container-left-button:hover {
    opacity:50%;
}
.site-title-container-right {
    width:50%;
    height:auto; 
} 

.site-title-container-right img {
    width:75%;
    height:auto; 
    margin:25% 0 0 25%;
    display:block;

} 

.info-container-left img {
    width:75%;
    height:auto; 
    margin:0 25% 0 0;
    display:block;
} 

.info-container-left {
    width:50%;
    height:auto; 
} 

.info-container-right {
    width:50%;
    height:auto
} 

.info-container-right p {
    font-family:MazzardM;
    font-size:1.4rem;
    max-width:75%;
    line-height:30px;
    color:white;
    margin:0 0 0 25%;
} 

#about-max {
    margin: 0 0 20% 0;
}
.about-container {
    width:80%; 
    height:auto; 
    margin:0 auto;
    text-align:center;
}
.about-container h2 { 
    font-family:maxwellheader;
    font-size:5rem;
    color:white;
} 

.about-container p { 
    font-family:ConflictBold;
    color:white;
    width:65%;
    margin:0 auto 5% auto;
    text-align:center;
    font-size:1.4rem;
    line-height:25px;
} 

.about-container-button {
    background-color:#FEC703;
    text-align:center;
    font-family:ConflictBlack;
    font-size:1.2rem;
    padding: 10px 30px;
    border-radius: 10px;
    margin:0 2%;
} 

#tokenomics-max {
    margin:0 0 20% 0; 
}

.tokenomics-container {
    width:80%; 
    height:auto; 
    margin:0 auto;
    text-align:center;
} 

.tokenomics-container h2 { 
    font-family:maxwellheader;
    font-size:5rem;
    color:white;
    margin:0 0 5% 0;
} 

.tokenomics-container img { 
    width:60%; 
    margin:0 auto;
    display:block;
} 

#contact-max {
    margin:20% 0 0 0; 
}

.contact-container {
    width:80%; 
    height:auto; 
    margin:0 auto;
    text-align:center;
} 

.contact-container h2 { 
    font-family:maxwellheader;
    font-size:5rem;
    color:white;
    margin:0 0 5% 0;
} 

.contact-container p { 
    color:white;
    font-family:mazzardM;
    font-size:1.4rem; 
    line-height:30px; 
    margin:0 0 5% 0;
} 


.contact-container img { 
    width:25%; 
    margin:50px auto;
    display:block;
} 

footer {
    height:auto;
    width:100%;
} 

.social-links-footer {
    width: 15%;
    margin:0 auto;
} 

.social-links-footer img {
    width: 20%; 
} 

.social-link-left {
    margin-left:16%;
} 

.social-link-right {
    margin-right:16%;
}

footer p {
    text-align:center;
    margin:5% 0;
    color:white;
    font-family:mazzardM;
    font-size:1.2em;
} 

.social-links-footer img:hover {
    opacity:50%;
}  
#about-max h3 { 
    font-family:MazzardM; 
    color:white; 
    font-size:3rem;
    text-align:center;
    padding:50px 0 100px 0;
}
#about-max h4 { 
    font-family:MazzardM; 
    color:white; 
    font-size:2rem;
    text-align:center;
    padding:100px 0 0 0;
}

.tokenomics-container-left { 
    width:50%;
    height:auto; 
}

.tokenomics-container-left p { 
    font-size:1.4rem; 
    color:white;
    font-family:MazzardM;
    background-color:#575757;
    border:2px solid black; 
    padding:50px;
    border-radius:25px;
    line-height:30px;
}

.tokenomics-container-right { 
    width:50%;
    height:auto; 
}

.tokenomics-container-right img { 
    margin:0 0 0 35%; 
    width:65%; 
}
/* RESPONSIVENESS */ 

@media screen and (max-width:1000px) { 
    .site-title-container-left h1 {
        font-size:5rem;

}
.site-title-container-left  {
    text-align:center;

}
    .site-title-container-left p {
        margin:10px 0 20px 0;
        font-size: 1.2rem;
        line-height:25px;
        max-width:100%;
}
    .tokenomics-container img { 
        width:80%;
    } 
    .tokenomics-container h2 { 
        font-size:3rem;
        margin:0 0 50px 0;
    }
    .about-container h2 {
        font-size:3rem;
    }
    .about-container p {
        margin: 0 auto 50px auto;
    }
    .contact-container h2 {
        font-size:3rem;
        margin:0 0 50px 0;
    } 
    .contact-container p {
        margin: 0 0 50px 0;
    }
    .mail-button {
        margin: 0 0 50px 0;
        font-size:1rem;
    }
    .about-container-button {
        font-size:1rem;
    }
    .social-links-footer {
        width:30%;
    }

} 


@media screen and (max-width:600px) { 
    .site-title-container-left h1 {
        font-size:3rem;

}
    .site-title-container-left p {
        font-size: 1.3rem;
        line-height:30px;
        max-width:85%;
        margin: 20px auto;
}

    .about-container p {
        font-size:1rem;
        line-height:20px;
        width:80%;
    }
    .about-container-button {
        font-size:1rem;
    }
    .social-links-footer {
        width:30%;
    }
    .tokenomics-container {
        width:90%; 
    } 
    .contact-container {
        width:90%;
    }
    .site-title-container-right img {
        width:90%; 
    }
    .tokenomics-container img {
        width:100%;
    }
    .info-container-left img {
        width:95%;
        height:auto; 
        margin:0 auto 25px auto;
        display:block;
    } 
    
    .info-container-left {
        width:100%;
        height:auto; 
        margin:0 auto;
    } 
    
    .info-container-right {
        width:100%;
        height:auto;
        margin:0 auto;
    } 
    
    .info-container-right p {
        font-family:MazzardM;
        font-size:1.3rem;
        max-width:85%; 
        margin:0 auto;
        line-height:30px;
        color:white;
        text-align:center;
    } 
    #about-max h3 { 
        font-family:MazzardM; 
        color:white; 
        font-size:2rem;
        text-align:center;
        padding:25px 0 50px 0;
    }
    #about-max h4 { 
        font-family:MazzardM; 
        color:white; 
        font-size:1rem;
        text-align:center;
        padding:50px 0 0 0;
    }
    .tokenomics-container-left { 
        width:100%;
        height:auto; 
        float:none;
    }
    
    .tokenomics-container-left p { 
        font-size:1.3rem; 
        color:white;
        line-height:30px;
        font-family:MazzardM;
        background-color:#575757;
        border:2px solid black; 
        padding:20px;
        border-radius:12.5px;
        width:70%;
        margin:0 auto;
        text-align:center;
    }
    
    .tokenomics-container-right { 
        width:100%;
        height:auto; 
        float:none;
    }
    
    .tokenomics-container-right img { 
        margin:25px auto;
        width:75%; 
        display:block;
    }
    .roadmap-container h2 , h3 , p {
        text-align:center;
    }
    .roadmap-container  p {
        font-size:1.2rem;
    }
    .roadmap-container h3 {
        font-size:2rem;
    }
    .contact-container p {
        font-size:1.3rem; 
        line-height:30px;
    }

} 

@media screen and (max-width:450px) {  
    .social-links-footer {
        width:50%;
    }
    .contact-container img {
        width:60%;
    }
    .tokenomics-container h2 { 
        font-size:2.5rem;
    }
    .about-container h2 {
        font-size:2.5rem;
    }
    .contact-container h2 {
        font-size:2.5rem;
    } 
    .site-title-container-right img {
        width:95%; 
        margin:15% 0 10% 0;
    }
    .site-title-container-left-button {
        font-size: 0.8rem;
    }
    .navigation-menu{
        top:63px;
    } 
    .about-container p {
        width:100%;
    }
}    
.roadmap-container {
    margin:0 auto ;
}

.roadmap-container h2 { 
    font-family:maxwellheader;
    font-size:5rem;
    color:white;
    margin:0 0 5% 0;
} 
.roadmap-blocks { 
    width:100%; 
    margin:5% 0;
}

.phase-1-text { 
    width:30%; 
    float:left; 
    margin:0 1.5% 0 1.5%;  
}

.phase-1 {
    padding:25px;
    background-color:#575757; 
    border:2px solid black;
    border-radius: 25px;
    height:250px;
}

.phase-2-text { 
    width:30%; 
    float:left; 
    height:auto;
    margin:0 1.5%;   
}
.phase-2-text h3 { 
    text-align:center;
}
.phase-1-text h3 { 
    text-align:center;
}
.phase-3-text h3 { 
    text-align:center;
}
.roadmap-container h2 {
    text-align:center;
}
.phase-2 {
    padding:25px;
    background-color:#575757;
    border:2px solid black;
    border-radius: 25px;
    height:250px;
}

.phase-3-text { 
    width:30%; 
    float:left; 
    height:auto;
    margin:0 1.5% 0 1.5%;   
}

.phase-3 {
    padding:25px;
    background-color:#575757; 
    height:250px;
    border-radius: 25px;
    border:2px solid black;
}


.roadmap-container h3 {
    margin:25px 0;
    color:white;
    font-family:maxwellheader;
    font-size:2rem;
}

.roadmap-container p {
    font-size:1.4rem !Important;
    padding:5px;
    line-height:30px; 
    color:white;
    font-family:mazzardM; 
    opacity:0.5;
    z-index:2;
} 

.done {
    opacity:1 !important; 
    z-index:2;

} 

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

    .phase-1 {
        padding:10px;
        height:400px;
    }
    .phase-2 {
        padding:10px;
        height:400px;
    }
    .phase-3 {
        padding:10px;
        height:400px;
    }
    .phase-4 {
        padding:10px;
        height:400px;
    }

}    

@media screen and (max-width:1100px) {  
    .phase-1-text { 
        width:80%; 
        height:auto; 
        margin:0 auto; 
        float:none;
    }

    
    .phase-2-text { 
        width:80%; 
        height:auto;
        margin:0 auto;
        float:none;   
    }
    

    
    .phase-3-text { 
        width:80%; 
        height:auto;
        margin:0 auto;
        float:none;   
    }
    

    
    .phase-4-text { 
        width:80%; 
        height:auto;
        margin:0 auto;  
        float:none;
    } 
    .roadmap-blocks { 
        margin:50px 0;
    } 
    .roadmap-blocks p { 
        font-size:1.5rem;
    }

}    

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

    .phase-1 {
        padding:10px;
        height:auto;
    }
    .phase-2 {
        padding:10px;
        height:auto;
    }
    .phase-3 {
        padding:10px;
        height:auto;
    }
    .phase-4 {
        padding:10px;
        height:auto;
    }

    .roadmap-container h2 { 
        font-size:2.5rem;
    } 
    
}