@import url("https://use.typekit.net/byg5wpx.css");

:root {
    /*--font-lite: "dejanire-headline", serif;*/ /*OG*/
    /*--font-normal: "big-caslon-fb", serif;*/ /*OG*/
    --font-lite: "Raleway", sans-serif;
    --font-normal: "Raleway", sans-serif;
    --font-selection: "Arial", sans-serif;

    /*font-family: "dejanire-headline";*/
    --font-lite-weight: 300;

    /*font-family: "big-caslon-fb";*/ 
    --font-normal-weight: 400;

    --font-raleway: "Raleway", sans-serif;
    --font-optical-sizing: auto;
}

/* Default (dark) theme */
.dark-theme {
    --background-color: #2f2f2f;
    --container-bg-color: #3b3b3b;
    --text-color: #f4f4f4;
    --input-bg-color: #4a4a4a;
    --input-text-color: #f4f4f4;
    --border-color: #555;
    --button-bg-color: #2c2c2b;
    --button-text-color: #d3d3d3;
    --button-hover-bg-color: #09abf7;
    --button-hover-text-color: #2f2f2f;
    --delete-button-bg-color: #ff4d4d;
    --delete-button-hover-bg-color: #640c0c;
    --delete-button-hover-color: #f4f4f4;
    --copy-button-bg-color: #4CAF50;
    --copy-button-hover-bg-color: #2b612e;
    --copy-button-hover-color: #f4f4f4;
    --popup-bg-color: #252525;
    --popup-text-color: #56b6f7;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}


/* New Theme (based on a darker shade of #1F85DE) */
.richBlue-theme {
    --background-color: #1A75C8;           /* Darker shade for the background */
    --container-bg-color: #145BA3;         /* Even darker for containers */
    --text-color: #E0E0E0;                 /* Light gray text color */
    --input-bg-color: #104A85;             /* Dark input background */
    --input-text-color: #E0E0E0;           /* Light gray input text color */
    --border-color: #0F3E6D;               /* Darker blue-gray for borders */
    --button-bg-color: #1F85DE;            /* Original color for primary button */
    --button-text-color: #FFFFFF;          /* White text on buttons */
    --button-hover-bg-color: #176AB3;      /* Darker shade for button hover */
    --button-hover-text-color: #FFFFFF;    /* White text on hover */
    --delete-button-bg-color: #E57373;     /* Soft red for delete button */
    --delete-button-hover-bg-color: #D32F2F;/* Darker red for delete hover */
    --delete-button-hover-color: #FFFFFF;  /* White text on hover for delete */
    --copy-button-bg-color: #66BB6A;       /* Green for copy button */
    --copy-button-hover-bg-color: #388E3C; /* Darker green for copy hover */
    --copy-button-hover-color: #FFFFFF;    /* White text on hover for copy */
    --popup-bg-color: #1F85DE;             /* Original theme color for popup */
    --popup-text-color: #FFFFFF;           /* White text in popup */
    --shadow-color: rgba(0, 0, 0, 0.5);    /* Darker shadow for elements */
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); /* Stronger inner shadow */
}

/* New Theme (based on a darker shade of #1B5689) */
.darkBlue-theme {
    --background-color: #153F66;           /* Darker shade for the background */
    --container-bg-color: #112F4D;         /* Even darker for containers */
    --text-color: #E0E0E0;                 /* Light gray text color */
    --input-bg-color: #0E243B;             /* Dark input background */
    --input-text-color: #E0E0E0;           /* Light gray input text color */
    --border-color: #0C1D30;               /* Darker blue-gray for borders */
    --button-bg-color: #1B5689;            /* Original color for primary button */
    --button-text-color: #FFFFFF;          /* White text on buttons */
    --button-hover-bg-color: #143C64;      /* Darker shade for button hover */
    --button-hover-text-color: #FFFFFF;    /* White text on hover */
    --delete-button-bg-color: #E57373;     /* Soft red for delete button */
    --delete-button-hover-bg-color: #D32F2F;/* Darker red for delete hover */
    --delete-button-hover-color: #FFFFFF;  /* White text on hover for delete */
    --copy-button-bg-color: #66BB6A;       /* Green for copy button */
    --copy-button-hover-bg-color: #388E3C; /* Darker green for copy hover */
    --copy-button-hover-color: #FFFFFF;    /* White text on hover for copy */
    --popup-bg-color: #1B5689;             /* Original theme color for popup */
    --popup-text-color: #FFFFFF;           /* White text in popup */
    --shadow-color: rgba(0, 0, 0, 0.5);    /* Darker shadow for elements */
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); /* Stronger inner shadow */
}

