:root {
    --window: #2d003d;
    --window-border: #5f2c66;
    --window-hover: #831d83;
    --input-bg: #5f2c66;
    --input-bg2: #80327e;
    --accent-color: #ff00ff;
    --accent-color2: #842184;
    --accent-color3: #d84bd8;
    --background-color: #2d003d;
    --bubble-bottom: #2beab7;
    --error-button: #ec0085;
    --error-text: #ff7098;

    --payment-color: #fff2ff;
    --payment-bg: #2d003d;
    --payment-border: #801477;
    --payment-payed: #a061a6;
    --payment-payed-bg: #46274c;

    --payment-color-payed: #a0d8c9;
    --payment-bg-payed: #182c2d;
    --payment-border-payed: #238966;
    --payment-payed-payed: #182c2d;
    --payment-payed-bg-payed: #8cfad2;

    --payment-color-buy: #d8d5a0;
    --payment-bg-buy: #2d2b18;
    --payment-border-buy: #898223;
}

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}
::-webkit-scrollbar-track {
    background: #2e0039;
}
::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 15px;
}

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,400&display=swap');

*,
*::before,
*::after {
  font-family: 'Ubuntu', sans-serif;
  scroll-behavior: smooth;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    background-color: var(--background-color);
}
main {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav {
    display: flex;
    font-size: 3em;
    margin-bottom: 1em;
    margin-top: -1em;
}
.nav_link {
    padding: 0.5em;
    user-select: none;
    transition: 0.2s all;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}
.nav_link.visible {
    border-bottom: 3px solid var(--accent-color);
    cursor: inherit;
}

#view_salary, #view_savings {
    display: flex;
    flex-direction: column;
    align-items: center;
}
h1 {
    font-size: 4.5em;
}
a {
    appearance: none;
}
button {
    appearance: none;
}

input::placeholder {
    color: #ffffff87;
}


.button {
    padding: 0.5em 1em;
    background-color: var(--accent-color2);
    color: white;
    border-radius: 20px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: 0.2s all;
    border: none;
    font-size: 2.5em;
    font-family: inherit;
}
.button:hover {
    scale: 105%;
    filter: brightness(115%);
}
.service .bottom {
    display: flex;
    flex-direction: column;
    gap: 2em;
    align-items: center;
    background-color: var(--window);
    padding: 1em;
}

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

    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    
    font: inherit;
    color: inherit;
    
    box-shadow: none;
}


.dropdown {
    position: relative;
}

.dropdown_select {
    position: relative;
    background-color: var(--input-bg);
    color: white;
    padding: 0.5em 2em 0.5em 0.5em;
    border-radius: 20px;
    cursor: pointer;
    min-width: 15em;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5em;
    height: 2em;
    transition: 0.2s all;
    font-size: 2.5em;
}
.dropdown_select:hover {
    background-color: var(--accent-color2);
}
.dropdown_select svg {
    width: 2em;
    height: 2em;
}
.dropdown_options {
    position: absolute;
    background-color: var(--input-bg);
    border-radius: 20px;
    box-shadow: 0px 5px 10px #00000057;
    flex-direction: column;
    display: flex;
    z-index: 200;
    user-select: none;
    overflow: hidden;
    width: 100%;
}
.dropdown_option {
    padding: 0.5em 2em 0.5em 0.5em;
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 2.5em;
}
.dropdown_option svg {
    width: 2em;
    height: 2em;
}
.dropdown_option[select="false"] {
    cursor: pointer;
    transition: 0.2s all;
}
.dropdown_option[select="false"]:hover {
    background-color: var(--accent-color2);
}
.dropdown_option[select="true"] {
    background-color: var(--accent-color3);
    color: #ffffffd8;
}

.dropdown .arrow {
    position: absolute;
    height: 6.5em;
    width: 6.5em;
    right: 0.15em;
    top: 0.5em;
    z-index: 10;
    transition: 0.2s all;
    pointer-events: none;
}
.dropdown .arrow[opened="true"] {
    rotate: -90deg;
}
.dropdown .arrow[opened="false"] {
    rotate: 0deg;
}

.date_selector {
    display: flex;
    gap: 1em;
}

.payments {
    display: flex;
    flex-direction: column;
    margin-top: 4em;
    gap: 1em;
    margin-bottom: 4em;
    justify-content: center;
    align-items: center;
}

.payment {
    padding: 1em;
    border-radius: 20px;
    display: flex;
    gap: 1em;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s all;
    font-size: 2em;
    max-width: 95vw;
}
.payment[payed="true"] {
    background-color: var(--payment-bg-payed);
    border: 4px solid var(--payment-border-payed);
    color: var(--payment-color-payed);
    transition: 0.2s all;
}
.payment[payed="false"] {
    background-color: var(--payment-bg);
    border: 4px solid var(--payment-border);
    color: var(--payment-color);
    transition: 0.2s all;
}
.payment[payed="true"] .payment_payed svg {
    background-color: var(--payment-payed-bg-payed);
    color: var(--payment-payed-payed);
    transition: 0.2s all;
}

