*,
*::before,
*::after {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

html {
    height: max-content;
    min-height: 100%;
    background: var(--bg-gradient);
}

body,
main {
    height: inherit;
}

a {
    text-decoration: none;
}

:root {
    --bg-gradient: linear-gradient(135deg, #0B0B0F, #0F172A, #3B0764);
    --bg-color: #12121A;
    --primary: #2563EB;
    --secondary: #7C3AED;
    --text-color: #f9fafb;
}

main,
footer {
    padding: 1.25rem;
}

main *,
footer * {
    color: var(--text-color);
    font-family: 'Inter';
}

main h1,
main h2,
main h3,
footer h1,
footer h2,
footer h3 {
    font-family: 'Poppins';
    text-align: center;
}

main h1 {
    background: linear-gradient(135deg, var(--text-color), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a:hover {
    color: var(--secondary);
}

hr {
    width: 80%;
    border-color: var(--secondary);
}

.content {
    background-color: var(--bg-color);
    border-radius: 1rem;
}

.head {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    padding-top: 3rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    align-items: center;
}

.head,
.foot {
    background:
        radial-gradient(100% 100% at 50% 0%,
            rgba(37, 99, 235, 0.55),
            transparent 60%),
        radial-gradient(100% 100% at 50% 100%,
            rgba(124, 58, 237, 0.55),
            transparent 60%);
    background-repeat: no-repeat;
}

.titles-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    row-gap: 0.5rem;
}

.btn-primary,
.btn-secondary {
    padding: 0.625rem;
    width: fit-content;
    min-width: 9rem;
    border-radius: 1rem;
    text-align: center;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary);
}

.btn-secondary {
    background-color: var(--secondary);
}

.btn-primary:hover,
.btn-secondary:hover {
    color: var(--text-color);
    background-color: var(--bg-color);
}

.center-gap-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.text-gradient {
    background: linear-gradient(0deg, var(--primary), var(--text-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 0.625rem;
    padding: 1rem;
    border-top-style: solid;
    border-top-width: 0.5px;
}

section:nth-child(1n) {
    border-image: linear-gradient(135deg, var(--secondary), var(--primary)) 1;
}

section:nth-child(2n) {
    border-image: linear-gradient(135deg, var(--primary), var(--secondary)) 1;
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-gradient);
    border-image: linear-gradient(135deg, var(--secondary), var(--primary)) 1;
    border-width: 0.5px;
    border-style: solid;
    padding: 1rem;
    width: 15rem;
    height: 15rem;
}

.service-card>p {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.service-card>p:last-child {
    padding-top: 1rem;
    align-items: flex-start;
    text-align: center;
}

.list-langages {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.langage-card {
    width: 5rem;
    border-radius: 1rem;
}

.foot {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding: 1rem;
}

.center-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.mail-card {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
    width: fit-content;
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.mail-content {
    background-color: var(--bg-color);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.mail-infos {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
}

.mail-infos>div {
    border-left-color: var(--secondary);
    border-left-style: solid;
    border-left-width: 0.5px;
    padding: 0.625rem;
}

footer>div>p {
    text-align: center;
}

.footer-content {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.footer-content .head-footer {
    display: flex;
    flex-direction: column;
}

.footer-content a:hover {
    color: var(--secondary);
}

.foot-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.logo-small {
    width: 3rem;
    border-radius: 50%;
}

@media (min-width: 900px) {
    .center-gap-1 {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .footer-content>div,
    .footer-content .head-footer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 3rem;
    }

    .footer-content>a {
        text-align: center;
    }
}