.pink-theme {
    /* New Theme (based on a darker shade of #9039AC) */
    --background-color: #732D8A;           /* Darker shade for the background */
    --container-bg-color: #5B236C;         /* Even darker for containers */
    --text-color: #E0E0E0;                 /* Light gray text color */
    --input-bg-color: #4A1B55;             /* Dark input background */
    --input-text-color: #E0E0E0;           /* Light gray input text color */
    --border-color: #3A1542;               /* Darker purple-gray for borders */
    --button-bg-color: #9039AC;            /* Original color for primary button */
    --button-text-color: #FFFFFF;          /* White text on buttons */
    --button-hover-bg-color: #6E2C85;      /* Darker shade for button hover */
    --button-hover-text-color: #FFFFFF;    /* White text on hover */
    --delete-button-bg-color: #732D8A;     /* Soft red for delete button */
    --delete-button-hover-bg-color: #D32F2F;/* Darker red for delete hover */
    --delete-button-hover-color: #FFFFFF;  /* White text on hover for delete */
    --copy-button-bg-color: #b462cf;       /* Green for copy button */
    --copy-button-hover-bg-color: #388E3C; /* Darker green for copy hover */
    --copy-button-hover-color: #FFFFFF;    /* White text on hover for copy */
    --popup-bg-color: #9039AC;             /* Original theme color for popup */
    --popup-text-color: #FFFFFF;           /* White text in popup */
    --shadow-color: rgba(0, 0, 0, 0.5);    /* Darker shadow for elements */
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); /* Stronger inner shadow */
}


.seaFoamGreen-theme {
    /* New Theme (based on a darker shade of #39ABAC) */
    --background-color: #2D8586;           /* Darker shade for the background */
    --container-bg-color: #24696A;         /* Even darker for containers */
    --text-color: #E0E0E0;                 /* Light gray text color */
    --input-bg-color: #1D5455;             /* Dark input background */
    --input-text-color: #E0E0E0;           /* Light gray input text color */
    --border-color: #164042;               /* Darker teal-gray for borders */
    --button-bg-color: #39ABAC;            /* Original color for primary button */
    --button-text-color: #FFFFFF;          /* White text on buttons */
    --button-hover-bg-color: #2D8586;      /* Darker shade for button hover */
    --button-hover-text-color: #FFFFFF;    /* White text on hover */
    --delete-button-bg-color: #E57373;     /* Soft red for delete button */
    --delete-button-hover-bg-color: #D32F2F;/* Darker red for delete hover */
    --delete-button-hover-color: #FFFFFF;  /* White text on hover for delete */
    --copy-button-bg-color: #66BB6A;       /* Green for copy button */
    --copy-button-hover-bg-color: #388E3C; /* Darker green for copy hover */
    --copy-button-hover-color: #FFFFFF;    /* White text on hover for copy */
    --popup-bg-color: #39ABAC;             /* Original theme color for popup */
    --popup-text-color: #FFFFFF;           /* White text in popup */
    --shadow-color: rgba(0, 0, 0, 0.5);    /* Darker shadow for elements */
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); /* Stronger inner shadow */
}

