@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
    --color-primary: ;
    --color-secondary: ;

    --color-light: ;
    --color-dark: ;

    --color-muted: ;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    background-color: #f7f7f7;
}

a {
    text-decoration: none;
    color: var(--color-dark);
}

.back {
    position: absolute;
    bottom: 16px;
    right: 16px;
    padding: 8px 16px;
    background: #dddada;
    color: #000000;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.back:hover {
    background: #c7c2c2;
}

.container {
    width: 100%;
    height: 100%;
    padding: 16px;
    position: relative;
    display: inline-block;
}

.container .top_bar {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.profil_btn {
    width: 50px;
    height: 50px;
    padding: 2px;
    border-radius: 50%;
    background: conic-gradient(
        #f9ce34 0deg,
        #ee2a7b 120deg,
        #6228d7 240deg,
        #f9ce34 360deg
    );
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.profil_btn img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 3px solid #f7f7f7;
    box-sizing: border-box;
    display: block;
}

.menu {
    position: absolute;
    top: 75px;
    left: 16px;
    background: #fcfcfc;
    border: 1px solid #e5e5e5;
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    border-radius: 24px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 200px;
    padding: 8px;
}

.menu ul li a {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
    border-radius: 16px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.menu ul li a:hover,
.menu ul li a.active {
    background: #f2f2f2;
}

.menu ul li img {
    width: 16px;
    height: 16px;
}

.menu ul .separator {
    height: 1px;
    background: #e5e5e5;
    margin: 8px 0;
}