style.sass

body
    margin: 0
    font-family: 'Manrope', sans-serif
    font-size: 100%
    background-size: cover
    background-position: center
    color: white
    background-color: #2c2c2c
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4)) 0%
    transition: background 1s
    background-repeat: no-repeat
    text-align: center
    box-sizing: border-box
    font-variant-numeric: tabular-nums
.container
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    width: 100vw
    height: 100vh
article
    height: 300px
section
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
h1
    text-align: center
    font-size: 2em
    margin: 0px
h3
    margin-top: 4px
footer
    position: absolute
    bottom: 12px
    display: flex
    left: 12px
    right: 12px
    justify-content: space-between
#unsplash-author, #color-picker
    transition: background .5s ease-in-out
    color: white !important
    display: flex
    justify-content: center
    align-items: center
    width: 56px
    height: 56px
    background: rgba(255,255,255, .4)
    border-radius: 50%
    backdrop-filter: blur(10px)
    &:hover
        background: rgba(255,255,255, .6)
        border-radius: 50%
button
    border: none
    padding: 12px
    font-family: 'Manrope', sans-serif
    font-weight: bold
    text-transform: uppercase
    background: #000000
    color: #fff
    border-radius: 8px
.tab
    animation: .3s ease both hide reverse .3s
    display: inline-block
    cursor: pointer
    transition: all .3s .1s
    outline: 0px
    padding: 12px
    font-family: 'Manrope', sans-serif
    font-weight: bold
    text-transform: uppercase
    background: none
    margin-right: 8px
    margin-left: 8px
    border-radius: 12px
    width: 120px
.active
    transition: all .3s
    background-color: white
    color: #000
.tab-row
    margin-bottom: 24px
.hidden
    display: none
textarea
    min-width: 250px
    min-height: 100px
    max-width: 75vw
    max-height: 40vh
    transition: border .2s
    background-color: rgba(255,255,255,.2)
    color: white
    border-radius: 8px
    padding: 8px
    border: 2px solid rgba(255, 255, 255, .6)
    font-family: 'Manrope'
    backdrop-filter: blur(25px)
    &::placeholder
        color: white
        transition: all .2s
    &:focus
        outline: none !important
        border: 2px solid rgba(255, 255, 255, 1)