.brightOrange-theme {
    /* New Theme (based on a darker shade of #E1912A) */
    --background-color: #B87323;           /* Darker shade for the background */
    --container-bg-color: #945D1C;         /* Even darker for containers */
    --text-color: #E0E0E0;                 /* Light gray text color */
    --input-bg-color: #754916;             /* Dark input background */
    --input-text-color: #E0E0E0;           /* Light gray input text color */
    --border-color: #5A3611;               /* Darker brown-gray for borders */
    --button-bg-color: #E1912A;            /* Original color for primary button */
    --button-text-color: #FFFFFF;          /* White text on buttons */
    --button-hover-bg-color: #B87323;      /* Darker shade for button hover */
    --button-hover-text-color: #FFFFFF;    /* White text on hover */
    --delete-button-bg-color: #E57373;     /* Soft red for delete button */
    --delete-button-hover-bg-color: #D32F2F;/* Darker red for delete hover */
    --delete-button-hover-color: #FFFFFF;  /* White text on hover for delete */
    --copy-button-bg-color: #66BB6A;       /* Green for copy button */
    --copy-button-hover-bg-color: #388E3C; /* Darker green for copy hover */
    --copy-button-hover-color: #FFFFFF;    /* White text on hover for copy */
    --popup-bg-color: #E1912A;             /* Original theme color for popup */
    --popup-text-color: #FFFFFF;           /* White text in popup */
    --shadow-color: rgba(0, 0, 0, 0.5);    /* Darker shadow for elements */
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); /* Stronger inner shadow */
}

.burntOrange-theme {
    /* New Theme (based on a darker shade of #BA6900) */
    --background-color: #944F00;           /* Darker shade for the background */
    --container-bg-color: #753D00;         /* Even darker for containers */
    --text-color: #E0E0E0;                 /* Light gray text color */
    --input-bg-color: #5C3000;             /* Dark input background */
    --input-text-color: #E0E0E0;           /* Light gray input text color */
    --border-color: #452400;               /* Darker brown-gray for borders */
    --button-bg-color: #BA6900;            /* Original color for primary button */
    --button-text-color: #FFFFFF;          /* White text on buttons */
    --button-hover-bg-color: #944F00;      /* Darker shade for button hover */
    --button-hover-text-color: #FFFFFF;    /* White text on hover */
    --delete-button-bg-color: #E57373;     /* Soft red for delete button */
    --delete-button-hover-bg-color: #D32F2F;/* Darker red for delete hover */
    --delete-button-hover-color: #FFFFFF;  /* White text on hover for delete */
    --copy-button-bg-color: #66BB6A;       /* Green for copy button */
    --copy-button-hover-bg-color: #388E3C; /* Darker green for copy hover */
    --copy-button-hover-color: #FFFFFF;    /* White text on hover for copy */
    --popup-bg-color: #BA6900;             /* Original theme color for popup */
    --popup-text-color: #FFFFFF;           /* White text in popup */
    --shadow-color: rgba(0, 0, 0, 0.5);    /* Darker shadow for elements */
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); /* Stronger inner shadow */
}

.aggies-theme {
    /* Maroon Theme with White Accents */
    --background-color: #c0c0c0;           /* Exact maroon color for the background */
    --container-bg-color: #500000;         /* Slightly darker maroon for containers */
    --text-color: #FFFFFF;                 /* White text color for high contrast */
    --input-bg-color: #400000;             /* Dark maroon for input backgrounds */
    --input-text-color: #FFFFFF;           /* White input text color */
    --border-color: #2C0000;               /* Darker maroon for borders */
    --button-bg-color: #FFFFFF;            /* White background for buttons */
    --button-text-color: #500000;          /* Maroon text on buttons */
    --button-hover-bg-color: #E0E0E0;      /* Light gray for button hover */
    --button-hover-text-color: #500000;    /* Maroon text on hover */
    --delete-button-bg-color: #000000;     /* Soft red for delete button */
    --delete-button-hover-bg-color: #D32F2F;/* Darker red for delete hover */
    --delete-button-hover-color: #FFFFFF;  /* White text on hover for delete */
    --copy-button-bg-color: #b4b4b4;       /* Green for copy button */
    --copy-button-hover-bg-color: #388E3C; /* Darker green for copy hover */
    --copy-button-hover-color: #FFFFFF;    /* White text on hover for copy */
    --popup-bg-color: #500000;             /* Maroon background for popup */
    --popup-text-color: #FFFFFF;           /* White text in popup */
    --shadow-color: rgba(0, 0, 0, 0.5);    /* Darker shadow for elements */
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); /* Stronger inner shadow */
}

