/* header content */
.spotify-header-content {
    padding-top: 40px;
    display: flex;
    flex-direction: row;
    gap: 50px;
    max-width: var(--container-body-width);
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.spotify-header {
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 47px;
}

.header-logo {
    display: flex; 
    align-items: center; 
    flex-direction: row; 
    gap: 20px;
    padding-top: 20px;
}


.spotify-text {
    display: flex;
    flex-direction: column;   
    padding-top: 150px;
    gap: 10px;
    max-width: 600px;
}

.spotify-description {
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 19px;
    padding-top: 20px;
    line-height: 28px;
}


@media screen and (max-width: 1500px) {
    .spotify-header-content {
        width: 90%;
    }
}

@media screen and (max-width: 1200px) {
    .spotify-header-content {
        gap: 15px;
    }
    .spotify-header {
        font-size: 37px;
    }
    .spotify-description {
        font-size: 18px;
    }
}

@media screen and (max-width: 900px) {
    .spotify-header-content {
        flex-direction: column;
        align-items: center;
    }
    .header-logo {
        padding-top: 20px;
    }
    .spotify-text {
        padding-top: 40px;
    }
    .spotify-description {
        padding-top: 20px;
    }
}

/* page content */

.spotify-page-content {
    padding: 0px 20px;
}

.spotify-verified {
    width: 40px;
}

@media screen and (max-width: 991px) {
    .spotify-verified {
        width: 30px;
    }
}


@media screen and (max-width: 767px) {
    .item-description.bold.spotify-item-description {
        font-size: 24px;
    }
}


/* Adjusting the sign up form depending on screen size */
@media screen and (max-width: 515px) {
    .dk__.spotify {
        width: 380px;
    }
}

@media screen and (max-width: 450px) {
    .dk__.spotify {
        width: 350px;
    }
}

@media screen and (max-width: 400px) {
    .dk__.spotify {
        width: 330px;
    }
}

@media screen and (max-width: 350px) {
    .dk__.spotify {
        width: 300px;
    }
}

@media screen and (max-width: 325px) {
    .dk__.spotify {
        width: 270px;
    }
}