body {
    height: 100%;
}

main {
    margin: 0 auto;
    align-items: center;
}

h1 {
    font-size: 1.8rem;
    text-align: center;
    color: var(--text-color-light);
}

/* QUOTES */
.quotes {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    width: 100%;
    margin: 0 auto;
}

.quotes-wrapper {
    min-height: 5rem;
    max-height: none;
    overflow: hidden;
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: var(--accent-color);
    margin: 0 auto 1.25rem;
}

.quote-id {
    font-size: 0.9375rem;
    color: var(--primary-color);
}

.quote-id a {
    color: var(--primary-color);
}

.quote-id a:hover {
    cursor: pointer;
}

.quote-text {
    font-size: 1.125rem;
    margin: 0.625rem 0;
    color: var(--text-color-dark);
}

.quote-user {
    font-size: 1rem;
    color: var(--text-color-dark);
    text-align: right;
}

/* SEARCH BAR */
.error-message {
    margin: 0 auto;
    color: var(--text-color-light);
}

.search-bar {
    padding: 0.3125rem 0.9375rem;
    display: flex;
    align-items: center;
    background: var(--accent-color);
    border-radius: 1.875rem;
    width: 100%;
    margin: 0 auto 3.125rem;
}

.search-bar input {
    background: transparent;
    border-radius: 1.875rem;
    outline: none;
    border: none;
    width: 100%;
    padding: 0.625rem;
    font-size: 1rem;
}

.search-icon {
    width: 1.625rem;
    margin-right: 0.3125rem;
}

.cancel-icon {
    width: 1.125rem;
    margin-right: 0.3125rem;
}

svg .color {
    fill: var(--primary-color);
}

.search-bar button {
    width: 1.875rem;
    height: 100%;
    background: none;
}

/* LOAD MORE BUTTON */
#loadMoreButton {
    background: var(--accent-color);
    padding: 0 1.25rem;
    height: 2.5rem;
    border-radius: 1.875rem;
    font-size: 1.125rem;
    width: 9.375rem;
    margin: 0 auto 1.25rem;
    color: var(--primary-color);
    font-weight: 550;
}

/* BACK TO TOP */
.backToTop {
    position: fixed;
    right: 3.125rem;
    bottom: 3.125rem;
    text-decoration: none;
    display: none;
}

.backToTop button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9375rem;
    border-radius: 1.25rem;
}

.backToTop svg {
    width: 1.5625rem;
}

/* Mobile phones (small 320) */
@media (min-width: 320px) {
    main {
        width: 85%;
    }

    .search-bar {
        max-width: 20rem;
    }

    .quotes-wrapper {
        width: 21.25rem;
        min-height: 5rem;
    }

    .backToTop button {
        box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2);
    }
}

/* 2 quotes next to each other */
@media (min-width: 600px) {
    .search-bar {
        max-width: 31.25rem;
    }

    .quotes-wrapper {
        width: 40%;
    }
}

/* Desktop 3 quotes next to each other */
@media (min-width: 1400px) {
    .quotes-wrapper {
        width: 21.25rem;
    }

    .search-bar {
        max-width: 37.5rem;
    }

    .backToTop button {
        box-shadow: none;
    }
}