@import url('https://fonts.cdnfonts.com/css/glerosion-personal-use');

@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'glerosion personal use';
    src: url('/GlerosionPersonalUse-Regular.otf') format('woff2'),
         url('/GlerosionPersonalUse-Regular.otf') format('woff'),
         url('/GlerosionPersonalUse-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* *, *::before, *::after {
    box-sizing: border-box;
  } */

:root {
    /* Colors */
    --mini-blue: #4455EE;
    --mini-yellow: #EEDD44;
    --light-yellow: #fff9c6;
    --primary-black: #171502;

    /* Fonts */
    --mini-big-font: "glerosion personal use";
    --mini-small-fonts: "Poppins", sans-serif;
    --defualt-font: sans-serif;

}

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

body {
    overflow-x: hidden;
    color: var(--primary-black);
    background-color:var(--light-yellow);
    scroll-behavior:smooth;
    text-transform: lowercase;
    transition: all 3s ease;
}

/* img {
    max-width: 100%;
    height: auto;
} */


header {
    display: flex;
    justify-content: space-between;
    padding: min(1.5rem, 2rem, 3.5rem);
}

.logo {
    display: flex;
    color: var(--primary-black);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family: var(--mini-big-font);
    font-size: clamp(1.2rem, 0.815rem + 1.93vw, 2.5rem);
}

.logo a {
    color: var(--primary-black);
    text-decoration: none;
}

img.logo {
    display: flex;
    width: 20px;
}

header .menu {
    font-family: var(--mini-big-font);
    font-size: clamp(1rem, -0.615rem + 2.2vw, 1.5rem);
    background-color: var(--mini-yellow);
    border: 2px solid var(--primary-black);
    color: black;
    /* width: 5rem;
    height: 3rem; */
    white-space: nowrap;
    border-radius: 10px;
    box-shadow: -4px 4px 2px var(--mini-blue);
    padding: min(1rem, 10%);
    margin-right: 2rem;
    
}

.menu:hover {
    color: var(--mini-yellow);
    background-color: var(--mini-blue);
    box-shadow: -4px 4px 2px var(--mini-yellow);
    transform: scale(1.05);   
}


.hero {
    display: flex;
    flex-direction: column;
}

.hero-hanging {
    min-width: 100;
    min-height: 150;
    position: absolute;
    top: 0;
    right: 50%;
    left: 50%;
    z-index: 1;
}

.hero-header {
    display: flex;
    flex-direction: column;
    padding-top: 5rem;
}

.hero-header h2 {
    display: flex;
    font-family: var(--mini-big-font);
    font-size: clamp(1rem, 0.407rem + 2.96vw, 3rem);
    margin-bottom: 0;
    justify-content: center;
    align-items: flex-start;
    line-height: 0.8;
    padding-right: 53%;
}


.hero-content h1 {
    font-family: var(--mini-big-font);
    font-size: clamp(4.5rem, 0.037rem + 14.81vw, 13rem);
    margin: 0;
    justify-content: center;
    text-align: center;
    line-height: 0.8;
}

.hero-content p {
    font-family: var(--mini-small-fonts);
    font-size: clamp(0.8rem, 0.444rem + 1.78vw, 2rem);
    justify-content: center;
    text-align: center;
    margin-bottom: 5rem;
    padding-top: 1.5rem;
}

.cta-button {
    display: flex;
    justify-content: center;
    
}

.cta-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-black);
    gap: 2rem;
    padding-top: 3rem;
    padding-bottom: 10rem;
    
}

.cta-button a {
    text-decoration: none;
}

.cta-button :hover {
    color: var(--mini-yellow);
    background-color: var(--mini-blue);
    box-shadow: -4px 4px 2px var(--mini-yellow);
    transform: scale(1.05);   
}

@media (max-width: 768px) {
    .cta-button {
        display: flex;
        color: var(--primary-black);
        flex-direction: column;
        justify-items: center;
        align-items: center;
        padding-bottom: 2rem;
        margin-bottom: 1rem;
        margin: 1rem;
    }

    .asa,.buy {
        margin: 1rem;
    }   
}


