/* _content/SinafProduction/Components/Layout/MainLayout.razor.rz.scp.css */
@keyframes loader-b-tly90nqpy2 {
    0% {
        background-position: 0 0, 50% 0, 0 50%, 50% 50%
    }
    12.5% {
        background-position: 50% 0, 100% 0, 0 50%, 50% 50%
    }
    25% {
        background-position: 50% 0, 100% 0, 50% 50%, 100% 50%
    }
    37.5% {
        background-position: 50% 0, 100% 50%, 50% 50%, 100% 100%
    }
    50% {
        background-position: 50% 50%, 100% 50%, 50% 100%, 100% 100%
    }
    62.5% {
        background-position: 50% 50%, 100% 50%, 0 100%, 50% 100%
    }
    75% {
        background-position: 0 50%, 50% 50%, 0 100%, 50% 100%
    }
    87.5% {
        background-position: 0 0, 50% 50%, 0 50%, 50% 100%
    }
    100% {
        background-position: 0 0, 50% 0, 0 50%, 50% 50%
    }
}

@keyframes nav-fixed-b-tly90nqpy2 {
    from {
        width: calc(100% - 30px);
    }
    to {
        width: 100%;
    }
}

header[b-tly90nqpy2] {
    height: calc(48px + 30px);
}

nav[b-tly90nqpy2] {
    display: flex;
    align-items: center;
    background: var(--panel-color);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    margin: 15px;
    height: 48px;
    font-size: 1.5rem;
    font-weight: 100;
    color: var(--accent-color);
    transition: margin-left 0.5s, margin-right 0.5s;
}

nav.fixed[b-tly90nqpy2] {
    z-index: 15;
    position: fixed;
    margin: 0;
    border-radius: 0;
    animation: nav-fixed-b-tly90nqpy2 0.5s;
    animation-fill-mode: forwards;
}

nav.fixed > p[b-tly90nqpy2] {
    border-radius: 0;
}

nav > ul[b-tly90nqpy2] {
    display: flex;
    list-style: none;
    margin: 0 10px;
    padding: 0;
    height: 100%;
    align-items: center;
}

nav > p[b-tly90nqpy2] {
    margin-right: 20px;
    background: #2eab64;
    color: white;
    padding: 0 10px;
    height: 48px;
    align-content: center;
    border-radius: 10px 0 0 10px;
    transition: border-radius 0.5s;
}

nav > p[b-tly90nqpy2]:before {
    content: "〉";
    font-weight: bold;
    position: relative;
    left: 0.2rem;
    top: 2px;
}

nav > a:any-link[b-tly90nqpy2] {
    color: var(--accent-color);
    text-decoration: none;
    margin: 0 15px 0 auto;
}

nav > a:hover[b-tly90nqpy2] {
    text-decoration: underline;
}

nav > a > img[b-tly90nqpy2] {
    image-rendering: pixelated;
}

#blazor-error-ui[b-tly90nqpy2] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-tly90nqpy2] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* _content/SinafProduction/Components/Pages/About.razor.rz.scp.css */
main[b-1rll76xw1y] {
    margin: 10px;
}

h1[b-1rll76xw1y] {
    text-align: center;
    margin-bottom: 20px;
}

#me[b-1rll76xw1y] {
    position: relative;
    display: flex;
    max-width: 1000px;
    margin: auto;
}

#me > img[b-1rll76xw1y] {
    height: 300px;
    position: relative;
    bottom: 0;
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

#me > div[b-1rll76xw1y] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#me > div > div:last-of-type[b-1rll76xw1y] {
    margin-left: auto;
}

#me a > img[b-1rll76xw1y] {
    width: 64px;
    image-rendering: pixelated;
    border-radius: 10px;
    transition: transform 0.1s;
}

#me a > img:hover[b-1rll76xw1y] {
    transform: translateY(-5px);
}

hr[b-1rll76xw1y] {
    margin: 50px auto;
}

#description > p[b-1rll76xw1y] {
    text-align: center;
}
/* _content/SinafProduction/Components/Pages/blogs.razor.rz.scp.css */
main[b-accy6y9nqq] {
    padding: 10px;
}
/* _content/SinafProduction/Components/Pages/Home.razor.rz.scp.css */
@keyframes spawn-b-r5w89c1xn4 {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

main[b-r5w89c1xn4] {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.loading[b-r5w89c1xn4] {
    background: none;
}

h1[b-r5w89c1xn4] {
    font-size: 5rem;
    margin: 0;
}

h1[b-r5w89c1xn4]:before {
    content: "〉";
    color: var(--accent-color);
    position: relative;
    left: 1rem;
    top: 0.5rem;
}

h2[b-r5w89c1xn4] {
    text-align: center;
}

#main[b-r5w89c1xn4] {
    width: fit-content;
    margin-left: 10%;
}

#main > p[b-r5w89c1xn4] {
    font-size: 2rem;
    color: var(--accent-color);
    text-align: right;
    margin: 0;
}

#projects[b-r5w89c1xn4] {
    margin: 42px 0;
}

#projects > h2[b-r5w89c1xn4] {
    margin: 10px 0 10px 500px;
}

