@font-face {
    font-family: MonoRegular;
    src: url("/EXTERNAL/BrutalistMono.ttf");
}

@font-face {
    font-family: MonoBold;
    src: url("/EXTERNAL/BrutalistMono-Bold.ttf");
}


::-moz-selection { /* Code for Firefox */
color: rgb(48, 43, 43);
background: #e8b86f;
}

::selection {
color: rgb(48, 43, 43);
background: #e8b86f;
}


/* width */
::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: #204b6a; 
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #23a4b8; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #23a4b8; 
}





html {
    padding: 15px;
    background-color: #204b6a;

    box-sizing: border-box;

    font-family: MonoRegular;
}


body {
    margin: 0px;
    padding: 0px;

    padding-bottom: 40px;
    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    
    gap: 25px;
    color: #23a4b8;
} 

span {
    line-height: 170%;
}

a {
    color: inherit;
}


























.content-width {
    width: 100%;
    max-width: 650px;
}

.hacker-container {
    border: solid 2px #23a4b8;
    box-sizing: border-box;
    position: relative;
    padding: 15px;

    display: flex;
    align-items: center;
} .hacker-container::before {
    position: absolute;
    font-size: medium;

    background-color: #204b6a;
    color: #23a4b8;

    top: -10px;
    left: 15px;
    padding: 0px 5px;
}
.img-icon {
    max-height: 25px;
    padding-left: 10px;
    padding-right: 5px;
}

.button {
    border-bottom: solid 2px #23a4b8;
    padding: 10px 7px 5px 0px;

    text-decoration: none;
    text-transform: capitalize;
} .button span {
    display: flex;
    align-items: center;
    gap: 5px;
    transition: transform 200ms;
}

.button:hover span{
    transform: translateY(-2px);
    transition: transform 200ms;
}

.sub-hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 75px;
}

.sub-hero-heading {
    position: relative;
    font-size: 30px;
}

.availability-container {
    
    height: 25px;
    flex-grow: 1;
    border: 2px solid #23a4b8;
    padding: 3px;

    position: relative;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    
    gap: 5px;

} .availability-container div {
    height: 100%;
    width: 100%;

    background-color: #23a4b8;
} .availability-container div.empty {
    display: none;
} .availability-container div.counter {
    background-color: #204b6a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-row {
    display: flex;
    gap: 15px;
}

.button-box {
    display: flex;
    text-wrap: nowrap;
    align-items: center;

    text-decoration: none;

    cursor: pointer;
    background-color: #23a4b82c;

    transition: transform 200ms;
} .button-box:hover span {
    transform: translateY(-2px);
    transition: transform 200ms;
} .button-box span {
    transition: transform 200ms;
}

.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.price-box {
    text-wrap: nowrap;
} .price-box::before {
    content: "sol";
}










#nav-container {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    font-size: 14px;
}




#hero-container {
    display: flex;
     /* display: none; ! ! ! ! ! ! ! ! */
    flex-direction: column;
    align-items: center;

    padding: 55px 0px;

} #hero-container::before {
    content: "Lytra 1.0.0";
}


#hero-heading {
    font-family: monoRegular;
    /* yellow: #23a4b8 */
    color: #23a4b8;
    font-size: 70px;

    position: relative;

    /* text-shadow: 2px 2px #ffffff; */
} #hero-heading::after, .sub-hero-heading::after {
    
    position: absolute;
    font-size: small;
    right: 5px;
    bottom: -5px;
}

#hero-heading::after {
    content: "v.1.0.0";
}





#second-container::before {
    content: "intro"
}



#third-container::before {
    content: "compatibility"
}
#third-container span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}




#fourth-container::before {
    content: "pricing"
}




#buynow-hero-container::before {
    content: "OUT NOW";
}
#buynow-first-container::before {
    content: "intro";
}
#buynow-second-container::before {
    content: "includes";
}










#reseller-hero-container::before {
    /* content: "coming october 1st" */
}

#reseller-title::after {
    content: "";
    bottom: -10px;
}
#reseller-first-container::before {
    content: "intro";
}

#reseller-second-container::before {
    content: "availability";
}
#reseller-second-container {
    display: flex;
}