:root {
    --dark: #2D2B3A;
    --gray-0: #514D66;
    --gray-1: #B4A8CB;
    --gray-2: #E4E6FF;
    --gray-3: #F4F5FF;
    --light: #FAFAFF;

    --red: #F6536B;
    --orange: #FE9078;
    --yellow: #FFCC7A;
    --green: #6DE9B1;
    --blue: #68BEF1;
    --navy: #656DDB;
    --purple: #9375D9;
    --pink: #ED86E0;
    --primary: var(--navy);
    --fw-regular: 400;
    --fw-bold: 600;
    --fw-black: 700;
    --gradient: linear-gradient(to bottom right, var(--red) 10%, var(--orange) 20%, var(--yellow) 30%, var(--green) 40%, var(--blue) 50%, var(--green) 60%, var(--blue) 70%, var(--purple) 80%, var(--pink) 90%);
}

html {
    font-size: 16px;
}

body {
    padding: 0;
    margin: 4em 2em;
    font-family: 'Nunito', sans-serif;
    display: flex;
    flex-direction: row;
}

h1,
h2,
h3 {
    font-family: "Montserrat", sans-serif;
    font-weight: var(--fw-bold);
    margin: 0;
}


h1 {
    font-size: 3rem;
}

.gradient {
        background: var(--gradient);
    background-size: 450% 450%;
    animation: animated-gradient 15s ease infinite;
    color: transparent;
    background-clip: text;
}
@keyframes animated-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

h2 {
    font-size: 2rem;
}


a {
    text-decoration: none;
    color: inherit;
}

p a {
    color: var(--primary);
}
.arabic {
    font-family: "Zain", serif;
}

span.note {
    color: var(--dark);
    font-weight: var(--fw-regular);
}

div.sidebar {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5em 1em;
}

ul.nav {
    list-style: none;
    padding: 0;
}

ul.nav li {
    padding: 0.5rem 0;
}

a.navlink.active {
    font-weight: var(--fw-black)
}

a.navlink:hover {
    color: var(--primary);
}

.logo img {
    width: 10em;
    border-style: solid;
    border-radius: 50%;
    background:
        linear-gradient(#fff 0 0) padding-box,
        var(--gradient) border-box;
    background-size: 450% 450%;

    color: #313149;
    border: 4px solid transparent;
    animation: animated-gradient 15s ease infinite;

}



.main-content {
    width: clamp(min(93.75vw, 50ch), 70vw, 75ch);
    padding: 1em 1.5em 1em 1.5em;
}

.social-icon {
    border-radius: 50%;
    padding: 0.1em;
}


svg.github {
    color: var(--purple);
}

svg.linkedin {
    color: var(--blue);
}

svg.behance {
    color: var(--navy);
}

svg.toggle-dark-mode {
    color: var(--gray-3);
}

svg:hover {
    transition: background 0.4s ease-in-out;
    transform: scale(1.04);
    filter: brightness(110%);
    border: 0;
}

.dark-mode {
    background-color: var(--dark);
    color: var(--light);
    animation: animated-gradient 15s ease infinite;
}
button.wrapper {
    background-color: transparent;
    border: none;
    color: inherit;
    border-radius: 50%;
    cursor: pointer;
}
.picture {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2em 0;

}

.picture img {
    width: clamp(min(93.75vw, 50ch), 70vw, 75ch);
    border: solid 1px var(--gray-1);
    border-radius: 1%;
    margin: 1.5em 0;
}

.picture img:hover {
    box-shadow: 0px 0px 10px var(--gray-0);

}

.picture span {
    font-style: italic;
    text-align: center;
}
@media (max-width: 600px) {
    body {
        flex-direction: column;
            margin: 0;
    }

    .sidebar div.logo,
    div.socials {
        display: none;
    }

    .sidebar {

        width: 100%;
        position: sticky;
        top: 0;
        background-color: var(--primary);
        color: var(--light);
        padding: 0;
        margin: 0 0 1em 0;

    }

    .sidebar ul {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        padding: 0.5em 0;
        margin: 0;

    }

    a.navlink.active {
        color: var(--dark);
    }

    a.navlink:hover {
        color: var(--dark);
    }

}