#projects__list[b-r5w89c1xn4] {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.project[b-r5w89c1xn4] {
    width: 300px;
    height: 400px;
    margin: 0;
    transform: skew(-10deg);
    display: flex;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    background: var(--panel-color-secondary);
    border-radius: 10px;
    transition: transform 0.2s;
}

.project:hover[b-r5w89c1xn4] {
    transform: translateY(-10px) skew(-10deg);
    cursor: pointer;
}

.project > img[b-r5w89c1xn4] {
    transition: all 0.2s;
    image-rendering: pixelated;
    z-index: -1;
}

.project:hover > img[b-r5w89c1xn4] {
    opacity: 1;
    scale: 1.1;
}

.project > h3[b-r5w89c1xn4] {
    color: white;
    position: absolute;
    background: var(--background-color);
    height: fit-content;
    padding: 0 15px;
    margin: 0;
    left: -5px;
}

.project > *[b-r5w89c1xn4] {
    transform: skew(10deg);
}

#snake-logo[b-r5w89c1xn4] {
    position: absolute;
    z-index: -1;
    height: 500px;
    width: 400px;
    left: 250px;
    background: url("images/silhouette_sp.svg");
    background-size: cover;
    scale: 1.5;
    transform: rotate(-10deg);
}

#boards[b-r5w89c1xn4] {
    border-radius: 10px;
    padding: 10px;
    margin: auto;
    width: 70%;
}

#github[b-r5w89c1xn4] {
    margin:0 0 30px 0;
}

#commit[b-r5w89c1xn4] {
    display: flex;
    background: var(--panel-color);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    width: 80%;
    max-width: 750px;
    margin: auto;
    align-self: center;
    padding: 5px 10px;
    border-radius: 10px;

    transition: scale 0.2s;
}

#commit--added[b-r5w89c1xn4] {
    color: #3fcc3f;
    margin: 0 2px;
}

#commit--removed[b-r5w89c1xn4] {
    color: #f14848;
    margin: 0 2px;
}

#commit--modified[b-r5w89c1xn4] {
    color: #53e8e8;
    margin: 0 2px;
}

#commit__repo[b-r5w89c1xn4] {
    margin: 0;
}

#commit > div:first-child[b-r5w89c1xn4] {
    width: 100%;
}

#commit:hover[b-r5w89c1xn4] {
    scale: 1.05;
}

#commit__content[b-r5w89c1xn4] {
    margin: 5px 10px 10px 10px;
}

#commit__branch[b-r5w89c1xn4] {
    background: var(--accent-color);
    padding: 0 10px;
    border-radius: 5px 0 0 5px;
}

#commit__avatar[b-r5w89c1xn4] {
    position: relative;
    width: 128px;
}

#commit__avatar > img[b-r5w89c1xn4] {
    position: absolute;
    bottom: -32px;
    right: -20px;
    image-rendering: pixelated;
    width: 100%;
}
/* _content/SinafProduction/Components/Pages/ProjectEdit.razor.rz.scp.css */
main[b-7rahcptce1] {
    margin: 0 10px;
}

form[b-7rahcptce1] {
    display: flex;
    flex-direction: column;
    margin: 0 10%;
}

input[b-7rahcptce1] {
    margin: 5px 0;
}

#name[b-7rahcptce1] {
    font-size: 2rem;
}
/* _content/SinafProduction/Components/Pages/Projects.razor.rz.scp.css */
main[b-uxc9pejf3a] {
    margin: 0 10px;
}

h1[b-uxc9pejf3a] {
    text-align: center;
}

hr[b-uxc9pejf3a] {
    margin: 5px auto 40px auto;
}

#projects[b-uxc9pejf3a] {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin: 20px;
}

#projects *[b-uxc9pejf3a] {
    text-decoration: none;
    color: inherit;
}

.project[b-uxc9pejf3a] {
    position: relative;
    rotate: -2deg;
    width: 300px;
    height: 300px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    overflow: hidden;
    transition: rotate 0.2s;
}

.project:nth-child(2n)[b-uxc9pejf3a] {
    rotate: 2deg;
}

.project:hover[b-uxc9pejf3a] {
    cursor: pointer;
    rotate: 0deg;
}

h2[b-uxc9pejf3a] {
    background: var(--accent-color);
    color: white;
    padding: 0 10px;
    border-radius: 5px;
    text-align: center;
    margin: 10px;
    width: fit-content;
    height: fit-content;
}

.project__description[b-uxc9pejf3a] {
    position: absolute;
    bottom: 0;
    display: flex;
    transform: translateY(100%);
    transition: transform 0.2s;
    background: rgba(0, 0, 0, 0.5);
}

.project:hover > .project__description[b-uxc9pejf3a] {
    transform: none;
}

.project__description > p:first-of-type[b-uxc9pejf3a] {
    display: block;
    position: absolute;
    right: 10px;
    top: -55px;
    padding: 5px;
    border-radius: 5px;
    background: var(--button-color-secondary);
}

.project__description > p:last-of-type[b-uxc9pejf3a] {
    display: block;
    margin: 0 0 5px 0;
    padding: 5px 10px;
    width: 280px;
}