button.asa, button.buy {
    display: flex;
    font-family: var(--mini-big-font);
    font-size: 1.3rem;
    background-color: var(--mini-yellow);
    border: 2px solid var(--primary-black);
    border-radius: 10px;
    box-shadow: -4px 4px 2px var(--mini-blue);
    padding: 0.8rem;
    cursor: pointer;
    color: var(--primary-black);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* .cta-button .buy {
    font-family: var(--mini-big-font);
    font-size: clamp(1rem, 1.3rem, 1.5rem);
    background-color: var(--mini-yellow);
    border-radius: 10px;
    box-shadow: -4px 4px 2px var(--mini-blue);
    padding: 0.8rem;
    margin-left: 1rem;
} */

.nft-community {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.mini-img {
    /* display: flex; */
    position: relative;
}

img.weed-boy {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 37rem;
    top: -7rem;
}
img.nft-img {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 10rem;
    top: -24rem;
}

.mini-nft,.mini-community {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border: 4px solid var(--mini-yellow);
    /* border-image: linear-gradient(to top, var(--mini-blue) 50%, var(--mini-yellow) 50%); */
    border-image-slice: 1;
    margin: 9rem;
    padding: 1.5rem;
    background-color: var(--primary-black);
    color: whitesmoke;
    width: 400px;
    height: 473px;
    border-radius: 20px;
    z-index: 1;
}


.nft-community h2 {
    font-family: var(--mini-big-font);
    color: var(--mini-yellow);
    font-size: clamp(2rem, 5rem, 7rem);
    margin: 0;
    line-height: 1;
    
}
/* .mini-community h2 {
    font-family: var(--mini-big-font);
    color: var(--mini-yellow);
    font-size: 3rem;
    margin: 0;
} */

.nft-community p {
    font-family: var(--mini-small-fonts);
    font-size: clamp(0.3rem, 0.8rem, 2rem);
}


button.nft, button.dc {
    display: flex;
    width: 100%;
    font-family: var(--mini-big-font);
    font-size: 1.3rem;
    background-color: var(--mini-yellow);
    color: var(--primary-black);
    border: 2px solid var(--primary-black);
    border-radius: 10px;
    box-shadow: -4px 4px 2px var(--mini-blue);
    padding: 0.8rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    justify-content: center;
    align-content: center;
}
/* button .nft-community {
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
} */
button.dc:hover {
    color: var(--mini-yellow);
    background-color: var(--mini-blue);
    box-shadow: -4px 4px 2px var(--mini-yellow);
    transform: scale(1.05);   
}
button.nft:hover {
    color: var(--mini-yellow);
    background-color: var(--mini-blue);
    box-shadow: -4px 4px 2px var(--mini-yellow);
    transform: scale(1.05);   
}


.nft-community a {
    text-decoration: none;
}

.all-benefits {
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mini-benefit {
    display: flex;
    justify-content: space-between;
    align-content: center;
    font-family: var(--mini-small-fonts);
    width: 90%;
    height: auto;
    background-color: var(--mini-yellow);
    gap: 2rem;
    border: 4px solid var(--mini-blue);
    border-radius: 20px;
    padding: 2rem;
    margin-top: 8rem;
}

.benefit {
    display: flex;
    flex-direction: column;
}
.benefit h2{
    font-family: var(--mini-big-font);
    font-size: 5rem;
    line-height: 1;
}

.benefit p {
   
    font-family: var(--mini-small-fonts);
    margin-top: 1rem;
}
.benefit li {
    gap: 2rem;
    font-family: var(--mini-small-fonts);
    margin-top: 5px;
}

.benefit ul {
    padding-left: 1.3rem;
    list-style-position: inside;
    list-style:square;
}

.benefit-img {
    border: 3px solid var(--mini-blue);
    margin: 2rem 0;
    box-shadow: -4px 4px 2px var(--mini-blue);
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

button.a-faminion {
    display: flex;
    width: 100%;
    font-family: var(--mini-big-font);
    font-size: 1.3rem;
    background-color: var(--primary-black);
    border: 2px solid var(--primary-black);
    color: var(--mini-yellow);
    border-radius: 10px;
    box-shadow: -4px 4px 2px var(--mini-blue);
    padding: 0.8rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    justify-content: center;
    align-content: center;
}

button.a-faminion:hover {
    color: var(--mini-yellow);
    background-color: var(--mini-blue);
    box-shadow: -4px 4px 2px var(--primary-black);
    transform: scale(1.05);   
}

.mini-benefit a {
    text-decoration: none;
}

footer {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    margin-top: 10rem;
    background-color: var(--primary-black);
    
}

.list a {
    text-decoration: none;
    color: var(--mini-yellow);
    padding: 0.7rem;
}

.list {
    font-size: 1.4rem;
    font-family: var(--mini-big-font);
    color: var(--mini-yellow);
    display: flex; 
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin-top: 1.5rem;
}

.list1,.list2 {
    font-size: 1.4rem;
    font-family: var(--mini-big-font);
    color: var(--mini-yellow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.divider {
    border: 5px solid var(--mini-yellow);
    width: 100%;
    margin: 1rem;
}

footer.footer-img {
    display: flex;
    justify-content: center;
    align-items: center;
}
footer p {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--mini-small-fonts);
    font-size: small;
    font-weight: 200;
    color: whitesmoke;
}

.list a:hover {
    color: var(--mini-blue);
    transform: scale(1.05);   
}

/*///NFT PAGE STYLING///*/

.explore {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 3rem 2rem;
    color: var(--primary-black);
   
    gap: 2rem;
}

.explore h1 {
    font-family: var(--mini-big-font);
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    font-size: clamp(1.8rem, 0.545rem + 3.27vw, 3rem);
}
.explore h3 {
    font-family: var(--mini-small-fonts);
    white-space: nowrap;
    text-align: center;
    font-size: clamp(1.2rem, 0.245rem + 2.67vw, 2rem);
}

.explore p {
    font-family: var(--mini-small-fonts);
    font-size: clamp(1rem, 0.818rem + 0.91vw, 1.2rem);
}

.explore ul {
    font-family: var(--mini-small-fonts);
    font-size: clamp(1rem, 0.818rem + 0.91vw, 1.2rem);
   
}

.explore li {
    margin: 1rem;
}
.explore li::marker {
    color: var(--mini-blue);
    box-shadow: -8px 4px 2px var(--mini-blue);
}

h2 {
    text-align: center;
    font-size: clamp(2rem, 2.5rem, 3rem);
    margin-bottom: 1rem;
}


.slides {
    width: 70%;
    max-width: 600px;
    height: min(30rem, 80%);
    overflow: hidden;
    border: 4px solid var(--primary-black);
    position: relative;
    margin: 0 auto;
    background-color: var(--mini-blue);
    border: 4px solid var(--primary-black);
    color: var(--mini-yellow);
    border-radius: 10px;
    margin-bottom: 1rem;
    /* box-shadow: -4px 4px 3px var(--mini-yellow); */
  }

  .slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .slide {
    min-width: 100%;
    transition: transform 0.5s ease;
  }

  .slide img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Navigation Buttons */
  .navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 7px;
  }

  .nav-button {
    background-color: var(--primary-black);
    color: var(--light-yellow);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
  }

  .nav-button:hover {
    background-color: var(--mini-yellow);
    border: 2px solid var(--primary-black);
  }

.waitlist {
    margin: 0 auto;
    
}

button.waitlist {
    display: flex;
    font-family: var(--mini-big-font);
    font-size: 1.5rem;
    background-color: var(--mini-yellow);
    border: 2px solid var(--primary-black);
    border-radius: 10px;
    box-shadow: -4px 4px 2px var(--mini-blue);
    padding: min(1rem, 1.5rem, 2rem);
    cursor: pointer;
    text-decoration: none;
    color: var(--primary-black);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.mint a {
    text-decoration: none;
}



button.waitlist:hover {
    color: var(--mini-yellow);
    background-color: var(--mini-blue);
    box-shadow: -4px 4px 2px var(--mini-yellow);
    transform: scale(1.05);   
}

.details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--mini-small-fonts);
    width: auto;
    height: auto;
    background-color: var(--primary-black);
    gap: 2rem;
    border-radius: 20px;
    padding: 2rem;
    margin-top: rem;
    margin: 5rem 2rem;
    color: var(--mini-yellow);
}
.details p {
    font-family: var(--mini-small-fonts);
    font-size: clamp(1rem, 0.818rem + 0.91vw, 1.2rem);
}
.details h3 {
    display: inline;
    font-family: var(--mini-big-font);
    font-size: clamp(1.3rem, 0.918rem + 1vw, 1.7rem);
    color: var(--mini-blue);
}

button.c-soon {
    display: flex;
    font-family: var(--mini-small-fonts);
    font-size: min(8px, 11px);
    background-color: lightgreen;
    border: 1px solid rgb(30, 243, 30);
    padding: min(2px);
    border-radius: 40px;
}

/*///MEDIA BREAK///*/

@media (max-width: 768px) {
    .hero-content p {
        font-size: 1.2rem;
        margin: 1.5rem;
    }

    .mini-img {
        position: relative;
        display: flex;
        flex-direction: column; 
        justify-content: flex-start; /* Align vertically as needed */
        align-items: center; /* Center the images horizontally */
        gap: 1.5rem;
    }

    img.nft-img {
        position: absolute;
        top: -80px;
        left: 50%;
        transform: translateX(-50%); /* Adjust for perfect horizontal centering */
        max-width: 1; /* Responsive sizing */
        height: auto;
    }

    img.weed-boy {
        position: absolute;
        top: 500px; 
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Adjust for perfect horizontal centering */
        /* max-width: 100%;  */
        height: auto;
    }

    .mini-nft, .mini-community {
        width: 80%; 
        margin: 0; 
        padding: 1rem;
    }

    .mini-nft {
        margin-bottom: 5%;
        margin-top: 2rem;
    }
    .mini-community {
        margin-top: 40%;
    }

    .nft-community {
        margin: 1rem;
        flex-direction: column; /* Stack NFT sections vertically */
        gap: 2rem; /* Adjust spacing between sections */
    }

    .mini-benefit {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center; 
        height: auto;
        padding: 1rem;
        gap: 1rem; 
        margin-top: 4rem;
    }

    .benefit {
        order: 1;
        width: 100%;
    }

    .benefit h2 {
        font-size: 4rem;
        margin-bottom: 0.5rem;
    }

    .benefit p {
        font-size: 1.5rem;
        margin: 0.5rem 0;
    }

    .benefit ul {
        padding: 0;
        font-size: 0.9rem;
        list-style-position: inside;
        margin: 0.5rem 0; /* Add spacing below */
    }

    .benefit-img {
        overflow: auto;
        order: 2; /* Place the image after the benefit content */
        width: 100%; /* Set responsive width */
        max-width: 410px; /* Limit image size for smaller screens */
        border: 3px solid var(--mini-blue); /* Maintain border */
        border-radius: 10px;
        box-shadow: -4px 4px 2px var(--mini-blue);
    }

    button.a-faminion {
        order: 3; /* Place the button after the image */
        width: 100%;
        font-size: 1.2rem; 
        margin-top: 1rem;
    }

    footer {
        margin-top: 5rem;
    }

    .list {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {

    header {
        position: relative;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }

    header.logo {
        width: 10px !important;
        height: 35px;
    }

    .logo img {
        display: none;
    }
    

    header .menu {
        margin-right: 0.2rem;
        font-size: 1.7rem;
    }

    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-hanging {
        position: absolute;
        max-width: 100%; 
        height: auto;
        left: 9rem;
        /* margin: 0 auto; Center image */
    }

    .hero-content {
        margin-top: 15vw;
    }

    .hero-content p {
        margin: 0 2rem;
    }

    button.asa,.buy {
        margin: 0;
        gap: 2rem;
    }

    button.nft {
        font-size: 1.5rem;
    }
    button.dc {
        font-size: 1.5rem;
    }

    .cta-button {
        margin-bottom: 7rem;
        margin-top: 3rem;
        flex-direction: column;
        gap: 2rem;
       padding-top: 0;
        color: var(--primary-black);
    }

    .mini-img {
        position: relative;
        display: flex;
        flex-direction: column; 
        justify-content: flex-start; /* Align vertically as needed */
        align-items: center; /* Center the images horizontally */
        gap: 1.5rem;
    }

    img.nft-img {
        position: absolute;
        top: -100px;
        left: 50%;
        transform: translateX(-50%); /* Adjust for perfect horizontal centering */
        max-width: 1; /* Responsive sizing */
        height: auto;
    }

    img.weed-boy {
        position: absolute;
        top: 500px; 
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Adjust for perfect horizontal centering */
        /* max-width: 100%;  */
        height: auto;
    }

    .mini-nft, .mini-community {
        width: 100%; 
        margin: 0; 
        padding: 1rem;
    }

    .mini-nft {
        margin-bottom: 50%;
    }
    .mini-community {
        margin-top: 40%;
    }

    .nft-community {
        margin: 1rem;
        flex-direction: column; /* Stack NFT sections vertically */
        gap: 2rem; /* Adjust spacing between sections */
    }

    .mini-benefit {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center; 
        height: auto;
        padding: 1rem;
        gap: 1rem; 
        margin-top: 4rem;
    }

    .benefit {
        order: 1;
        width: 100%;
    }

    .benefit h2 {
        font-size: 3rem;
        margin-bottom: 0.5rem;
    }

    .benefit p {
        font-size: 1rem;
        margin: 0.5rem 0;
    }

    .benefit ul {
        padding: 0;
        font-size: 0.9rem;
        list-style-position: inside;
        margin: 0.5rem 0; /* Add spacing below */
    }

    .benefit-img {
        overflow: auto;
        order: 2; /* Place the image after the benefit content */
        width: 90%; /* Set responsive width */
        max-width: 300px; /* Limit image size for smaller screens */
        border: 3px solid var(--mini-blue); /* Maintain border */
        border-radius: 10px;
        box-shadow: -4px 4px 2px var(--mini-blue);
    }

    button.a-faminion {
        order: 3; /* Place the button after the image */
        width: 100%;
        font-size: 1.5rem; 
        margin-top: 1rem;
    }

    footer {
        margin-top: 5rem;
    }

    .list {
        flex-direction: column;
        gap: 1rem;
    }

    
}