.canaryYellow-theme {
    /* New Theme (based on a darker shade of #FEFE7E) */
    --background-color: #DCDC6A;           /* Darker shade for the background */
    --container-bg-color: #C0C055;         /* Even darker for containers */
    --text-color: #2F2F2F;                 /* Dark gray text color */
    --input-bg-color: #A3A342;             /* Dark input background */
    --input-text-color: #2F2F2F;           /* Dark gray input text color */
    --border-color: #898937;               /* Darker yellow-gray for borders */
    --button-bg-color: #FEFE7E;            /* Original light pastel yellow for buttons */
    --button-text-color: #2F2F2F;          /* Dark gray text on buttons */
    --button-hover-bg-color: #E0E06B;      /* Slightly darker yellow for button hover */
    --button-hover-text-color: #2F2F2F;    /* Dark gray text on hover */
    --delete-button-bg-color: #e7e57a;     /* Soft red for delete button */
    --delete-button-hover-bg-color: #D32F2F;/* Darker red for delete hover */
    --delete-button-hover-color: #FFFFFF;  /* White text on hover for delete */
    --copy-button-bg-color: #66BB6A;       /* Green for copy button */
    --copy-button-hover-bg-color: #388E3C; /* Darker green for copy hover */
    --copy-button-hover-color: #FFFFFF;    /* White text on hover for copy */
    --popup-bg-color: #FEFE7E;             /* Original light pastel yellow for popup */
    --popup-text-color: #2F2F2F;           /* Dark gray text in popup */
    --shadow-color: rgba(0, 0, 0, 0.3);    /* Darker shadow for elements */
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* Stronger inner shadow */
}

.mintGreen-theme {
    /* New Theme (based on a darker shade of #32723D) */
    --background-color: #285D31;           /* Darker shade for the background */
    --container-bg-color: #204828;         /* Even darker for containers */
    --text-color: #E0E0E0;                 /* Light gray text color */
    --input-bg-color: #17381F;             /* Dark input background */
    --input-text-color: #E0E0E0;           /* Light gray input text color */
    --border-color: #122C18;               /* Darker green-gray for borders */
    --button-bg-color: #32723D;            /* Original deep forest green for buttons */
    --button-text-color: #FFFFFF;          /* White text on buttons */
    --button-hover-bg-color: #285D31;      /* Darker green for button hover */
    --button-hover-text-color: #FFFFFF;    /* White text on hover */
    --delete-button-bg-color: #187537;     /* Soft red for delete button */
    --delete-button-hover-bg-color: #D32F2F;/* Darker red for delete hover */
    --delete-button-hover-color: #FFFFFF;  /* White text on hover for delete */
    --copy-button-bg-color: #66BB6A;       /* Green for copy button */
    --copy-button-hover-bg-color: #388E3C; /* Darker green for copy hover */
    --copy-button-hover-color: #FFFFFF;    /* White text on hover for copy */
    --popup-bg-color: #32723D;             /* Original deep forest green for popup */
    --popup-text-color: #FFFFFF;           /* White text in popup */
    --shadow-color: rgba(0, 0, 0, 0.5);    /* Darker shadow for elements */
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); /* Stronger inner shadow */
}