.project img[b-uxc9pejf3a] {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    z-index: -1;
}
/* _content/SinafProduction/Components/Pages/ProjectView.razor.rz.scp.css */
#infos[b-mpy5mda1bw] {
    position: relative;
    margin: 0 20px;
    padding: 10px;
    background: var(--panel-color);
    border-radius: 20px;

    display: flex;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

#infos > img[b-mpy5mda1bw] {
    width: 200px;
}

#infos > div[b-mpy5mda1bw] {
    padding: 0 20px;
    width: 100%;
    height: 100%;
}

h1[b-mpy5mda1bw]::first-letter {
    color: var(--accent-color);
}

#infos > div > p:first-of-type[b-mpy5mda1bw] {
    margin: 0 0 0 15px;
    padding: 2px 10px;
    border-radius: 5px;
    width: fit-content;
    background: var(--panel-color-secondary);
}

#infos > div > p:last-of-type[b-mpy5mda1bw] {
    margin: 15px 0;
}

#infos__links[b-mpy5mda1bw] {
    display: flex;
    gap: 5px;
    position: absolute;
    bottom: 10px;
}

.markdown[b-mpy5mda1bw] {
    background: rgba(0, 0, 0, 0.1);
    width: 80%;
    padding: 10px;
    margin: 20px auto;
    border-radius: 10px;
}

#board[b-mpy5mda1bw] {
    width: 70%;
    padding: 10px;
    margin: auto;
    border-radius: 10px;
    background: var(--panel-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* _content/SinafProduction/Components/Pages/UserPanel.razor.rz.scp.css */
main[b-0g6pwkeirc] {
    padding: 10px 30px;
}
/* _content/SinafProduction/Components/Shared/BoardComponent.razor.rz.scp.css */
h2[b-pcv1zaluv0] {
    margin-left: 15px;
}

h2 > span[b-pcv1zaluv0] {
    color: #c6c6c6;
}

.board__columns[b-pcv1zaluv0] {
    display: flex;
    gap: 10px;
    height: 100%;
    overflow: hidden;
}

.board__column[b-pcv1zaluv0] {
    flex: 1;
    background: rgba(0, 0, 0, 0.22);
    color: white;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.board__column > h3[b-pcv1zaluv0] {
    background: var(--panel-color-secondary);
    padding: 2px 10px;
    margin: 0;
}

.board__cards[b-pcv1zaluv0] {
    overflow-y: auto;
    height: 300px;
    background: var(--background-color-tertiary);
}

.board__card[b-pcv1zaluv0] {
    margin: 10px;
    background: #243446;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    padding: 10px 10px 30px 10px;

    position: relative;
    border-left: var(--accent-color) 3px solid;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.board__card:hover[b-pcv1zaluv0] {
    cursor: pointer;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    background: linear-gradient(145deg, #2d4261, #213344);
}

.board__card > h4[b-pcv1zaluv0] {
    color: white;
    font-size: 1.2rem;
    margin: 0;
}

.board__card__tasks[b-pcv1zaluv0] {
    position: absolute;
    margin: 0;
    bottom: -5px;
    left: 0;
    padding: 5px 10px;
    border-radius: 0 5px 0 5px;
    background: var(--background-color);
}

.board__card__origins[b-pcv1zaluv0] {
    position: absolute;
    margin: 0;
    bottom: 0;
    right: 4px;
    color: #53e8e8;
}

#card[b-pcv1zaluv0] {
    margin: 10px;
    width: 900px;
}

#card > hr:first-of-type[b-pcv1zaluv0] {
    margin: 0;
    width: 100px;
}

#card > hr:last-of-type[b-pcv1zaluv0] {
    margin: 0 0 0 auto;
    width: 100px;
}

#card > input[b-pcv1zaluv0] {
    margin-bottom: 5px;
    width: 100%;
}

#card > textarea[b-pcv1zaluv0] {
    margin-top: 5px;
    resize: none;
    width: 100%;
    height: 200px;
}

#card__tasks[b-pcv1zaluv0] {
    background: rgba(0, 0, 0, 0.2);
    margin: 10px 0;
    overflow-y: auto;
}

.card__task[b-pcv1zaluv0] {
    display: flex;
}

.card__task > input[b-pcv1zaluv0] {
    position: relative;
    top: -1px;
}

.card__task > p[b-pcv1zaluv0] {
    margin: 5px;
}

.board__create-card[b-pcv1zaluv0] {
    border-radius: 0 10px 10px 10px;
    padding: 5px 10px;
}
/* _content/SinafProduction/Components/Shared/ModalComponent.razor.rz.scp.css */
.modal-backdrop[b-rh872fulmm] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal[b-rh872fulmm] {
    background: var(--panel-color);
    padding: 10px;
    border-radius: 0.5rem;
    min-width: 300px;
    max-width: 90vw;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    position: relative;
}

.modal__close[b-rh872fulmm] {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 2em;
    padding: 0;
    cursor: pointer;
}

.modal__close:hover[b-rh872fulmm] {
    color: var(--accent-color);
}