@import _material-colors

[onclick]
    cursor: pointer

.nodisplay
    display: none

html
    font-family: sans-serif
    background: radial-gradient(circle, #7EB643, #619A35)
    background-attachment: fixed
    direction: ltr

$pageWidthConstraintValue: 900px

@media screen and (max-width: #{$pageWidthConstraintValue})
    .pageWidthConstraint
        max-width: 100%

@media screen and (min-width: #{$pageWidthConstraintValue})
    .pageWidthConstraint
        max-width: $pageWidthConstraintValue
        $margin: calc( calc( 100% - #{$pageWidthConstraintValue} ) / 2 )
        margin-left: $margin
        margin-right: $margin

a, a:visited, a:active
    border-bottom-style: dotted

a:hover
    border-bottom-style: solid

*:link, a, a:hover, a:visited, a:active
    color: material-color(light-green, 200)
    border-bottom-color: material-color(light-green, 700)
    border-bottom-width: 0.075em
    text-decoration: none

html , body
    margin: 0px
    padding: 0px

h1
    margin-top: 0px
    margin-bottom: 0px
    padding-top: 0.8em
    padding-bottom: 0em
    padding-left: 0.6em
    padding-right: 0.6em
    font-weight: 400

header
    color: material-color(light-green, 50)
    background: darken(material-color(light-green, 900), 10%)

.badge
    white-space: nowrap
    padding-left: 0.2em
    padding-right: 0.2em
    margin-left: 0.2em
    margin-right: 0.2em
    color: material-color(blue-grey, 100)
    background-color: material-color(blue-grey, 700)
    border-color: material-color(blue-grey, 600)
    border-radius: 0.2em
    border-width: 0.0925em
    border-style: solid

section
    padding-top: 0.25em
    padding-left: 0.25em
    padding-right: 0.25em
    padding-bottom: 1.5em

.card
    overflow: hidden
    color: material-color(blue-grey, 100)
    background-color: material-color(blue-grey, 900)
    border-color: material-color(blue-grey, 800)
    border-radius: 0.5em
    border-width: 0.1em
    border-style: solid

.card:not(:first-child)
    margin-top: 0.75em

.card:not(:last-child)
    margin-bottom: 0.75em

.cardBody
    padding: 0.5em

.card .cardPic
    width: 100%

.card.minicard
    width: 30%
    padding-bottom: 0.3em

.card.minicard>.cardBody
    @extend .center
    @extend .noticeablyLargerText
    margin-left: 0.2em
    margin-right: 0.2em

.minicardHolder
    display: flex
    flex-direction: row
    flex-wrap: wrap
    justify-content: space-evenly
    align-items: baseline

.cardBottom.minicardHolder
    background: material-color(blue-grey, 700)
    padding-top: 0.8em
    padding-bottom: 0.8em

footer
    padding-top: 0.45em
    padding-bottom: 1.5em
    padding-left: 0.5em
    padding-right: 0.5em
    color: material-color(light-green, 50)
    background: darken(material-color(light-green, 900), 12%)

.justify
    text-align: justify
    text-justify: inter-word

.left
    text-align: left

.right
    text-align: right

.center
    text-align: center

.noticeablyLargerText
    font-size: 125%

dl.cardlisting
    margin-top: 0px
    margin-bottom: 0px
    display: flex
    flex-wrap: wrap

$dtdivision: 150px
$dddivision: calc( 100% - 150px )

dl.cardlisting dt, dl.cardlisting dd
    align-items: baseline
    margin: 0px

dl.cardlisting dt
    flex: 0 0 $dtdivision
    max-width: $dtdivision

dl.cardlisting dd
    flex: 0 0 $dddivision
    max-width: $dddivision

$dtddspacing: 0.35em

@mixin notlastdl
    border-bottom-color: darken(material-color(blue-grey, 900), 10%)
    border-bottom-style: dotted
    border-bottom-width: 0.0975em
    padding-bottom: $dtddspacing

@mixin notfirstdl
    padding-top: $dtddspacing

#main:not(.noSidebars)
    & dl.cardlisting dt:not(:last-of-type), & dl.cardlisting dd:not(:last-of-type)
        @include notlastdl

#main.noSidebars
    & dl.cardlisting dt:not(.cardTags), & dl.cardlisting dd:not(.cardTags)
        @include notlastdl

dl.cardlisting dt:not(:first-of-type), dl.cardlisting dd:not(:first-of-type)
    @include notfirstdl

.markdown p
    margin-top: 0px

.markdown p:not(:last-of-type)
    margin-bottom: 1ex

.markdown p:last-of-type
    margin-bottom: 0px

.extraLineSpacing
    line-height: 2

.fullscreenOverlay
    position: fixed
    background: #000000CC
    z-index: 95
    top: 0
    left: 0
    width: 100%
    height: 100%
    & .closeButton
        position: fixed
        top: 0
        right: 0
        z-index: 99
        padding: 1em
        background: material-color(red, 500)
        color: material-color(blue, 50)
        border-bottom-left-radius: 0.5em

#galleryImage
    position: fixed
    z-index: 96
    width: 100%
    height: 100%
    background-position: center
    background-repeat: no-repeat
    background-size: contain

#imageQualities
    z-index: 97
    position: fixed
    overflow: hidden
    background: #00000099
    color: material-color(white)
    border-bottom-right-radius: 0.5em
    & .quality:not(:first-of-type)
        border-top-width: 1px
        border-top-color: #FFFFFF44
        border-top-style: solid
    & .quality
        & *
            padding: 0.25em
        & i.fa
            border-right-width: 1px
            border-right-color: #FFFFFF44
            border-right-style: solid

#imageQualities>div>a
    color: material-color(white)
    border-bottom-style: none

section h3
    margin-top: 0px
    margin-bottom: 0.5em

#downloadPane a
    line-height: 2
    margin-left: 0.5em
    margin-right: 0.5em

@media screen and (max-width: calc( #{$pageWidthConstraintValue} + 24em ))
    #sideCard, #sideCardRight, #sideCardShadow, #sideCardRightShadow
        display: none

#main:not(.noSidebars)
    & .cardNotes, & .cardLink
        display: none

$space_left_for_sidebar: calc( calc( calc( calc( 100vw - #{$pageWidthConstraintValue} ) / 2 ) - 1em ) - 2em )
$space_left_for_sidebar_with_padding: calc( #{$space_left_for_sidebar} - 1em )

#sideCardShadow
    position: fixed
    width: 1em
    height: 100vh
    left: $space_left_for_sidebar
    top: 0
    background: linear-gradient(to right, #0F1F09, transparent)
    z-index: 10
#sideCard
    position: fixed
    background: #0F1F09
    border-right: solid 0.085em #4C6D28
    z-index: 9
    top: 0
    left: 0
    height: calc( 100vh - 1em )
    width: $space_left_for_sidebar_with_padding
    color: #C7DB60
    padding: 0.5em
    overflow-y: scroll
    direction: rtl
    &>*
        direction: ltr
    &>h2
        margin-bottom: 0px
    &>.controlButtons
        padding-top: 0.5em
        &>a
            display: block
            border: 0.085em solid #C7DB5E
            border-radius: 0.2em
            padding: 0.5em
            margin: 0.5em
        &>a.selected
            background-color: #4C6D28
    &>.fastNavigation
        width: 100%
        display: flex
        flex-wrap: wrap
        justify-content: space-evenly
        align-content: space-evenly
        &>.fastNavigationCard
            background-position: center
            background-size: cover
            width: 3em
            height: 3em
            border-radius: 0.2em
            border-color: #7DB643
            border-style: solid
            cursor: pointer
        &>.fastNavigationCard:not(.displaying)
            border-width: 0em
            margin: 0.4em
        &>.fastNavigationCard.displaying
            border-width: 0.2em
            margin: 0.2em

#sideCardRightShadow
    position: fixed
    width: 1em
    height: 100vh
    right: $space_left_for_sidebar
    top: 0
    background: linear-gradient(to left, #0F1F09, transparent)
    z-index: 10
#sideCardRight
    position: fixed
    background: #0F1F09
    border-left: solid 0.085em #4C6D28
    z-index: 9
    top: 0
    right: 0
    height: calc( 100vh - 1em )
    width: $space_left_for_sidebar_with_padding
    color: #C7DB60
    padding: 0.5em
    overflow-y: scroll
    &>.rightCard:not(:first-child):not(.collapsed)
        margin-top: 0.4em
    &>.rightCard:not(:last-child):not(.collapsed)
        margin-bottom: 0.4em
    &>.rightCard.collapsed
        height: 0px
        transform: scaleY(0)
        margin-top: 0px
        margin-bottom: 0px
        padding-top: 0px
        padding-bottom: 0px
    &>.rightCard
        transition: transform 50ms ease-in-out, margin 50ms ease-in-out, padding 50ms ease-in-out, height 50ms ease-in-out
        background-color: #204113
        border-radius: 0.4em
        padding: 0.3em
        overflow: hidden
        height: auto
        &>.title
            &>img.detailPic
                overflow: hidden
                border-radius: 0.2em
                width: 2em
                height: 2em
                object-fit: cover
                object-position: 50% 50%
                cursor: pointer
            &>.titleText
                display: inline-block
                max-width: calc( #{$space_left_for_sidebar_with_padding} - 2em )
                font-size: 1.25rem
                white-space: nowrap
                overflow: hidden
                text-overflow: ellipsis
                cursor: pointer
        &>dl
            display: flex
            flex-wrap: wrap
            margin-top: 0.5em
            margin-bottom: 0.5em
            &>dt
                display: inline-block
                width: 1.5em
                margin-left: 0px
                text-align: center
            &>dt:not(:last-of-type), &>dd:not(:last-of-type)
                margin-bottom: 1em
            &>dd
                display: inline-block
                width: calc( 100% - 2em )
                margin-left: 0px
                &>.link
                    font-size: 0.6rem
                &>.notes
                    font-size: 80%

#availableFilters
    width: 100%
    height: 100%
    display: flex
    flex-wrap: wrap
    flex-direction: column
    justify-content: space-around
    align-content: space-around

    &>hr
        width: 30em
        border: 0.085px solid #7DB643

    &>.taggroup
        max-width: 50em
        max-height: 50em
        display: flex
        flex-wrap: wrap
        flex-direction: row
        justify-content: space-around
        align-content: space-around

        &>.badge
            margin: 0.3em

@mixin rotation
    transform-origin: center

.rotate270
    transform: rotate(270deg)
    @include rotation

.rotate180
    transform: rotate(180deg)
    @include rotation

.rotate90
    transform: rotate(90deg)
    @include rotation

img.icon32
    $sz: 32px
    max-width: $sz
    max-height: $sz

img.icon48
    $sz: 48px
    max-width: $sz
    max-height: $sz

img.icon64
    $sz: 64px
    max-width: $sz
    max-height: $sz

#colorAccuracy
    & table
        table-layout: fixed
        width: 100%
        & thead
            background: darken(material-color(blue-grey, 900), 10%)
            & tr:first-of-type
                height: 6em
        & tbody
            & tr
                background: material-color(blue-grey, 800)
            & tr:hover
                background: material-color(blue-grey, 700)
            & td
                @extend .center
                font-size: 70%
            & .featureMissing
                color: material-color(red, 50)
                background: darken(material-color(deep-orange, 900), 13%)

.whiteText
    color: material-color(white)

.blackText
    color: material-color(black)