* {
    margin: 0;
    padding: 0;
    font-family: system-ui;
}

html {
    min-width: 100dvw;
    width: 100dvw;
    max-width: 100dvw;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

:root {
    --small-font-size: 0.8rem;
    --medium-font-size: 1.5rem;
    --large-font-size: 3.5rem;
    --reduced-padding: 0.8rem;
    --standard-padding: 1.5rem;
    --yellow: #f8c424;
    --green: #b8dc4c;
    --dark-blue: #20242c;
    --darker-blue: #101414;
    --dim-font-color: #e3e3e3;
    --small-border-radius: 0.3rem;
    --large-border-radius: 0.6rem;
}


.main-section-slogans {
    white-space: nowrap;
}

section {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-width: 100dvw;
    width: 100dvw;
    max-width: 100dvw;
    padding: 3rem 0;
}

.section-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 90%;
    height: 90%;
    gap: 5rem;
}

button {
    all: unset;
    font-weight: 600;
    cursor: pointer;
}

.tracker-does {
    position: relative;
    padding-left: 3rem;
}

    .tracker-does::before {
        content: "+";
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2rem;
        background-color: var(--green);
        border-radius: var(--large-border-radius);
        font-size: 14px;
        color: #fff;
        font-weight: 600;
    }

.tracker-does-bright {
    background-color: #30343c;
    border-radius: var(--large-border-radius);
    width: 90%;
    max-width: 90%;
    transition: ease-in 0.16s;
    padding: var(--standard-padding) 4rem;
    padding-right: 0;
}

    .tracker-does-bright::before {
        margin-left: var(--standard-padding);
        color: #000;
    }

    .tracker-does-bright:hover {
        filter: brightness(1.2)
    }

.card {
    display: flex;
    flex-direction: column;
    padding: var(--standard-padding);
    gap: var(--reduced-padding);
    border-radius: var(--large-border-radius);
    transition: ease-in 0.16s
}

    .card p {
        font-size: 0.9rem;
    }

.zoom-card:hover {
    transform: scale(1.05);
}

.bright-card {
    max-width: 35rem;
    background-color: #30343c;
    border: 1px solid #555;
}

    .bright-card b {
        font-size: 1.2rem;
    }

    .bright-card p {
        font-size: 1rem;
    }

    .bright-card:hover {
        filter: brightness(1.2)
    }

    .bright-card b {
        font-size: 1.2rem;
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--reduced-padding);
    }

        .bright-card b::before {
            content: "";
            width: 1.2rem;
            height: 1.2rem;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="%2360d48c"/><path d="M9 16.17l-3.88-3.88a1 1 0 00-1.42 1.42l4.59 4.59a1 1 0 001.42 0l9-9a1 1 0 00-1.42-1.42L9 16.17z" fill="white"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
        }

    .bright-card p {
        font-size: 1rem;
        margin-left: calc(1.2rem + var(--reduced-padding));
    }

.whatsinside-card {
    min-width: 20rem;
    max-width: 20rem;
    background-color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

    .whatsinside-card:hover {
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    }

.tracker-free-for::before {
    content: ".";
    align-items: center;
    font-size: 2rem;
    margin-right: 0.5rem;
}

.tracker-free-for-yellow::before {
    color: var(--yellow);
}

.tracker-free-for-blue::before {
    color: var(--dark-blue);
}

a {
    all: unset;
    cursor: pointer;
}


@media (max-width: 450px) {
    .tracker-does-bright {
        width: unset;
    }
}

@media (max-width: 600px) {
    :root {
        --large-font-size: 3rem;
        --reduced-padding: 0.4rem;
        --standard-padding: 1.1rem;
    }

    .info-buttons {
        justify-content: center;
    }
}

@media (max-width: 800px) {
    .footer-separator {
        display: none;
    }

    footer{
        flex-direction:column;
    }

    .main-section-slogans {
        white-space: normal;
    }
}

@media (max-width: 1200px) {
    .main-section-floating-card {
        visibility: hidden;
    }
}