* {
    margin: 0;  
    padding: 0;
    box-sizing:border-box;
}

:root {
    /* colors */    
    --clr-light: #adb9a7; 
    --clr-dark: #30343f;  
    --clr-primary: #03256C;
    --clr-paragraph: #edeaf7;/*#434345;*/
    --clr-accent: #cb793a; /* #8c86aa; */    
    /*--clr-banner: #a7b4a1;*/
    
    --clr-header: #adb9a7; /*#34542b;*/
    --clr-headings: var(--clr-primary);
    --foreground: var(--clr-light);
    --background: var(--clr-dark);
    /*--foreground: var(--clr-dark);
    --background: var(--clr-light);*/
    --clr-anchor:  #d4e4bc;
    
    /* fonts */
    --heading1-font: 'Lobster', sans-serif;
    --heading2-font: "IM Fell Double Pica SC", serif;
    --heading-font: "IM Fell DW Pica", serif;
    --paragraph-font: 'Poppins', sans-serif;    
}

body {
    font-family: var(--paragraph-font);
    margin: 0 auto;    
    font-size: 0.8rem;
    width: 100%;
    Display: block;
    padding: 0.5rem;    
    background-color: var(--background);
}

header {
    background-color: var(--clr-header);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


h1 {
    font-family: var(--heading1-font);
    color: var(--clr-light);
    text-align: center;
    font-size: 3rem;
}

h2 {
    color: var(--clr-headings);
    font-family: var(--heading2-font);
}

h3, h4, h5, h6 {
    color:var(--clr-headings);
    font-family: var(--heading-font);    
}

p {
    color: var(--clr-paragraph);
    padding: 1.1rem; 
    /* change in large view? */
}

a {
    text-decoration: none;
    color: var(--clr-anchor);
}
/* -----------Navigation------------*/
.navigation {    
    display: flex;
}

.navigation ul {
    display:flex;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.navigation li {
    margin: 0;
}

.navigation a {
    text-decoration: none;
    display: inline-block;
    padding: .75rem 1rem;
}

.nav-links,
.logout-button {
    color: var(--clr-dark);
    padding: 1.5rem;
    font-size: 1.1rem;
}

.active
{    
    background-color: var(--background);
	color: var(--foreground);
}

.logout {
    display: inline-block;
}

.logout-button {  
    background-color: rgb(0, 0, 0, 0);
    
	
    border: none;
}

.logout-button:hover {
    background-color: var(--background);
    color: var(--foreground);
    opacity: .85;  
    border-radius: 10px;
}



/*---------Carousel---------------*/
.carousel {
    display: flex;
    align-items: stretch;
    /* width: 100%;  */
    overflow-x: auto;
    margin: 2rem 4rem;
    display: flex;
    gap: .9em;
    padding-inline: 1rem;
    scroll-behavior: smooth;
    
    anchor-name: --carousel; /*Name has to start with two dashes*/  
    /*Need anchor-name to use position:fixed on buttons*/
    scroll-snap-type: x mandatory;
    /*so cards can snap to start at beginning of next card during scroll*/
    /*add scroll-snap-align to card for snapping*/
    scroll-marker-group: after; /*Scroll markers for bottom dots for the carousel*/


}

/*Scroll markers for bottom dots for the carousel*/
.carousel::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: 1em;
}

/*Scroll markers for bottom dots for the carousel*/
.card::scroll-marker {
    content: '';
    height: 1em;
    width: 1em;
    background-color: var(--clr-anchor);
    border-radius: 50%
}

.card::scroll-marker:target-current {
    background-color: var(--clr-accent);
}

.carousel::-webkit-scrollbar {
    display: none;
}

/* This styles both buttons, in the way they look */
.carousel::scroll-button(right), .carousel::scroll-button(left) {
    content: '→';
    border: none;
    background-color: var(--clr-accent);
    font-family: Consolas;
    font-size: 3rem;
    color: white;
    height: 65px;
    width: 65px;
    border-radius: 50%;
    padding-bottom: 0.1em;
    cursor: pointer;
    position: fixed;
    position-anchor: --carousel; 
    /*Position and position-anchor links this to .carousel or anchor-name delcaration*/
    /*Look at position-area*/
    translate: -50% /* moves arrows or content*/
}

/*  left scroll button*/
.carousel::scroll-button(left) {
    content: '←';
    position-area: left center;
    translate: 50%;
}

/*  right scroll button*/
.carousel::scroll-button(right) {
    position-area: right center;
    translate: -50%;
}
/* If you don't style the disabled, it will disable itself with defaults */
.carousel::scroll-button(right):disabled, .carousel::scroll-button(left):disabled {
    opacity: 0.5;
    cursor: auto;
}

.card {    
    /* max-width: 100%; */
    /* aspect-ratio: 1 / 1; */       
    background-color: var(--clr-anchor);
    padding: 1em;
    border-radius: 0.6em;
    text-align: center;
    align-content: center;    
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 0 0 clamp(320px, 22vw, 360px);
    scroll-snap-align: start;
}

.card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    padding: .75rem;
    border-radius: 1em;
}

