* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: white;
}

body {
    background-color: rgb(0, 0, 0);
    font-family: 'Times New Roman', Times, serif;
}

a {
    text-decoration: none;

}

nav a {
    color: rgb(183, 183, 183);

    &:hover {
        color: white;
    }
}

nav {
    padding: 0px 7%;
}

div.logo {
    float: left;
    padding: 15px;
    font-size: 30px;
}

div.navigation {
    float: right;
}

ul {
    display: flex;
    list-style-type: none;
}

ul li {
    padding: 15px;
    font-size: 25px;
}

div.social-links {
    float: right;
}

/* Main */

main {
    clear: both;
    margin: 40px;
    padding: 30px 7%;

    & div.hero {
        display: flex;
        padding: 20px 0;
        border-bottom: 2px solid rgb(229, 218, 218);
        font-size: 40px;

        & p {
            margin-top: 40px;
        }

        & div.profile-image img {

            height: 500px;
            width: auto;
            border-radius: 20px;
            float: right;
            margin: 0px 90px;
        }
    }

    & div.expertise {
        font-size: 40px;
        padding: 20px 0;
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 50px;
        border-bottom: 2px solid rgb(229, 218, 218);
    }

    & div.work-activities-container {
        display: grid;
        grid-template-columns: auto auto auto;

        padding: 20px 0;
        border-bottom: 2px solid rgb(229, 218, 218);


        h1 {
            display: block;
        }

        & .work {

            & img {
                width: 500px;
                height: 300px;
                object-fit: cover;
                border-radius: 20px;
                transition: all linear 0.5s;

                &:hover {
                    transform: scale(1.02);
                }
            }
        }
    }

}

/* Footer */

footer {
    margin: 40px;
    padding: 30px 7%;
    display: flex;
    justify-content: center;

    & div {
        & h1 {
            font-size: 60px;
            font-weight: 200;
        }

        & button {
            display: flex;
            justify-content: center;
            margin-top: 40px;
            margin-left: 38%;
            color: black;
            font-weight: 550;
            padding: 15px;
            cursor: pointer;
            border: none;
            border-radius: 10px;

            & a {
                color: black;
            }
        }

        & form {
            width: 500px;

            & input,
            textarea {
                padding-top: 40px;
                border: none;
                width: 100%;
                padding: 8px;
                color: black;
                outline: none;

            }

            & input[type="submit"] {
                background-color: rgb(63, 164, 12);
                cursor: pointer;
                font-weight: 600;
            }

        }
    }
}

/* Infinite Rolling Animation */

:root {
    --bgColor: #18253a;
    --tagColor: #2e2e32;
    --txtColor: #eeeeee;
    --gap: 1rem;
}

.wrapper {
    margin: 1rem auto;
    display: flex;
    width: 700px;
    position: relative;
    overflow: hidden;
}

.container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    background-color: black;
    color: var(--txtColor);
    font-family: "Poopins", sans-serif;
    width: fit-content;
    gap: var(--gap);

    animation: roll 5s linear infinite;
}

.tag {
    padding: 0.8rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.4rem;
    background-color: var(--tagColor);
    font-weight: 600;
}

.blur {
    position: absolute;
    background: linear-gradient(90deg,
            black,
            transparent 20%,
            transparent 80%,
            black);
    inset: 0;
}

@keyframes roll {
    0% {
        transform: translateX(10);
    }

    100% {
        transform: translateX(calc(-50% - var(--gap)/2));
    }
}