.colbaltBlue-theme {
    /* New Theme (based on a darker shade of #324D72) */
    --background-color: #283D5A;           /* Darker shade for the background */
    --container-bg-color: #22314A;         /* Even darker for containers */
    --text-color: #E0E0E0;                 /* Light gray text color */
    --input-bg-color: #1A2638;             /* Dark input background */
    --input-text-color: #E0E0E0;           /* Light gray input text color */
    --border-color: #141D2A;               /* Darker blue-gray for borders */
    --button-bg-color: #324D72;            /* Original deep blue-gray for buttons */
    --button-text-color: #FFFFFF;          /* White text on buttons */
    --button-hover-bg-color: #283D5A;      /* Darker blue-gray for button hover */
    --button-hover-text-color: #FFFFFF;    /* White text on hover */
    --delete-button-bg-color: #283D5A;     /* Soft red for delete button */
    --delete-button-hover-bg-color: #D32F2F;/* Darker red for delete hover */
    --delete-button-hover-color: #FFFFFF;  /* White text on hover for delete */
    --copy-button-bg-color: #426494;       /* Green for copy button */
    --copy-button-hover-bg-color: #388E3C; /* Darker green for copy hover */
    --copy-button-hover-color: #FFFFFF;    /* White text on hover for copy */
    --popup-bg-color: #324D72;             /* Original deep blue-gray for popup */
    --popup-text-color: #FFFFFF;           /* White text in popup */
    --shadow-color: rgba(0, 0, 0, 0.5);    /* Darker shadow for elements */
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7); /* Stronger inner shadow */
}


.light-theme {
    --background-color: #ecf3f6;
    --container-bg-color: #ecf3f6;
    --text-color: #040404;
    --input-bg-color: #ccd6da;
    --input-text-color: #2f2f2f;
    --border-color: #ccc;
    --button-bg-color: #535252;
    --button-text-color: #ffffff;
    --button-hover-bg-color: #6b6b6b;
    --button-hover-text-color: #ffffff;
    --delete-button-bg-color: #adadad;
    --delete-button-hover-bg-color: #ff1a1a;
    --copy-button-bg-color: #535252;
    --copy-button-hover-bg-color: #45a049;
    --popup-bg-color: #FFFFFF;
    --popup-text-color: #2f2f2f;
    --shadow-color: rgba(0, 0, 0, .4);
    --inner-shadow: inset 0 0 5px var(rgba(0, 0, 0, 0.25));
}

.sand-theme {
    /* New Theme (based on a darker shade of #AEAC9E) */
    --background-color: #8C8A7E;           /* Darker shade for the background */
    --container-bg-color: #6F6D64;         /* Even darker for containers */
    --text-color: #ddd8d1;                 /* Dark gray text color */
    --input-bg-color: #5A584F;             /* Dark input background */
    --input-text-color: #ddd8d1;           /* Dark gray input text color */
    --border-color: #4B493F;               /* Darker beige-gray for borders */
    --button-bg-color: #AEAC9E;            /* Original muted gray-beige for buttons */
    --button-text-color: #2F2F2F;          /* Dark gray text on buttons */
    --button-hover-bg-color: #938F81;      /* Slightly darker gray-beige for button hover */
    --button-hover-text-color: #2F2F2F;    /* Dark gray text on hover */
    --delete-button-bg-color: #2F2F2F;     /* Soft red for delete button */
    --delete-button-hover-bg-color: #D32F2F;/* Darker red for delete hover */
    --delete-button-hover-color: #FFFFFF;  /* White text on hover for delete */
    --copy-button-bg-color: #5A584F;       /* Green for copy button */
    --copy-button-hover-bg-color: #388E3C; /* Darker green for copy hover */
    --copy-button-hover-color: #FFFFFF;    /* White text on hover for copy */
    --popup-bg-color: #AEAC9E;             /* Original muted gray-beige for popup */
    --popup-text-color: #2F2F2F;           /* Dark gray text in popup */
    --shadow-color: rgba(0, 0, 0, 0.3);    /* Subtle shadow for elements */
    --inner-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* Softer inner shadow */
}

