/* Reset any default margin/padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    height: 100%;
}

.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f6f7f8;
    position: relative;
}

.work-area {
    width: 60vw; /* 72% of the viewport width */
    height: calc(45vw * (900 / 1200)); /* Maintain the aspect ratio of 1200x800 (width:height) */
    max-width: 1200px; /* Set a maximum width */
    max-height: 900px; /* Set a maximum height */
    background-color: white;
    box-shadow: 0 5px 10px rgba(161, 161, 161, 0.2);
    position: relative;
    overflow: hidden;
    margin-top: 50px; /* Add margin to move it down */
    margin-left: 50px; /* Add margin to move it right */
}
/* Custom Context Menu */
.context-menu {
    display: none;
    position: absolute;
    background-color: #ffffff;
    border: 0.2px solid #eaeaea;
    z-index: 1000;
    box-shadow: 0 5px 16px rgba(67, 67, 67, 0.2);
    padding: 0; /* Remove padding from the context menu */
    border-radius: 12px;
    width: 180px; /* Set a default width */
}

.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
   
}

.context-menu ul li {
    padding: 10px 0; /* Vertical padding only */
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: calc(100% - 0px); /* Set width to full, adjust for any border if needed */
    border-radius: 0; /* No border-radius in normal state */
    text-align: center; /* Center align text */
    border-radius: 12px;
}

.context-menu ul li:hover {
    background-color: #eee;
    margin: 0; /* Ensure no margin to the left or right */
    
}


/* Toolbar styles */
.toolbar {
    position: absolute;
    top: -100px; /* Start off-screen */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust to align center */
    width: auto; /* Let width adjust based on content */
    height: auto; /* Allow height to adjust based on content */
    display: flex; /* Display flex for layout */
    flex-wrap: wrap; /* Allow elements to wrap if needed */
    transition: top 0.3s ease; /* Smooth transition */
    z-index: 999; /* Ensure it appears above other elements */
    border-radius: 12px; /* Slightly rounded corners */
    background-color: #ffffff; /* Background color for the toolbar */
    padding: 4px; /* Reduce padding to bring border closer */
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older versions of IE */
    pointer-events: auto; /* Keep pointer events for interactive elements like buttons */
}


/* Ensure the elements don't exceed the toolbar size */
.toolbar button, .toolbar select, .toolbar input {
    flex-shrink: 0; /* Prevent shrinking */
    max-width: 100%; /* Prevent overflow */
}

/* Allow elements to wrap inside toolbar */
.toolbar {
    flex-wrap: wrap; /* Ensure elements wrap if they exceed the width */
}



.toolbar.active {
    top: 0; /* Show toolbar when active */
}

.toolbar button, .toolbar select {
    background: none;
    color: rgb(0, 0, 0);
    padding: 5px 10px;
    cursor: pointer;
}


.resize-handle {
    width: 10px; /* Size of the handle */
    height: 10px; /* Size of the handle */
    background-color: rgba(0, 0, 0, 0.5); /* Color of the handle */
    position: absolute; /* Positioning */
    bottom: 0; /* Position it at the bottom-right corner */
    right: 0; /* Position it at the bottom-right corner */
    cursor: nwse-resize; /* Change cursor style when hovering */
    z-index: 10; /* Ensure it’s above other elements */
}
/* Style for the toolbar input elements */
.toolbar select, .toolbar input[type="color"] {
    border: 1px solid #d3d3d3;
    border-radius: 10px; /* Rounded corners */
    padding: 5px 2px; /* Padding for better spacing */
    background-color: transparent; /* Transparent background */
    color: #000000; /* Text color */
    font-family: 'Poppins', sans-serif; /* Font style */
    font-size: 14px; /* Font size */
}

/* Specific styles for the color input to show the color as a circle */
.color-picker {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, 0.2); /* Light black border */
    cursor: pointer;
    border-radius: 50%; /* Circle shape */
    position: relative; /* Positioning context */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for better visibility */
}

/* Create a pseudo-element for better styling of the color picker */
.color-picker::after {
    content: ""; /* Create a pseudo-element */
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    width: 80%; /* Adjust size */
    height: 80%; /* Adjust size */
    border-radius: 50%; /* Circle shape */
    background-color: inherit; /* Match the background color */
    transform: translate(-50%, -50%); /* Center it */
}
.font-size-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d3d3d3;
    border-radius: 10px;
    overflow: hidden;

}

.font-size-control button {
    background-color: #ffffff; /* Default background */
    border: none;
    padding: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 30px;
    height: 30px;
    color: #000000; /* Default color */
    transition: color 0.2s ease, background-color 0.2s ease; /* Smooth transition */
}
.font-size-control button:hover {
    background-color: #f3f3f3; /* Slightly darker background on hover */
}

.font-size-control input[type="number"] {
    width: 50px;
    text-align: center;
    border: none;
    font-size: 16px;
    outline: none;
    -moz-appearance: textfield; /* Remove up/down arrows in Firefox */
}

.font-size-control input[type="number"]::-webkit-outer-spin-button,
.font-size-control input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Remove up/down arrows in Chrome, Safari, Edge */
}
#top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full width of the viewport */
    height: 8.5vh; /* Height will be 10% of the viewport height */
    background: linear-gradient(to right, #01c3cc, #7d2be8); /* Gradient from left to right */
    z-index: 1000; /* Keep it on top */

}