@import "colors.css";

:root {
    --card-width: 300px;
}

.overzicht-title {
    color: var(--wit);
}

.share-title {
    color: var(--wit);
    font-size: 2rem;
}

.share-subtitle {
    color: var(--wit);
    font-size: 1.5rem;
}

.overzicht-subtitle {
    color: var(--licht-grijs);
}

.overzicht-browser-container {
    display: grid;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    align-items: end;
    width: 100%;
    align-self: center; /*moet flex-end zijn als die aan de rechter kant moet blijven voor een sidebar ofzo*/
    margin: 50px;
}

.overzicht-song-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 1rem;
}

.overzicht-song-icon {
    width: 8rem;
    height: 8rem;
    border-radius: 25px;
    overflow: hidden;
    object-fit: cover;
}

.overzicht-song-details {
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
}

.overzicht-song-buttons {
    display: flex;
    flex-direction: row;
}

.overzicht-song-button {
    margin-right: 1rem;
    background-color: var(--secondary) !important;
    color: var(--wit) !important;

    font-size: 1rem !important;
    margin-top: 1rem;
}

.overzicht-song-button:hover {
    margin-right: 1rem;
    background-color: var(--tertiary) !important;
    color: var(--wit) !important;
}

.overzicht-main-container {
flex-direction: column;
}



.overzicht-song-title {
    font-size: 1.5rem;
}

.overzicht-song-artist {
    font-size: 1.2rem;
}

.overzicht-song-votes {
    font-size: 1rem;
}

.image-and-description-container {
 display: flex;
 flex-direction: row;
}

.link-form-container {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.error-page-container {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}