@import"https://fonts.cdnfonts.com/css/akrobat";* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

::-webkit-scrollbar {
    display: none
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.doing-list[data-v-96cefb7f] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    padding: 0;
    width: 100%;
    height: 100%
}

.doing-list .doing-card[data-v-96cefb7f] {
    width: 90%;
    transition: all .5s ease;
    margin-bottom: 60px
}

.doing-list .doing-card[data-v-96cefb7f]:hover {
    transform: scale(1.01)
}

.doing-list .doing-card .card-title[data-v-96cefb7f] {
    font-family: Akrobat Bold,sans-serif;
    font-size: clamp(1.2rem,2vw,2rem);
    color: #f5f5f5;
    opacity: .75;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,.8)
}

.doing-list .doing-card .progress-bar-container[data-v-96cefb7f] {
    width: 100%;
    background-color: #e0e0e080;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 4px;
    position: relative;
    box-shadow: 0 4px 8px #0009
}

.doing-list .doing-card .progress-bar-container .progress-bar[data-v-96cefb7f] {
    height: max(24px,4dvh);
    background: linear-gradient(135deg,#0fc9 25%,#40cbe099 75%);
    background-size: 200% 200%;
    animation: gradient-96cefb7f 5s ease infinite;
    transition: width .3s
}

.doing-list .doing-card .progress-bar-container .progress-text[data-v-96cefb7f] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: #f5f5f5;
    font-family: Akrobat Bold,sans-serif;
    font-size: clamp(1rem,1.5vw,1.5rem);
    line-height: 20px;
    text-shadow: 1px 1px 2px rgba(0,0,0,.1);
    letter-spacing: 2px
}

.progresses-enter-active[data-v-96cefb7f],.progresses-leave-active[data-v-96cefb7f] {
    transition: all .5s ease
}

.progresses-leave-active[data-v-96cefb7f] {
    position: absolute
}

.progresses-enter-from[data-v-96cefb7f],.progresses-leave-to[data-v-96cefb7f] {
    opacity: 0;
    transform: translateY(30px)
}

.progresses-enter-to[data-v-96cefb7f],.progresses-leave-from[data-v-96cefb7f] {
    opacity: 1;
    transform: translateY(0)
}

.progresses-move[data-v-96cefb7f] {
    transition: transform .5s ease
}

.progresses-enter-active[data-v-96cefb7f]:nth-child(1) {
    transition-delay: .2s
}

.progresses-enter-active[data-v-96cefb7f]:nth-child(2) {
    transition-delay: .4s
}

.progresses-enter-active[data-v-96cefb7f]:nth-child(3) {
    transition-delay: .6s
}

.progresses-enter-active[data-v-96cefb7f]:nth-child(4) {
    transition-delay: .8s
}

.progresses-enter-active[data-v-96cefb7f]:nth-child(5) {
    transition-delay: 1s
}

.progresses-enter-active[data-v-96cefb7f]:nth-child(6) {
    transition-delay: 1.2s
}

.progresses-enter-active[data-v-96cefb7f]:nth-child(7) {
    transition-delay: 1.4s
}

.progresses-enter-active[data-v-96cefb7f]:nth-child(8) {
    transition-delay: 1.6s
}

.progresses-enter-active[data-v-96cefb7f]:nth-child(9) {
    transition-delay: 1.8s
}

.progresses-enter-active[data-v-96cefb7f]:nth-child(10) {
    transition-delay: 2s
}

@keyframes gradient-96cefb7f {
    0% {
        background-position: 0% 50%
    }

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

    to {
        background-position: 0% 50%
    }
}

.history-container[data-v-087d7e10] {
    overflow-x: hidden;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    background-color: #1e1e1e;
    z-index: -1
}

.history-container h2[data-v-087d7e10] {
    font-family: Akrobat Bold,sans-serif;
    font-size: clamp(1.5rem,1rem + 1vw,2.5rem);
    color: #f5f5f5;
    text-align: center;
    margin-top: 2vh;
    z-index: 1
}

.done-list[data-v-087d7e10] {
    margin: 5vh 0 10vh;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem 0;
    list-style-type: none
}

.done-card[data-v-087d7e10] {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "title started" "title completed";
    width: max(60%,350px);
    padding: 1rem;
    box-shadow: 0 0 1rem #000c;
    color: #f5f5f5;
    opacity: 1;
    transition: none
}

.done-card h3[data-v-087d7e10] {
    font-family: Akrobat Bold,sans-serif;
    font-size: clamp(1.2rem,1vw + 1rem,2rem);
    margin: 0;
    grid-area: title;
    text-align: center;
    align-self: center
}

.done-card p[data-v-087d7e10] {
    font-family: Akrobat,sans-serif;
    margin: .5rem 0;
    text-align: center
}

.done-card p[data-v-087d7e10]:nth-child(2) {
    grid-area: started
}

.done-card p[data-v-087d7e10]:nth-child(3) {
    grid-area: completed
}

.done-card[data-v-087d7e10]:nth-child(odd) {
    border-radius: 0 .5rem .5rem 0;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title started" "title completed";
    align-self: flex-start;
    background: linear-gradient(135deg,#0078ff80,#0080ff33,#add8e61a)
}

.done-card[data-v-087d7e10]:nth-child(2n) {
    border-radius: .5rem 0 0 .5rem;
    grid-template-columns: auto 1fr;
    grid-template-areas: "started title" "completed title";
    align-self: flex-end;
    background: linear-gradient(45deg,#add8e61a,#0080ff33,#0078ff80)
}

h1[data-v-b080847b] {
    position: absolute;
    font-family: Akrobat Black,sans-serif;
    font-size: clamp(2rem,1rem + 3vw,4rem);
    z-index: 0;
    background: linear-gradient(to top,transparent,rgba(245,245,245,.8));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    top: 10vh;
    width: 100%;
    animation: fade-in-b080847b 2s ease forwards
}

#progress-container[data-v-b080847b] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw
}

#background[data-v-b080847b] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110vh;
    z-index: 0;
    background-image: linear-gradient(to bottom,#fff0 80%,#1e1e1e),linear-gradient(135deg,#0059ffcc,#0080ff33,#add8e61a),url(https://i.ibb.co/6cPsxvZf/bg-4t-U3-Kz4x.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.contact[data-v-b080847b] {
    position: relative;
    text-align: center;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    font-family: Akrobat,sans-serif;
    color: #f5f5f5cc;
    font-size: clamp(.5rem,.5rem + .5vw,1rem);
    text-shadow: 2px 2px 4px rgba(0,0,0,.8);
    background-color: #1e1e1e;
    padding: clamp(.5rem,1vw,1rem);
    padding-bottom: 2rem;
    z-index: 1;
    transition: opacity .5s
}

@keyframes fade-in-b080847b {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}