body {
    font-family: var(--font-lite);
    font-weight: var(--font-lite-weight);
    font-display: swap;
    font-style: normal;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-shrink: 1;
    flex-grow: 0;
    align-content: center;
    align-self: center;
    justify-self: center;
    width: 90%;
    margin-top: 20px;
    margin-bottom:20px;
    max-width: 1024px;
    background-color: var(--container-bg-color);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

h1 {
    font-family: var(--font-lite);
    font-weight: var(--font-lite-weight);
    text-align: left;
    font-size: 4vh;
    margin-top: 0px;
    margin-bottom: 0px;
}

.subtitle {
    font-family: var(--font-lite);
    font-weight: var(--font-lite-weight);
    font-size: 14px;
    margin-top: -7px; /* Adjust top margin */
    display: block; /* Ensure it behaves like a block element */
}

h2 {
    font-family: var(--font-lite);
    font-weight: var(--font-lite-weight);
    text-align: left;
    font-size: 22px;
    margin-bottom: 10px;
}

hr{
    width: 100%;
    color: var(--text-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.header-container {
    display: flex;
    flex-grow: 0;
align-items: center; /* Align items vertically centered */
    justify-content: flex-start; /* Space between text and image */
}

.rotate-180 {
    transform: rotate(180deg);
}

.hide-div {
    pointer-events:none;
    max-height: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, max-height 0.75s ease-in-out;
    /* transition in: first expand height, then fade in opacity after a delay equal to the height duration */
}

.show-div {
    pointer-events:all;
    max-height: 1000px;
    opacity: 1;
    transition: opacity 1s 0.15s ease-in-out, max-height 1s ease-in-out;
    /* transition in: first expand height, then fade in opacity after a delay equal to the height duration */
}

.art-camera-container{
    flex-direction: column;
    display: flex;
    flex-grow: 0;
    align-items: center; /* Align items vertically centered */
    justify-content: flex-start; /* Space between text and image */
}

.material-symbols-rounded {
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.3s ease-out;
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 48
}


.material-symbols-outlined {
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 48
}

.material-symbols-sharp {
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.3s ease-out;
    font-variation-settings:
            'FILL' 0,
            'wght' 200,
            'GRAD' 0,
            'opsz' 48
}



    .selection-preview, .aspect-ratio-preview
{
    width: 100px;
    height: 100px;
    /*color: #848282;*/
    align-self: center;
    justify-self: center;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    text-align: center; /* Center text inside the container */
    text-justify: auto;
    background-color: var(--input-bg-color);
    box-shadow: 0 5px 7px var(--shadow-color);
    border-radius: 5px;
}



.text-container {
    margin-right: 7px; /* Space between text and image */
}



.logo {
    pointer-events:all;
    width: 10%; /* Set the width of the image */
    height: 10%; /* Set the height of the image */
    object-fit: fill; /* Ensure the image covers the area */
    border-radius: 5px;
    visibility: hidden;
}

.section {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /*margin-bottom: 20px;*/
}

.section-row
{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    /*margin-bottom: 20px;*/
}

.section-row-wrap
{
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    /*margin-bottom: 20px;*/
}



label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
}

input, textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    box-shadow: var(--inner-shadow);
}

textarea {
    font-family: var(--font-raleway);
    font-size: .75em;
    resize: vertical;
    align-self: center;
    width: calc(100% - 20px);
}

.buttons {
    display: flex;
    justify-content: space-between;
}

button {
    font-family: var(--font-raleway);
    font-weight: var(--font-normal-weight);
    font-size: .75em;
    height: 30px;
    padding: 0px 15px;
    text-align: center;
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    box-shadow: 0 5px 7px var(--shadow-color);
}

button:hover {
    background-color: var(--button-hover-bg-color);
    color: var(--button-hover-text-color);
}

.scrollview {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 10px;
    background-color: var(--container-bg-color);
    box-shadow: var(--inner-shadow);
    display: flex;
    flex-direction: column;
}

.history-entry, .custom-entry, .final-copy {
    font-family: var(--font-raleway);
    font-weight: 500;
    font-size: .75em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    background-color: var(--input-bg-color);
    border-radius: 5px;
    padding: 10px;
}


.entry-text, .custom-text {
    flex-grow: 1;
    padding-right: 10px;
}

.delete-button, .copy-button {
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    margin-left: 10px;
    transition: background-color 0.3s;
}

.delete-button {
    background-color: var(--delete-button-bg-color);
    color: var(--text-color);
}

.delete-button:hover {
    background-color: var(--delete-button-hover-bg-color);
    color: var(--delete-button-hover-color);
}

.copy-button {
    margin: 5px;
    background-color: var(--copy-button-bg-color);
    color: var(--text-color);
}

.copy-button:hover {
    background-color: var(--copy-button-hover-bg-color);
    color: var(--copy-button-hover-color);
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(80% - 10px);
    justify-items: center;
    background-color: var(--container-bg-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 15px 30px var(--shadow-color);
    display: none;
    flex-direction: column;
    z-index: 1000;
}

.no-scroll {
    overflow: hidden;
}

.accordion-popup {
    max-height: 92%; /* Maximum height, adjust to your needs */
    max-width: 90%;
    overflow-y: auto;
    top: 10px;
    bottom: 10px;
    pointer-events:all;
    position: absolute;
    flex-flow: wrap;
    width: 85%;
    height: 98%;
    align-self: center;
    justify-items: center;
    background-color: var(--container-bg-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 15px 30px var(--shadow-color);
    display: none;
    z-index: 1000;
}

.popup h2 {
    text-align: center;
    margin-bottom: 20px;
}

.popup textarea {

    width: calc(100% - 20px);
    font-size: .75em;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    box-shadow: var(--inner-shadow);
}

.popup-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    width: 90%;
}

.popup-buttons button {
    width: 48%;
}

/* Popup for "Copied to clipboard!" message */
.copy-popup {
    visibility: hidden;
    min-width: 160px;
    background-color: var(--popup-bg-color);
    color: var(--popup-text-color);
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40%; /* Position from the bottom of the screen */
    font-family: var(--font-raleway);
    font-size: 16px;
    opacity: 0; /* Start invisible */
    transition: opacity 0.5s ease-in-out;
}

.copy-popup.show {
    visibility: visible;
    opacity: 1; /* Fade in */
}


/* Custom Entries styling adjustments */
.custom-entry {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-size: .75em;
    /*padding: 5px 0;*/
    margin-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    border-radius: 5px;
    padding: 10px;
}

.checkbox {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 10px; /* Space between checkbox and text */
}

.custom-text {
    flex-grow: 1;
    margin-left: 10px; /* Space after checkbox */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* Ensures text does not overflow its container */
}

.delete-button {
    margin-left: auto; /* Pushes the button to the right */
    background-color: var(--delete-button-bg-color);
    color: var(--text-color);
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s;
}

.delete-button:hover {
    background-color: var(--delete-button-hover-bg-color);
}

/* Dark Mode Scrollbars */
.scrollview::-webkit-scrollbar {
    width: 12px;
    background-color: var(--container-bg-color); /* Background color for the scrollbar track */
}

.scrollview::-webkit-scrollbar-thumb {
    background-color: var(--border-color); /* Color of the scrollbar thumb */
    border-radius: 6px; /* Roundness of the scrollbar thumb */
    border: 3px solid var(--container-bg-color); /* Adds padding around the thumb */
}

.scrollview::-webkit-scrollbar-thumb:hover {
    background-color: #777; /* Lighter color on hover */
}

.scrollview::-webkit-scrollbar-track {
    background-color: var(--background-color); /* Color of the scrollbar track */
}

/* For Firefox */
.scrollview {
    scrollbar-width: thin; /* Sets the width of the scrollbar */
    scrollbar-color: var(--border-color) var(--background-color); /* Thumb color and track color */
}

/* For IE and Edge */
.scrollview {
    -ms-overflow-style: -ms-autohiding-scrollbar; /* Show scrollbar only on hover */
}