:root {
    --accent-color: #1FC667;
    --accent-color-active: #189a51;

    --accent-color-hover: #38e081;

    --light-green: #EDFCF4;

    --bf-color: #E1FF00;
    --bf-color-active: #90a207;
    --bf-color-hover: #c3ff00;
    font-size: 24px;
}

.font-sm {
    font-size: 0.8rem;
}

.text-light-green {
    color: var(--light-green);
}

.bg-light-green {
    background: var(--light-green);
}

.bg-accent {
    background: var(--accent-color);
}

.text-accent {
    color: var(--accent-color);
}

.btn-accent {
    background: var(--accent-color);
}

.btn-accent:hover {
    background: var(--accent-color-hover);
}

.btn-accent:active {
    background: var(--accent-color-active) !important;
}

.btn-bf-color {
    background: var(--bf-color);
}

.btn-bf-color:hover {
    background: var(--bf-color-hover);
}

.btn-bf-color:active {
    background: var(--bf-color-active) !important;
}

.spreadsheet-bg {
    background-image: url("./assets/images/Background.png");
}

.yt-video {
    width: 1000px;
    height: calc(1000px * 9 / 16);
}

.container {
    max-width: 1136px;
}

.small-container {
    max-width: 805px;
}

.tiny-container {
    max-width: 460px;
}

.fs-7 {
    font-size: 0.70rem !important;
}

.fs-8 {
    font-size: 0.60rem !important;
}

.btn {
    font-size: 0.70rem !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

.bg-gray {
    background: #272A29;
}

.bg-dark-gray {
    background: #1E1E1E;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    grid-auto-flow: row;
}

.grid-max-col-2 {
    grid-template-columns: auto auto;
}



.orderedList {
    counter-reset: item;
    padding: 0;
}

.listLine {
    display: block;
    font-weight: 400;
    height: auto;
    margin: 0;
}

.listLine:before {
    content: counters(item, ".") " ";
    counter-increment: item
}

.listLineTop::before {
    content: "";

    counter-increment: item
}

ol summary::before {
    content: "Módulo " counters(item, ".") " - ";

}

.multiply {
    mix-blend-mode: multiply;
}

.businesschart {
    max-width: 690px;
}


.countdown-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}



#countdown {
    display: flex;
    gap: 1rem;
}

#countdown div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 0.3rem 1rem;
    background: var(--bf-color);

    color: #333;
    border-radius: 8px;
}

#countdown span {
    font-size: 2rem;
    font-weight: bold;
    font-family: monospace;
}

#countdown small {
    font-size: 0.9rem;
    text-transform: uppercase;
}

#BF-Hero {
    color: var(--bf-color);
}

.text-bf-color {
    color: var(--bf-color);

}

.bg-bf-color {
    background-color: var(--bf-color);

}

#BF-Text h2 {
    line-height: 0.9;
}

#BF-Hero div {
    line-height: 0.9;
}

#BF-Text :first-child {
    font-size: 2.1rem !important;
}

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


    #BF-Text :first-child {
        font-size: 1.8rem !important;
    }
}

@media only screen and (max-width: 980px) {
    .grid-container {
        grid-template-columns: auto auto;
    }

    .yt-video {
        width: 800px;
        height: calc(800px * 9 / 16);
    }


}

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

    .grid-container,
    .grid-max-col-2 {

        grid-template-columns: auto;
    }

    .yt-video {
        width: 340px;
        height: calc(340px * 9 / 16);
    }

    #countdown span {
        font-size: 1.3rem;
    }

    #countdown small {
        font-size: 0.5rem;
    }

    #countdown div {

        padding: 0.3rem 0.6rem;
    }



    summary {
        font-size: 0.8rem;
    }

    .listLine {
        font-size: 0.7rem;

    }

    #BF-Text :first-child {
        font-size: 1.6rem !important;
    }

    #warranty {
        width: 300px;
    }

    #BF-Hero div {
        width: 50%;
    }

    #BF-Hero {
        justify-content: space-around;
    }
}