.payment[payed="false"] .payment_payed svg {
    background-color: var(--payment-payed-bg);
    color: var(--payment-payed);
    transition: 0.2s all;
}

.payment_name {
    width: 9em;
    display: flex;
    gap: 1.5em;
    align-items: center;
}

.payment_edit {
    height: 1.25em;
    width: 1.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    position: relative;
}
.payment_edit svg {
    scale: 105%;
    transition: 0.2s all;
}

.payment_icon {
    height: 1.25em;
    width: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    position: relative;
}
.payment_icon svg {
    scale: 350%;
    translate: 75% 0;
}

.payment_date {
    width: 4em;
    text-align: center;
}
.payment_amount {
    width: 5em;
    text-align: center;
}

.payment_payed {
    height: 1.25em;
    width: 1.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    position: relative;
}
.payment_payed svg {
    scale: 130%;
    transition: 0.2s all;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.payment_clickable {
    position: absolute;
    height: 250%;
    width: 250%;
    cursor: pointer;
    z-index: 2;
}

.payment_pay:hover + svg {
    scale: 180%;
}

.payment_open_edit:hover + svg {
    scale: 130%;
}

.investments {
    display: flex;
    flex-direction: column;
    margin-top: 4em;
    gap: 1em;
    margin-bottom: 4em;
    justify-content: center;
    align-items: center;
}

.investment {
    padding: 1em;
    border-radius: 20px;
    display: flex;
    gap: 1em;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s all;
    font-size: 2em;
}

.investment[buyable="true"] {
    background-color: var(--payment-bg-buy);
    border: 4px solid var(--payment-border-buy);
    color: var(--payment-color-buy);
    transition: 0.2s all;
}
.investment[buyable="false"] {
    background-color: var(--payment-bg);
    border: 4px solid var(--payment-border);
    color: var(--payment-color);
    transition: 0.2s all;
}

.investment_name {
    width: 10em;
}

.investment_edit {
    height: 1.25em;
    width: 1.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    position: relative;
}
.investment_edit svg {
    scale: 105%;
    transition: 0.2s all;
}

.investment_date {
    width: 5em;
    text-align: center;
}
.investment_amount {
    width: 5em;
    text-align: center;
}
.investment_clickable {
    position: absolute;
    height: 250%;
    width: 250%;
    cursor: pointer;
    z-index: 2;
}
.investment_open_edit:hover + svg {
    scale: 130%;
}

.bubble_savings {
    padding: 1.2em;
    display: flex;
    flex-direction: column;
    background-color: var(--window-hover);
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    font-size: 5em;
    width: 3em;
    height: 3em;
    position: relative;
    margin-bottom: 1em;
    border: 6px solid var(--bubble-bottom);
}

.bubble_savings_value {
    font-weight: bold;
    animation: pulse 0.75s infinite ease-in-out;
}

.bubble {
    padding: 1.2em;
    display: flex;
    flex-direction: column;
    background-color: var(--window-hover);
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    font-size: 5em;
    width: 3em;
    height: 3em;
    position: relative;
    margin-bottom: 1em;
    border: 6px solid var(--bubble-bottom);
}

.bubble_top {
    font-weight: bold;
    position: absolute;
    bottom: 2.25em;
    animation: pulse 0.75s infinite ease-in-out;
}
.bubble_bottom {
    font-size: 0.7em;
    opacity: 0.9;
    color: var(--bubble-bottom);
    position: absolute;
    bottom: 1.75em;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.blackground {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0.5;
    z-index: 999;
}
.modal {
    position: fixed;
    padding: 1em;
    background-color: var(--window);
    z-index: 1000;
    top: 50%;
    translate: 0 -50%;
    border-radius: 15px;
    min-width: 25em;
    min-height: 25em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid var(--window-border);
    font-size: 2em;
    transition: 0.1s scale ease-in-out;
}

.blackground_delete {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0.5;
    z-index: 1999;
}
.modal_delete {
    position: fixed;
    padding: 1em;
    background-color: var(--window);
    z-index: 2000;
    top: 50%;
    translate: 0 -50%;
    border-radius: 15px;
    min-width: 17em;
    min-height: 6em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    border: 5px solid var(--window-border);
    font-size: 2em;
}
.payment.needs_paying {
    color: var(--error-text);
}
.delete_buttons {
    display: flex;
    gap: 1em;
    font-size: 0.5em;
}
.delete_buttons .button {
    width: 4em;
    text-align: center;
}
.mark_delete:hover {
    background-color: var(--error-button);
}

.edit {
    gap: 0.5em;
    display: flex;
    flex-direction: column;
    width: 25em;
    height: 25em;
}

.field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    width: 100%;
    position: relative;
}
.field .text {
    background-color: var(--input-bg);
    padding: 0.5em;
    border-radius: 5px;
    transition: 0.2s all;
    width: 14em;
}

.field .text:focus {
    background-color: var(--input-bg2);
}
.field .text:hover {
    background-color: var(--input-bg2);
}

.field .switch {
    position: relative;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    width: 100%;
}

.field .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.field .switch .slider {
    cursor: pointer;
    position: relative;
    background-color: var(--input-bg);
    transition: 0.2s all;
    border-radius: 26px;
    width: 100px;
    height: 52px;
}
.field .switch .slider:hover {
    background-color: var(--input-bg2);
}

.field .switch .slider::before {
    content: "";
    position: absolute;
    height: 40px;
    width: 40px;
    left: 6px;
    bottom: 6px;
    background-color: white;
    transition: 0.2s all;
    border-radius: 50%;
}


.field .switch input:checked + .slider {
    background-color: var(--accent-color);
}

.field .switch input:checked + .slider::before {
    transform: translateX(48px);
}

.edit h2 {
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.edit_buttons {
    display: flex;
    gap: 1em;  
    justify-content: center;
    justify-self: flex-end;
    font-size: 0.5em;
}
.edit_buttons .button {
    box-sizing: border-box;
    width: 15em;
    text-align: center;
}

.modal_error {
    color: var(--error-text);
    text-align: center;
}

.salary_buttons {
    display: flex;
    gap: 1em;
    max-width: 95vw;
}

.salary {
    display: flex;
    flex-direction: column;
    gap: 2em;
    justify-content: center;
    align-items: center;
}
.date_button {
    position: absolute;
    right: 0;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    height: 100%;
    width: 15em;
}

.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}
.login h2 {
    font-size: 3em;
    margin-top: 0;
}
.login_input {
    background-color: var(--input-bg);
    padding: 0.5em;
    border-radius: 5px;
    transition: 0.2s all;
    width: 9em;
    font-size: 1.5em;
    text-align: center;
}

.login_input:focus {
    background-color: var(--input-bg2);
}
.login_input:hover {
    background-color: var(--input-bg2);
}
.login .button {
    min-width: 8em;
    text-align: center;
    font-size: 1.5em;
}
.login_error {
    color: var(--error-text);
    height: 1em;
    margin-top: 0.5em;
    transition: 0.2s all;
}
.pc_title {
    display: none;
}

@media (min-width: 1024px) {
    .pc_title {
        font-size: 1.75em;
        margin-bottom: 1em;
        display: flex;
    }
    .views {
        display: flex;
        gap: 10em;
    }
    .nav {
        font-size: 1.5em;
    }
    h1 {
        font-size: 2.5em;
    }
    .button {
        font-size: inherit;
        border-radius: 8px;
    }
    .dropdown_select {
        font-size: 1em;
        border-radius: 8px;
    }
    .dropdown_options {
        border-radius: 8px;
    }
    .dropdown_option {
        font-size: 1em;
    }
    .dropdown .arrow {
        height: 2em;
        width: 2em;
    }
    .payments {
        gap: 0.5em;
        margin-top: 2em;
        margin-bottom: 2em;
    }
    .payment {
        font-size: 1em;
        border-radius: 8px;
    }
    .payment[payed="true"] {
        border: 2px solid var(--payment-border-payed);
    }
    .payment[payed="false"] {
        border: 2px solid var(--payment-border);
    }
    .payment_name {
        width: 10em;
    }
    .investments {
        gap: 0.5em;
        margin-top: 2em;
        margin-bottom: 2em;
    }
    .investment {
        font-size: 1em;
        border-radius: 8px;
    }
    .investment[buyable="true"] {
        border: 2px solid var(--payment-border-buy);
    }
    .investment[buyable="false"] {
        border: 2px solid var(--payment-border);
    }
    .bubble {
        font-size: 2em;
        border: 3px solid var(--bubble-bottom);
        margin-bottom: 1em;
    }
    .bubble_savings {
        font-size: 2em;
        border: 3px solid var(--bubble-bottom);
        margin-bottom: 1em;
    }
    .bubble_top {
        bottom: 2.4em;
    }
    .bubble_bottom {
        bottom: 2em;
    }

    .modal {
        font-size: 1em;
        border: 3px solid var(--window-border);
    }

    .modal_delete {
        font-size: 1em;
        border: 3px solid var(--window-border);
    }
    .delete_buttons {
        font-size: 1em;
    }
    .edit_buttons {
        font-size: 1em;
    }
    .field .switch {
        height: 39px;
    }
    .field .switch .slider {
        width: 50px;
        height: 26px;
    }
    .field .switch .slider::before {
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
    }
    .field .switch input:checked + .slider::before {
        transform: translateX(24px);
    }
    .salary_buttons {
        display: flex;
        gap: 1em;
    }
    .salary {
        gap: 1em;
    }
}