:root {
    /*------------------------------------*/
    /*Icon Sizing*/
    /*------------------------------------*/
    --icon-size-sm: 2rem;
    --icon-size-md: 2.5rem;
    --icon-size-lg: 4rem;
    --icon-size: var(--icon-size-md);
    /* 'currentColor' is a special value that makes the SVG inherit the text color of its parent element (e.g., a button or a link). */
    --icon-fill-color: currentColor;
    /*------------------------------------*/
    /*Material You Colors*/
    /*------------------------------------*/
    --primary: rgb(76 102 43);
    --surface-tint: rgb(76 102 43);
    --on-primary: rgb(255 255 255);
    --primary-container: rgb(205 237 163);
    --on-primary-container: rgb(53 78 22);
    --secondary: rgb(88 98 73);
    --on-secondary: rgb(255 255 255);
    --secondary-container: rgb(220 231 200);
    --on-secondary-container: rgb(64 74 51);
    --tertiary: rgb(56 102 99);
    --on-tertiary: rgb(255 255 255);
    --tertiary-container: rgb(188 236 231);
    --on-tertiary-container: rgb(31 78 75);
    --error: rgb(186 26 26);
    --on-error: rgb(255 255 255);
    --error-container: rgb(255 218 214);
    --on-error-container: rgb(147 0 10);
    --background: rgb(255 255 255);
    --on-background: rgb(0 0 0);
    --surface: rgb(249 250 239);
    --on-surface: rgb(26 28 22);
    --surface-variant: rgb(225 228 213);
    --on-surface-variant: rgb(68 72 61);
    --outline: rgb(117 121 108);
    --outline-variant: rgb(197 200 186);
    --shadow: rgb(0 0 0);
    --scrim: rgb(0 0 0);
    --inverse-surface: rgb(47 49 42);
    --inverse-on-surface: rgb(241 242 230);
    --inverse-primary: rgb(177 209 138);
    --primary-fixed: rgb(205 237 163);
    --on-primary-fixed: rgb(16 32 0);
    --primary-fixed-dim: rgb(177 209 138);
    --on-primary-fixed-variant: rgb(53 78 22);
    --secondary-fixed: rgb(220 231 200);
    --on-secondary-fixed: rgb(21 30 11);
    --secondary-fixed-dim: rgb(191 203 173);
    --on-secondary-fixed-variant: rgb(64 74 51);
    --tertiary-fixed: rgb(188 236 231);
    --on-tertiary-fixed: rgb(0 32 30);
    --tertiary-fixed-dim: rgb(160 208 203);
    --on-tertiary-fixed-variant: rgb(31 78 75);
    --surface-dim: rgb(218 219 208);
    --surface-bright: rgb(249 250 239);
    --surface-container-lowest: rgb(255 255 255);
    --surface-container-low: rgb(243 244 233);
    --surface-container: rgb(238 239 227);
    --surface-container-high: rgb(232 233 222);
    --surface-container-highest: rgb(226 227 216);
}
/*------------------------------------*/
/*SVG Icon*/
/*------------------------------------*/
.icon-svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: var(--icon-fill-color);
    display: inline-block;
    vertical-align: middle;
}

.icon-svg-sm {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

.icon-svg-md {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.icon-svg-lg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.m3-body {
    background-color: var(--background);
    color: var(--on-background);
}
/*------------------------------------*/
/*Material Input Box*/
/*------------------------------------*/
.m3-input-box {
    height: 3rem;
    width: 100%;
    padding: 0 0.75rem;
    border: 2px solid var(--outline);
    border-radius: 0.4rem;
    outline: none;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background-color: var(--surface-container-high);
    color: var(--on-surface);
    font-size: 1rem;
}

    .m3-input-box:hover {
        border-color: var(--primary);
    }

    .m3-input-box:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(var(--primary), 0.4);
    }

    .m3-input-box::selection {
        background-color: var(--primary);
        color: var(--on-primary);
    }

/*------------------------------------*/
/*Material Button*/
/*------------------------------------*/
.m3-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 20px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1px;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

    .m3-button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--primary-container);
    }

/* 1. Filled Button (Default) */
.m3-button,
.m3-button-filled {
    background-color: var(--primary);
    color: var(--on-primary);
}

    .m3-button:hover,
    .m3-button-filled:hover {
        background-color: color-mix(in srgb, var(--primary) 92%, var(--on-primary) 8%);
    }

    .m3-button:active,
    .m3-button-filled:active {
        background-color: color-mix(in srgb, var(--primary) 88%, var(--on-primary) 12%);
    }

/* 2. Outlined Button */
.m3-button-outlined {
    background-color: transparent;
    color: var(--primary);
    border: 1px solid var(--outline);
}

    .m3-button-outlined:hover {
        background-color: color-mix(in srgb, transparent 92%, var(--primary) 8%);
    }

    .m3-button-outlined:active {
        background-color: color-mix(in srgb, transparent 88%, var(--primary) 12%);
    }

    .m3-button-outlined:focus-visible {
        border-color: var(--primary);
        box-shadow: none;
    }

/* 3. Text Button */
.m3-button-text {
    background-color: transparent;
    color: var(--primary);
    padding: 10px 12px;
}

    .m3-button-text:hover {
        background-color: color-mix(in srgb, transparent 92%, var(--primary) 8%);
    }

    .m3-button-text:active {
        background-color: color-mix(in srgb, transparent 88%, var(--primary) 12%);
    }