:root {
    --light: #FFFBEA;
    --medium: #6B6961;
    --dark: #333333;
    --blue: #498DF6;

}

@font-face {
    font-family: Reenie;
    src: url(/media/Reenie.ttf);
}

@font-face {
    font-family: Quicksand;
    src: url(/media/Quicksand.ttf);
}

body {
    background-color: var(--light);
    color: var(--dark);
    font-family: "Quicksand", sans-serif;
    margin: 0;
    text-align: center;
    text-size-adjust: none;
    font-size: 20px;
    overflow: hidden;
    display: grid;
    justify-content: stretch;
    justify-items: stretch;
    align-content: stretch;
    align-items: stretch;
    gap: .1rem;
}

h1 {
    font-family: "Reenie", sans-serif;
    background: linear-gradient(270deg, #F7506E,
            #F55793,
            #CA65AC,
            #8A79D1,
            #498DF6,
            #3DA0CF,
            #31B2A8,
            #77BF73,
            #BDCC3E,
            #FDD50D,
            #F6971C,
            #FE6736,
            #F84848);
    background-size: 800% 800%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease infinite;
    margin: 0px;
    padding: 0px;
    font-size: 4rem;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

h2 {
    font-size: 3.5rem;
    font-family: "Reenie", sans-serif;
    background: linear-gradient(270deg, #F7506E,
            #F55793,
            #CA65AC,
            #8A79D1,
            #498DF6,
            #3DA0CF,
            #31B2A8,
            #77BF73,
            #BDCC3E,
            #FDD50D,
            #F6971C,
            #FE6736,
            #F84848);
    background-size: 800% 800%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease infinite;
    margin: 0px;
    padding: 0px;
}

h3 {
    font-size: 3rem;
    font-family: "Reenie", sans-serif;
    color: var(--dark);
    margin: 0px;
    padding: 0px;
    background-color: none;
    border: none;
}

.planner-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    justify-items: center;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.planner-nav button {
    font-size: 3rem;
    font-family: "Reenie", sans-serif;
    color: var(--dark);
    margin: 0px;
    padding: 0px;
    background-color: var(--light);
    border: none;
}

.planner-nav button:hover,
h3:hover {
    background: linear-gradient(270deg, #F7506E,
            #F55793,
            #CA65AC,
            #8A79D1,
            #498DF6,
            #3DA0CF,
            #31B2A8,
            #77BF73,
            #BDCC3E,
            #FDD50D,
            #F6971C,
            #FE6736,
            #F84848);
    background-size: 800% 800%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 2s ease infinite;
}

.section {
    display: none;
}

.section.active {
    display: grid;
}

.planner-dash {
    grid-template-columns: .75fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "to-do week month year"
        "event week month year";
    gap: .25rem;
    height: 82vh;
    padding: .1rem;
}

.dash-todo {
    grid-area: to-do;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    position: relative;
    padding: .15rem;
    
    border-radius: 50px;
    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(45deg,
            #F7506E,
            #F55793,
            #CA65AC,
            #8A79D1,
            #498DF6,
            #3DA0CF,
            #31B2A8,
            #77BF73,
            #BDCC3E,
            #FDD50D,
            #F6971C,
            #FE6736,
            #F84848) border-box;

    border: 5px solid transparent;
}

.dash-event {
    grid-area: event;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    position: relative;
    padding: .15rem;
    
    border-radius: 50px;
    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(45deg,
            #F7506E,
            #F55793,
            #CA65AC,
            #8A79D1,
            #498DF6,
            #3DA0CF,
            #31B2A8,
            #77BF73,
            #BDCC3E,
            #FDD50D,
            #F6971C,
            #FE6736,
            #F84848) border-box;

    border: 5px solid transparent;
}

.dash-weekly {
    grid-area: week;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    position: relative;
    padding: .15rem;
    
    border-radius: 50px;
    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(45deg,
            #F7506E,
            #F55793,
            #CA65AC,
            #8A79D1,
            #498DF6,
            #3DA0CF,
            #31B2A8,
            #77BF73,
            #BDCC3E,
            #FDD50D,
            #F6971C,
            #FE6736,
            #F84848) border-box;

    border: 5px solid transparent;
}

.dash-monthly {
    grid-area: month;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    position: relative;
    padding: .15rem;
    
    border-radius: 50px;
    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(45deg,
            #F7506E,
            #F55793,
            #CA65AC,
            #8A79D1,
            #498DF6,
            #3DA0CF,
            #31B2A8,
            #77BF73,
            #BDCC3E,
            #FDD50D,
            #F6971C,
            #FE6736,
            #F84848) border-box;

    border: 5px solid transparent;
}

.dash-yearly {
    grid-area: year;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    position: relative;
    padding: .15rem;    
    
    border-radius: 50px;
    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(45deg,
            #F7506E,
            #F55793,
            #CA65AC,
            #8A79D1,
            #498DF6,
            #3DA0CF,
            #31B2A8,
            #77BF73,
            #BDCC3E,
            #FDD50D,
            #F6971C,
            #FE6736,
            #F84848) border-box;

    border: 5px solid transparent;
}

.dash-todo::-webkit-scrollbar,
.dash-event::-webkit-scrollbar,
.dash-weekly::-webkit-scrollbar,
.dash-monthly::-webkit-scrollbar,
.dash-yearly::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.add {
    grid-template-columns: auto;
    justify-content: stretch;
    align-items: start;
    width: 60%;
    margin: 0 auto;
}

.add-form {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    font-size: 1.5rem;
    gap: .5rem;
    width: 100%;
}

.add-form-sub {
    flex-direction: column;
    justify-content: center;
    font-size: 1.5rem;
    gap: .5rem;
    width: 100%;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    font-family: "Quicksand", sans-serif;
    text-align: center;
    padding: 0.5rem;
    font-size: 1.5rem;

    border-radius: 50px;
    color: var(--dark);
    cursor: pointer;

    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(to right,
            #F7506E,
            #F55793,
            #CA65AC,
            #8A79D1,
            #498DF6,
            #3DA0CF,
            #31B2A8,
            #77BF73,
            #BDCC3E,
            #FDD50D,
            #F6971C,
            #FE6736,
            #F84848) border-box;

    border: 5px solid transparent;
}

.select-todo {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    font-family: "Quicksand", sans-serif;
    text-align: center;
    padding: 0.25rem;
    font-size: 1.25rem;
    margin-bottom: .1rem;
    border: none;
    border-radius: 50px;
    color: var(--dark);
    cursor: pointer;

    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(to right,
            #F7506E,
            #F55793,
            #CA65AC,
            #8A79D1,
            #498DF6,
            #3DA0CF,
            #31B2A8,
            #77BF73,
            #BDCC3E,
            #FDD50D,
            #F6971C,
            #FE6736,
            #F84848) border-box;

    border: 5px solid transparent;
}

.select-weekly,
.select-monthly,
.select-yearly {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    font-family: "Quicksand", sans-serif;
    text-align: center;
    padding: 0.25rem;
    font-size: 1.25rem;
    margin-bottom: .1rem;
    border: none;
    border-radius: 50px;
    color: var(--dark);
    cursor: pointer;

    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(to right,
            #F7506E,
            #F55793,
            #CA65AC,
            #8A79D1,
            #498DF6,
            #3DA0CF,
            #31B2A8,
            #77BF73,
            #BDCC3E,
            #FDD50D,
            #F6971C,
            #FE6736,
            #F84848) border-box;

    border: 5px solid transparent;
}

input[type="text"],
textarea {
    font-family: "Quicksand", sans-serif;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    border: 5px solid transparent;
    border-radius: 50px;
    width: 100%;
    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(to right,
            #F7506E, #F55793, #CA65AC, #8A79D1,
            #498DF6, #3DA0CF, #31B2A8, #77BF73,
            #BDCC3E, #FDD50D, #F6971C, #FE6736, #F84848) border-box;
    color: var(--dark);
    outline: none;
    box-sizing: border-box;
}

input[type="submit"],
button[type="submit"] {
    font-family: "Quicksand", sans-serif;
    font-size: 1.5rem;
    padding: 0.5rem 2rem;
    border: 5px solid transparent;
    border-radius: 50px;
    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(to right,
            #F7506E, #F55793, #CA65AC, #8A79D1,
            #498DF6, #3DA0CF, #31B2A8, #77BF73,
            #BDCC3E, #FDD50D, #F6971C, #FE6736, #F84848) border-box;
    color: #2D2620;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.add-number {
    font-family: "Quicksand", sans-serif;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    border: 5px solid transparent;
    border-radius: 50px;
    width: 100%;
    box-sizing: border-box;
    color: var(--dark);
    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(to right,
            #F7506E, #F55793, #CA65AC, #8A79D1,
            #498DF6, #3DA0CF, #31B2A8, #77BF73,
            #BDCC3E, #FDD50D, #F6971C, #FE6736, #F84848) border-box;
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="date"] {
    font-family: "Quicksand", sans-serif;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    border: 5px solid transparent;
    border-radius: 50px;
    width: 100%;
    box-sizing: border-box;
    color: var(--dark);
    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(to right,
            #F7506E, #F55793, #CA65AC, #8A79D1,
            #498DF6, #3DA0CF, #31B2A8, #77BF73,
            #BDCC3E, #FDD50D, #F6971C, #FE6736, #F84848) border-box;
    cursor: pointer;
}


.rainbow-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Quicksand", sans-serif;
    background-color: var(--light);
    color: var(--dark);
    padding: 1.5rem 2.5rem;
    font-size: 1.5rem;
    z-index: 1000;
    border-radius: 40px;
    border: 5px solid transparent;
    background:
        linear-gradient(var(--light), var(--light)) padding-box,
        linear-gradient(to right,
            #F7506E, #F55793, #CA65AC, #8A79D1,
            #498DF6, #3DA0CF, #31B2A8, #77BF73,
            #BDCC3E, #FDD50D, #F6971C, #FE6736, #F84848) border-box;
    animation:
        popupFadeIn 0.5s ease-out;
    text-align: center;
    white-space: nowrap;
}


@keyframes popupFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.9) rotate(0deg);
    }

    50% {
        transform: scale(1.05) rotate(2deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.todo {
    align-content: start;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
    padding: .15rem;
}

.current-todo::-webkit-scrollbar,
.past-todo::-webkit-scrollbar {
    display: none;
}

.current-todo {
    grid-column: 1;
}

.current-todo-filtered {
    display: grid;
    align-content: start;
    grid-template-columns: [start] 1fr 3fr 4fr 1fr [end];
    font-size: 1rem;
    gap: .2rem;
    width: 100%;
    height: 74vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.past-todo {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr;
}

.past-todo-filtered {
    display: grid;
    align-content: start;
    grid-template-columns: [start] 1fr 3fr 4fr 1fr [end];
    font-size: 1rem;
    gap: .2rem;
    width: 100%;
    height: 64vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.todo-cell {
    border-radius: 50px;
    padding: .15rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.weekly,
.monthly,
.yearly {
    align-content: start;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
    padding: .15rem;
}

.current-weekly::-webkit-scrollbar,
.past-weekly::-webkit-scrollbar,
.current-monthly::-webkit-scrollbar,
.past-monthly::-webkit-scrollbar,
.current-yearly::-webkit-scrollbar,
.past-yearly::-webkit-scrollbar {
    display: none;
}

.current-weekly,
.current-monthly,
.current-yearly {
    grid-column: 1;
}

.current-weekly-filtered,
.current-monthly-filtered,
.current-yearly-filtered {
    display: grid;
    align-content: start;
    grid-template-columns: [start] 1fr 1fr 1fr 1fr 1fr [end];
    font-size: 1rem;
    gap: .2rem;
    width: 100%;
    height: 74vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.past-weekly,
.past-monthly,
.past-yearly {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr;
}

.past-weekly-filtered,
.past-monthly-filtered {
    display: grid;
    align-content: start;
    grid-template-columns: [start] 1fr 1fr 1fr 1fr 1fr [end];
    font-size: 1rem;
    gap: .2rem;
    width: 100%;
    height: 64vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.past-yearly-filtered {
    display: grid;
    align-content: start;
    grid-template-columns: [start] 1fr 1fr 1fr 1fr 1fr [end];
    font-size: 1rem;
    gap: .2rem;
    width: 100%;
    height: 68.75vh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.weekly-cell,
.monthly-cell,
.yearly-cell {
    border-radius: 50px;
    padding: .15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.goal-sub {
    border-radius: 50px;
    padding: .15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-shadow: 1px 1px 1px #FFFBEA;
    position: relative;
}

.sparkle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: twinkle 1.5s infinite;
}


@keyframes twinkle {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

.weekly-spacer,
.monthly-spacer,
.yearly-spacer {
    border-radius: 25px;
    grid-column: 1;
    grid-row: span 3;
}

.weekly-project,
.weekly-desc,
.monthly-project,
.monthly-desc,
.yearly-project,
.yearly-desc {
    grid-column: 2 / span 4;
}

.goal-number {
    font-family: "Quicksand", sans-serif;
    font-size: 1rem;
    border-radius: 50px;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--light);
    appearance: textfield;
    -moz-appearance: textfield;
}

.confetti {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    animation: confettiFall 1s ease-out forwards;
    z-index: 1000;
    pointer-events: none;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) rotate(720deg);
    }
}

.todo-check-label {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.todo-check-label input[type="checkbox"] {
    display: none;
}

.todo-check-label .todo-check-span {
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
}

.todo-check-label input:checked+.todo-check-span::after {
    content: '';
    width: 10px;
    height: 18px;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


.weekly-check-label,
.monthly-check-label,
.yearly-check-label {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.weekly-check-label input[type="checkbox"],
.monthly-check-label input[type="checkbox"],
.yearly-check-label input[type="checkbox"] {
    display: none;
}

.weekly-check-label .weekly-check-span,
.monthly-check-label .monthly-check-span,
.yearly-check-label .yearly-check-span {
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
}

.weekly-check-label input:checked+.weekly-check-span::after,
.monthly-check-label input:checked+.monthly-check-span::after,
.yearly-check-label input:checked+.yearly-check-span::after {
    content: '';
    width: 10px;
    height: 18px;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}