body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: #ffffff;
    width: 80%;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    margin-bottom: 20px;
}

h1 {
    font-size: 2em;
    margin: 0;
}

form {
    margin-bottom: 20px;
}

.photo-area {
    width: 100%;
    display: flex;
    justify-content: center;
}

.photo-frame {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    border: 2px dashed #cccccc;
    position: relative;
    overflow: hidden;
    background-color: #e0e0e0;
}

.zoom-controls {
    margin-top: 20px;
}

.zoom-controls button {
    font-size: 1.5em;
    margin: 0 10px;
    padding: 5px 10px;
    cursor: pointer;
}

#downloadBtn {
/*
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1em;
*/
    cursor: pointer;
}

.photo-frame {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    border: 2px dashed #cccccc;
    position: relative;
    overflow: hidden;
    background-color: #e0e0e0;
}

.toolbar-button {
    cursor: pointer;
}

/* Add this CSS to scale down the toolbar */
.toolbar {
    transform: scale(0.750);
    transform-origin: top center;
}

.toolbar-wrapper {
    width: 100%;
    justify-content: center;
}

.toolbar-wrapper .flex {
    display: flex;
    align-content: stretch;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.rounded-xl {
    border-radius: 6px;
}

.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(60 73 80);
}

.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.drop-shadow-lg {
    --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var (--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.p-2 {
    padding: 0.5rem;
}

.p-4 {
    padding: 1em;
}

.rounded-xl {
    border-radius: 6px;
    padding: 12px 24px;
    margin: 10px 0;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}