:root {
    --text-color: #ffffff;
    --background-color: #000000DA;
}

body {
    background: linear-gradient(135deg, #ae00ff, #00eeff);
    bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 100vh;
}

main {
    padding: 130px 15vw 0 15vw;

    aside {
        background-color: var(--background-color);
        backdrop-filter: blur(20px);
        border-radius: 7px;
        
        position: fixed;
        overflow-x: hidden;
        width: 26vw;
        padding: 20px;

        h1 {
            font-family: 'Fira Sans';
            font-size: 30px;
            font-weight: 900;
            color: /*#1f1e1e*/ var(--text-color);
        }

        img {
            border-radius: 50%;
            height: 150px;
            width: 150px;
        }

        h2 {
            font-family: 'Fira Sans';
            font-size: 24px;
            font-weight: 900;
            color: /*#1f1e1e*/ var(--text-color);
        }

        p {
            font-family: 'Fira Sans';
            font-size: 16px;
            font-weight: 500;
            color: /*#1f1e1e*/ var(--text-color);                                                           
        }

        a {
            font-family: 'Fira Sans';
            font-size: 16px;
            font-weight: 500;
            color: var(--text-color);
            text-decoration: none;
        }
    }

    section {
        background-color: var(--background-color);
        backdrop-filter: blur(20px);
        border-radius: 7px;

        margin: 0 0 30px 40%;
        padding: 20px;

        h1 {
            font-family: 'Fira Sans';
            font-size: 24px;
            font-weight: 900;
            color: /*#1f1e1e*/ var(--text-color);
            border-bottom: 2px solid var(--text-color);
        }

        .link-container {
            display: flex;
            gap: 20px;
        }

        a {
            margin: 10px;
            padding: 5px 0 15px 0;

            text-decoration: none;
            color: var(--text-color);

            border-bottom: 1px solid var(--text-color);

            .icon {
                max-width: 30px;
                max-height: fit-content;
                font-size: 25px;
                padding: 10px;
            }

            .text {

                h4 {
                    font-family: 'Fira Sans';
                    font-size: 20px;
                    font-weight: 900;
                }

                p {
                    font-family: 'Fira Sans';
                    font-size: 16px;
                    font-weight: 500;
                    color: /*#1f1e1e*/ var(--text-color);
                }
            }
        }

        a:Last-child {
            border-bottom: none;
            padding: 5px 0 0 0;
        }
    }
}

@media screen and (max-width: 1024px) {
    nav {
        #exit-text {
            display: none;
        }

        .link {
            display: flex !important;
        }
    }

    main {
        padding: 130px 5vw 0 5vw;

        aside {
            position: relative;
            margin: 0 0 20px 0;
            width: auto;

            h1 {
                font-size: 48px;
            }

            p {
                font-size: 30px;
            }
        }

        section {
            margin: 0 0 20px 0;

            h1 {
                    font-size: 36px;
            }

            a {
                .icon {
                    max-width: 50px;
                    max-height: fit-content;
                    font-size: 40px;
                    padding: 10px;
                }

                .text {
                    h4 {
                        font-size: 34px;
                    }

                    p {
                        font-size: 30px;
                    }
                }
            }
        }
    }
}

#linkedin-icon {
    color: #0077b5;
}

#github-icon {
    color: #ffffff/*#171515*/;
}