$primary: var(--primary)
$secondary: var(--secondary)
$primary-button: var(--primary-button)
$secondary-button: var(--secondary-button)
$accent: var(--accent)

$radius: var(--radius)

$main-font: var(--main-font)
$monospace-font: var(--monospace-font)

// Accessibility setting
//*, *::before, *::after
//    animation-duration: 0s !important
//    transition: none !important

//--dv8-orange: #F36023
//--dv8-yellow: #FFE11C
//--dv8-cyan: #00AAB0
//--dv8-magenta: #D51E90
//--dv8-lime: #C0D939

\:root
    --primary: 43, 43, 43
    --secondary: 240, 240, 245
    --primary-button: 242, 96, 34
    --secondary-button: 191, 85, 40
    --accent: 194, 165, 136

    --radius: 0.3rem

    --main-font: 'Rubik', sans-serif
    --monospace-font: 'JetBrains Mono', monospace

    --nav: 35, 35, 35

@import "animations"
@import "nav"
@import "header"
@import "sections"

*
    box-sizing: border-box

html
    font-family: $main-font
    background-color: RGB($secondary)
    color: RGB($primary)

body
    margin: 0
    padding: 0
    min-height: 100vh
    display: grid
    grid-template-rows: 1fr auto

.background
    background-color: RGB($secondary)
    position: absolute
    inset: 0
    overflow: hidden
    z-index: 1

    > img
        position: absolute
        inset: -5%
        width: 110%
        height: 110%
        object-fit: cover
        filter: blur(0.25rem)
        opacity: 0.6

    &::after
        content: ''
        position: absolute
        inset: 0
        background-image: linear-gradient(to top, RGB($secondary) 3%, RGBA($primary, 0.1))
        z-index: +1

main
    padding: 3rem 2rem 2rem
    position: relative
    z-index: 2

@media (max-width: 600px)
    main
        padding: 3rem 1rem 1rem

footer
    margin: auto 0 0
    padding: 0.5rem

    position: relative

    display: flex
    justify-content: center
    align-items: center

    background-color: RGB(var(--nav))
    color: RGB($secondary)

    z-index: 2

    > p
        margin: 0

        font-size: 0.8rem
        font-family: $monospace-font
        text-align: center

        color: RGB($secondary)

        > a
            margin: 0

            font-size: inherit
            font-family: inherit

            color: RGB($accent)
            text-decoration: none
            cursor: pointer

            &:hover
                text-decoration: underline