body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol,
        "Noto Color Emoji";
    font-feature-settings: normal;
    color: white;
    background-color: #16191d;
    margin: 0 auto;
}

.container {
    width: 724px;
    margin: 0 auto;
}

.banner {
    width: 100%;
    height: 241px;
    object-fit: cover;
    display: block;
}

.content-container {
    width: calc(724px * 0.8);
    margin: 0 auto;
}

.profile_picture {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin-top: -74px;
    border: 4px solid white;
}

.name {
    margin-bottom: 0px;
    margin-top: 0px;
}

.description {
    margin-top: 0px;
    margin-bottom: 0px;
}

.navbar {
    display: flex;
    margin-top: 75px;
}

.navbar > button {
    width: 25%;
    height: 48px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #16191d;
    border: none;
    font-weight: 700;
    font-size: clamp(0.83rem, calc(0.78rem + 0.29vw), 1rem);
    color: #868e96;
    cursor: pointer;
}

.navbar > button.active {
    color: white;
}

.navbar > button:hover {
    background-color: #212529;
}

.navbar > button > span {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 4px;
    padding-right: 4px;
    position: relative;
}

.navbar > button.active > span::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: hsl(320 100% 60%);
}

.wave {
    display: inline-block;
    animation: wave-animation 1.5s infinite ease-in-out;
    transform-origin: 70% 70%;
}

@keyframes wave-animation {
    0%,
    100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

#content {
    padding: 30px 0;
    margin-bottom: 30px;
}

.project-image {
    width: 100%;
}

a {
    color: white;
}

hr {
    margin: 50px 0;	
}

.post-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.post-title {
    margin: 0;
    font-size: 16px;
}

.post-container {
    display: flex;
    gap: 10px; 
    padding: 20px;
}

.post-container:hover {
    background: #212529;
    border-radius: 10px;
}

.post-text {
    margin: 2px 0;
}

.post-date {
    font-size: 12px;
    color: #868e96;
    margin-left: 5px;
}

.link-post {
    text-decoration: none;
    background: #495057;
    color: white;
    padding: 5px 30px;
    border-radius: 99999999999999999999px;
}

.post-nom {
    margin: 0;
    font-size: 16px;
}

.gmail-button {
    background: #d93025;
    color: white;
    padding: 5px 0px;
    border-radius: 99999999999999999999px;
    text-decoration: none;
    width: 100%;
    display: flex;
    justify-content: center;
    font-weight: 700;
    margin: 15px 0;
}

.discord-button {
    background: #7289da;
    color: white;
    padding: 5px 0px;
    border-radius: 99999999999999999999px;
    text-decoration: none;
    width: 100%;
    display: flex;
    justify-content: center;
    font-weight: 700;
}

i {
    margin-right: 5px;
    margin-top: 4px;
}

.project {
    width: 100%;
    display: flex;
    gap: 35px;
    margin-top: 45px;
}

.project > div {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project > div > h2 {
    margin: 0;
}

@media (max-width: 724px) {
    .container {
        width: 100%;
    }

    .content-container {
        width: calc(100%* 0.8);
    }
}




























.pagination-container {
    text-align: center;
    margin-top: 20px;
}

.pagination-link,
.pagination-active,
.pagination-disabled {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.pagination-link {
    background: #495057;
    color: white;
}

.pagination-link:hover {
    background: #868e96;
}

.pagination-active {
    background: hsl(320, 100%, 60%);
    color: white;
}

.pagination-disabled {
    color: #868e96;
    cursor: not-allowed;
}