@import url('/ToonLand/fonts/AnisaSans.ttf');

@font-face {
    font-family: myFirstFont;
    src: url(/fonts/AnisaSans.ttf);
}

@font-face {
    font-family: mySecondFont;
    src: url(/fonts/sassoon/SassoonSansStd-Medium.otf);
}


.logo-meet-char a {
    background-image: url('/Assets/typography_toonland.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 15%;
    position: absolute;
    z-index: 903245;
}

.background {
    background-image: url('/Assets/bg.png');
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 400px;
    position: absolute;
    z-index: -8665;
}

.meet-typo {
    background-image: url('/Assets/typo-meet-8.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 100%;
    height: 10%;
    top: 20rem;
}

.cards {
    font-family: myFirstFont;
    padding-top: 5rem;
    /* padding: 7rem 7rem 0rem 7rem; */
}

.btn {
    background-color: #CBE0F4;
    color: black;
    width: 100%;
}

.background-book {
    position: absolute;
}

.books {
    padding-top: 4rem;
    padding-left: 3rem;
}

.books-stack {
    padding: 5rem;
}

.cards-navigation-img {
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .logo-meet-char a {
        width: 100%;
        height: 5%;
        position: absolute;
        z-index: 903245;
    }

    .logo-meet-char a {
        width: 100%;
        height: 5%;
        position: absolute;
    }

    .cards {
        /* padding: 1rem; */
        width: 100%;
        justify-content: center;
    }

    /* .books {
        width: 100%;
        margin: 0%;
        padding: 0%;
        padding-top: 2rem;
        padding-left: 1rem;
    } */

    .books-stack {
        width: 10rem;
        height: 100rem;
        color: brown;
        padding: 2rem;
    }

    /* .background-book {
        background-image: url('/Assets/book-subscribe-8.png');
        background-size: cover;
        position: absolute;
    } */

    .meet-typo {
        position: absolute;
        width: 100%;
        height: 10%;
        top: 5rem;
    }

    .cards-navigation-img {
        width: 80%;
    }

}

/* Apply different styles for screens smaller than 480px */
@media only screen and (max-width: 480px) {
    .logo-meet-char a {
        height: 7%;
    }

    .meet-typo {
        height: 7%;
    }

    .cards {
        padding: 0.2rem;
        padding-top: 4rem;
    }

    .btn {
        font-size: 0.8rem;
    }

    .books {
        padding-top: 1rem;
        padding-left: 1rem;
    }

    .books-stack {
        padding: 1rem;
    }

    .cards-navigation-img {
        width: 100%;
    }

    .background {
        background-image: url('/Assets/mobile-meet-image_2.png');
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: auto;
        position: absolute;
        z-index: -8665;
    }

}