/**
 * Design of the Netflix Stats Generator
 * @author Marvin Borner
 * @copyright Marvin Borner 2018
 */

/** 
  * General
  */

$BlueColor: #1e3264

body 
    font-family: "Varela Round", sans-serif !important
    text-rendering: optimizeLegibility !important
    box-sizing: border-box !important


.Main 
    // display: none
    min-height: 100vh


/**
   * General headers
   */

.SectionHeader 
    display: flex
    justify-content: center
    align-items: center
    align-content: space-between
    width: 100%


.SectionHeader h1 
    text-transform: capitalize


/** 
   * Gradients
   */

.GradientBackground 
    %Gradient 
        position: fixed
        top: 0
        left: 0
        z-index: -1
        transition: opacity 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s
        width: 100%
        height: 100vh
    

    .Color:not(.Active) 
        display: none
    
    
    .GreenBlue 
        background: linear-gradient(145deg, #c3f0c8, #509bf5)
        @extend %Gradient
    
    
    .OrangePink 
        background: linear-gradient(145deg, #ffc867, #f037a6)
        @extend %Gradient
    
    
    .GreenBlue 
        background: linear-gradient(145deg, #c3f0c8, #509bf5)
        @extend %Gradient
    


/** 
   * Favorites
   */

.FavoritesSection .SectionHeader
    height: 40vh
    color: $BlueColor