app.sass

@use '../variables'

.app
    display: flex
    flex-direction: column
    justify-content: center
    padding-top: 90px

.main
    display: grid
    align-self: center
    margin-top: 5rem

    h1
        font-size: 7.5rem
        background: variables.$gradient
        -webkit-background-clip: text
        -webkit-text-fill-color: transparent

    h2
        justify-self: center
        margin-top: 1rem

        font-size: 5rem
        font-weight: 300

        color: variables.$light-text-color

    h3
        justify-self: center
        font-size: 4rem
        font-weight: 300
        margin-top: 8rem

        color: variables.$light-text-color

    ul
        list-style-type: none
        justify-self: center

        padding: 0
        margin: 0
        margin-top: 3rem
        li
            display: inline-block
            padding: 0
            margin-right: 4rem
            margin-bottom: 5px
            border-radius: 5px

.aboutMe
    display: flex
    flex-wrap: wrap

    background: variables.$light-card-color
    margin-top: 7rem
    padding: 1rem

    .self-img
        display: block
        height: 49rem
        margin-left: 2rem
        border-radius: 100px

    .title
        font-size: 5rem
        font-weight: 300

        margin-left: 3rem

        color: variables.$light-text-color

    .content
        background: variables.$light-text-card-color
        padding: 3rem
        border-radius: 15px
        margin-left: 3rem

        p
            font-size: 2rem
            color: variables.$light-text-color-secundary

    .tec-icons
        list-style-type: none
        margin: 0
        padding: 0
        margin-top: 1rem
        margin-left: 3rem

        li
            display: inline-block
            padding: 0
            margin-top: 3rem
            margin-right: 4rem



@media (max-width:800px)
    .main
        h1
            font-size: 5rem

        h2
            font-size: 3rem

        h3
            font-size: 2.5rem

    .aboutMe
        .self-img
            height: 30rem

        .title
            font-size: 3rem

        .content
            p
                font-size: 1.5rem

        .tec-icons
            li
                margin-top: 1rem
                margin-right: 2rem