* {
    padding: 0;
    margin: 0;
}

body {
    background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(66, 125, 207, 1) 100%);
    
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    header {
        padding: 10px;
        background-color: rgb(255, 255, 255);   
    }

    footer {
        padding: 10px;
        background-color: rgb(255, 255, 255);   
    }

    main {
        .profile-body {
            display: flex;
            padding: 10px;
            gap: 10px;

            flex-direction: row;

            .profile-content {
                display: flex;
                flex-direction: column;
                gap: 10px;

                .content-section {
                    border: 1px solid white;
                    padding: 10px;
                    border-radius: 10px;
                    gap: 5px;
                    display: flex;
                    flex-direction: column;
                    color: white;

                    .quote {
                        background-color:rgba(255, 255, 255, 0.503);
                        padding: 10px;
                        color: black;
                        border-radius: 10px;
                    }
                }
            }
        }
    }

    img {
        /* Filter & hover effect */
        border-radius: 20px;
        height: 300px;
        filter: grayscale(50%);
        transition: all 0.2s;
        mix-blend-mode: multiply;

        &:hover {
            /* Transform & mix blend mode */
            filter: none;
            box-shadow: -5px 5px 10px black;
            transform: scale(1.1) translateX(25px) rotate(-2deg);
            mix-blend-mode: normal;
        }
    }
}