index.sass

@use 'base'
@use 'animations'
@use 'colors'

@font-face // title font
    font-family: 'Daft Font'
    font-display: swap
    src: local('Daft Font'), url('/assets/fonts/DaftFont.woff') format('woff')

@font-face // marquee font
    font-family: "Ndot-55"
    font-display: swap
    src: local('Ndot-55'), url('/assets/fonts/Ndot-55.otf')

$dot: colors.$white

// main
#main-container
    margin-top: 30vh
    overflow: hidden

#title
    font-family: 'Daft Font', cursive
    font-size: 3em
    user-select: none
    font-weight: normal
    margin: 1em 0

ul
    display: inline-block
    text-align: left

.section
    max-height: 0
    opacity: 0
    overflow: hidden
    transition: all 0.5s ease
    margin-top: 3em
    display: inline-block

    &.active
        opacity: 1
        max-height: 9999em

#about
    line-height: 1.5em

    ul
        margin-right: 1.25em

#socials
    user-select: none
    margin: 1em 0

    a
        display: inline-block
        text-decoration: none
        font-size: 11.5px
        margin-left: 5px
        padding: 2px 0
        user-select: none
        animation: none

.dot
    vertical-align: middle
    background-color: $dot
    border: 2px solid $dot
    display: inline-block
    border-radius: 50%
    width: 7px
    height: 7px

    a:hover &
        background-color: colors.$primary

#marquee
    text-align: center
    margin: 1em 0
    white-space: nowrap
    animation: scroll-right 30s linear infinite
    filter: drop-shadow(0 0 3px colors.$white)
    font-style: italic !important
    font: 500 1.5em 'Ndot-55', sans-serif

.experience-logo
    width: 1.5em
    margin-right: 0.5em
    border-radius: 5%
    user-select: none

video#background
    position: fixed
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    z-index: -3
    opacity: 0.125
    transition: all 0.5s ease
    width: 100%
    height: 100%
    object-fit: cover

    &.fullscreen
        z-index: 3
        opacity: 1

#overlay-container
    display: ruby
    position: fixed
    bottom: 16px
    left: 16px
    margin-bottom: 0
    z-index: 2

    #overlay-box
        border: 2px solid transparent
        border-radius: base.$radius
        opacity: 0.4

        &:hover, &.active
            border-color: colors.$light
            background-color: colors.$secondary
            opacity: 1

        .button
            color: white
            font-weight: bolder
            background-color: transparent
            border-radius: 8px
            margin: 2.5px

            &:hover, &.active
                animation: none
                background-color: colors.$dark

    #bg-nowplaying
        overflow: hidden
        white-space: nowrap
        color: colors.$light
        font-style: italic
        margin: 1em

.project
    .project-title
        font-weight: bold

    .project-links
        display: flex

        a
            text-decoration: none

        a:not(:last-child)
            margin-right: 1em

    .project-tech
        display: flex
        align-content: center

        *:not(:last-child)
            margin-right: 0.5em
            top: 0.125em


#featured .project
    width: max(35%, 300px)

    .project-title
        font-size: 1.5em

    .project-description
        font-weight: 500

    .project-img
        position: relative
        display: inline-block

        img
            width: 100%
            transition: opacity .3s ease-in-out

        .hover
            opacity: 0
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            z-index: 2
            object-fit: contain

    &:hover
        border: 2px solid colors.$light

        .project-img
            .main
                opacity: 0

            .hover
                opacity: 1

    .project-links
        font-size: 1.25em

#project-list .project
    display: flex
    align-items: center
    border: 1px solid transparent
    border-radius: base.$radius

    div
        margin: 0.75em

    &:hover
        border-color: colors.$light

        .project-tech
            opacity: 1

    .project-title
        white-space: nowrap
        font-size: 1.1em

    .project-description
        font-style: italic
        font-size: 0.85em

    .project-tech
        opacity: 0

        .icon
            font-size: 1.25em
            top: -0.125em