.card ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

.card p {
    color: var(--clr-primary)
}


/* ---------Playlist Page----------------*/
.playlist-name {
    color: var(--clr-primary);
    font: var(--heading2-font);
}

/*---------Playlist View Page------------*/

.playlist-container {
    display: flex;
    flex-direction: column;
}

.playlist-album {
    background-color: var(--clr-anchor);
    padding: 1em;
    border-radius: 0.6em;
    text-align: center;
    align-content: center;    
    display: grid;
    place-items: center;
    /* flex-direction: column; */
}

.playlist-album-frame {
    padding: 0.5rem;
    border-radius: 15px;
}

.playlist-album-frame img {
    overflow-x: hidden;
    max-width: 100%;
}

.track-card {
    /* opacity: 0.5; */
    /* background-color: var(--clr-light); */
    padding: 3rem;
       
}
.track-card ul {
    list-style: none;
}

.track-card li {
    color: var(--clr-dark);
    /* opacity: 0.75; */
    background-color: var(--clr-accent);
    padding: 3rem;
    font-size: large;
    font-weight: 700;
    margin: 10px; 
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* .track-list-audio {
   
} */
/* ------------About Page----------------*/
/* .attribute-container {
    display: flex;
    
} */

.attribute img {
    width: 15%;
    height: 15%;
    object-fit: contain;
}

.attribute h2,
.attribute a {
    color: var(--clr-light);
}

/*-------------form--------------------------------*/

.form-with-validation {
    font-size: 1rem;
    padding: 1rem;
    display: flex;
    flex-flow: column;
    gap: 1rem;    
    color: var(--clr-paragraph)
}

.form-with-validation div {
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}

.form-with-validation input {
    padding: 0.25rem;
    max-width: 300px;
}

.form-submit {
    padding: 0.5rem;
    border-radius: 10px;
    width: 125px;
}

/* helptext and errorlist classes are default for forms, 
provided by Django built in form rendering*/
.helptext {
    font-size: 1rem;
    margin-left: 1rem;
}

.helptext ul {
    list-style-type: none;
}

.errorlist {
    color: red;
    margin-left: 2rem;
}

.errorlist li::marker {
    content: '🚨 ';
}



/* ------------------footer---------------------- */

footer {
    display: block;
    background-color: var(--clr-header);
    /* width: 100%; */
}

footer p {
    color: var(--clr-light)
}


/*________________Mobile view*/
@media(max-width: 500px) {
    .card {
        flex: 0 0 100%;
    }

    /* small view navigation */
    /* .navigation {
        border-bottom: .5rem solid var(--clr-paragraph); 
    } */

    .navigation ul {
        list-style: none;
        display: flex;
        padding: 2.5rem 1rem;        
        flex-direction: column;
    }

    .navigation ul li {
        flex: 1 1 100%;
    }

    .navigation a {
        display: none;
        padding: .5rem;
        font-weight: 400;
        font-size: .9rem;
       
        text-align: center;    
    }

    .navigation a:hover {
        background-color: var(--clr-light);
        
        font-weight: 700;
    }       
        
    
    #menu {
        font-size: 1.5rem;
        border: 1px solid rgba(0,0,0,.3);
        padding: 3px 7px 6px;
        background-color: var(--background);
        color: var(--foreground);
        position: absolute;
        top: 0.5rem;
        right: 0;
        z-index: 1;
    }

    #menu::before {
        content: "☰";
    }

    #menu.open::before {
        content: "✖";
    }

    .track-list {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    .track-list-audio audio {
        /* width: 50%; */
        max-width: 100%;
    }


    /* when the button is clicked - the open class is toggled (added/removed) */
    .open a {
        display: block;
    }


}