/**
 * 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

    .MostWatchedOverview
        padding: 30px

        .OverviewText
            position: relative
            float: left
            max-width: 50%

        .MostWatchedPoster
            position: relative
            float: right
            max-width: 50%
            margin-bottom: 20px

// Charts
canvas#MostWatchedChart
    opacity: 0