/* Treasures Untold - home app CSS styling */
/* Importing fonts for marquee */
@import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&family=Henny+Penny&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jim+Nightshade&family=Macondo+Swash+Caps&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mystery+Quest&family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&family=Tulpen+One&display=swap');

#homepage-container {
    background-color: var(--tu-mid-grey);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.welcome-container,
.new-items-container,
.featured-items-container {
    background-color: var(--tu-off-white);
}

.featured {
    font-size: 2rem;
}

/* Set fonts for classes. */
.font-tangerine {
    font-family: 'Tangerine', cursive;
}

.font-tulpen {
    font-family: 'Tulpen One', cursive;
}

.font-henny {
    font-family: 'Henny Penny', cursive;
}

.font-mystery {
    font-family: 'Mystery Quest', cursive;
}

.font-caesar {
    font-family: 'Caesar Dressing', cursive;
}

.font-jim {
    font-family: 'Jim Nightshade', cursive;
}

.font-macondo {
    font-family: 'Macondo Swash Caps', cursive;
}

.font-parisienne {
    font-family: 'Parisienne', cursive;
}

.as-featured-in-container {
    background-color: var(--tu-red);
    padding: 10px 0px;
    height: fit-content;
}

.as-featured-in-container h2 {
    font-size: 1.2rem;
}

.btn-enter {
    max-width: 200px;
}

/* Media queries for larger screens. */
@media screen and (min-width: 768px) {
    #new-items-text {
        justify-content: right;
    }

    #new-items-images {
        justify-content: left;
    }
}