:root {
    /* ------------------------------- */
    /* Color Palette */
    /* ------------------------------- */
    
    /* Primary Colors */
    --color-primary: #3A54DE;
    --color-primary-hover: #F3A22A;
    --color-white: hsla(0, 0%, 100%, 1);;
    
    /* Secondary Colors */
    --color-secondary: #B0B0B0;
    --color-text: black;
    --color-text-light: white;
    --color-link: #378EB4;
    
    /* Background Colors */
    --color-bg: #fff;
    --color-bg-light: #EEEEEE;
    --color-popup-bg: rgba(0, 0, 0, 0.7);
    --bg-image-purple: linear-gradient(hsla(271, 65%, 27%, 1), hsla(226, 58%, 18%, 1));
    --bg-image-blue: linear-gradient(to bottom, hsla(196, 47%, 48%, 1), hsla(197, 61%, 28%, 1));
    --bg-image-playlist: linear-gradient(hsla(229, 60%, 61%, 1), hsla(242, 77%, 19%, 1));

    --bg-story-dark: linear-gradient(to bottom, hsla(280, 100%, 12%, 1), hsla(270, 49%, 34%, 1));

    
    /* Log-in */
    --color-login-bg: #378DB3;
    --color-login-bg-hover: #2a6d91;
    --color-login-input-bg: #F0F0F0;
    --color-login-input-text: #535353;

     --color-link: #378EB4;
    --color-bg-light: var(--color-bg-light);
    --color-white: #fff;
    --color-popup-bg: rgba(0, 0, 0, 0.6);
    --color-login-bg: #378DB3;
    --color-login-bg-hover: #2a6d91;
  
    /* ------------------------------- */
    /* Spacing */
    /* ------------------------------- */
      
    --color-text: white;
    --padding-small: .8rem;
    --padding-medium: 1rem;
    --padding-large: 2rem;
    --gap-small: .3em;
    --gap-medium: .6em;
    --popup-width: 25em;
    --popup-height: 31.25em
    
    --space-xs: 0.25em;
    --space-sm: 0.5em;
    --space-md: 1em;
    --space-lg: 2em;
    
    /* ------------------------------- */
    /* Font Sizes */
    /* ------------------------------- */
    
    --font-size-xs: 0.75em;
    --font-size-sm: 0.875em;
    --font-size-md: 1em;
    --font-size-lg: 1.25em;
    --font-size-xl: 1.5em;
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    
    /* ------------------------------- */
    /* Dimensions */
    /* ------------------------------- */
    
    --article-width: 20em;
    --article-height: 4.5em;
    --article-width-large: 22em;
    --article-height-large: 5em;
    --article-height-xlarge: 5.5em;
    --image-max-width: 4em;
    --image-min-height: 4em;
    --flag-height: 1.12em;
    --flag-width: 1.12em;
    
    /* ------------------------------- */
    /* Grid Layout */
    /* ------------------------------- */
    
    --grid-columns: repeat(5, 1fr);
    --grid-rows: repeat(3, 1fr);
    --grid-gap: 1em;
    
    /* ------------------------------- */
    /* Borders & Radius */
    /* ------------------------------- */
    
    --border-radius: .5em;
    --border-radius-m: 1em;
    --border-width: 1px;
    
    /* ------------------------------- */
    /* Button Styles */
    /* ------------------------------- */
    
    --button-padding: 0.75em 1.5em;
    --button-border-radius: var(--border-radius);
    --button-font-size: var(--font-size-sm);
    --button-blue: hsl(200, 52%, 46%);
    --button-darker-blue: hsl(200, 49%, 26%);
    --button-grey: hsl(0, 0%, 75%);

    /* ------------------------------- */
    /* Hover States */
    /* ------------------------------- */
    
    --hover-opacity: 0.8;
    --hover-background-color: var(--color-primary-hover);
    --hover-border-color: #f0f0f0;
  }
  
  

*, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    list-style: none;
}

a{
    text-decoration: none;
    color: inherit;
}
ul{
    list-style: none;
}

h1{
    font-size: 1.375em;
    font-weight: 600;
}

h2{
    font-size: 1.25em;
    font-weight: 600;
}

h3 {
    font-size: .75em;
    font-weight: 400;
}

p {
    font-size: 1em;
    font-weight: 400;
}

.medium-title {
    font-size: .75em;
    font-weight: 600;
}

.small-text {
    font-size: .5em;
    font-weight: 400;
}

/* View transitions */
@supports (navigation: auto) {
    @media (prefers-reduced-motion: no-preference) {
        @view-transition {
            navigation: auto;
        }
    }
}

/* styling for sections in /lessons */
/* === Global playlist sections === */

.own-playlist {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
}

.playlist-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-lg);
  overflow-x: auto;
  padding-bottom: var(--space-md);
  scroll-snap-type: x mandatory;
}

.playlist-scroll-list {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.create-playlist {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 10em;
  height: 16em;
  background-color: hsla(248, 27%, 36%, 1);
  text-align: center;
  color: var(--color-text-light);
  border-radius: 0.5em;
  padding: 0.5em;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.create-playlist a {
  color: white;
}

.create-playlist h3 {
  margin-top: 1em;
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 1em;
}

.create-playlist small {
  margin-top: auto;
}