body, html {
    font-family: 'Poppins', sans-serif; /* Reapply Poppins font */
    color: #FBFBFE; /* Light gray text for the whole page */
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden; /* Prevent scrolling */
    background-color: #171717; /* Set the background color */
    /* ... other styles ... */
}

#pixelCanvas {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #171717;
    background-image: linear-gradient(#212121 1px, transparent 1px),
                      linear-gradient(90deg, #212121 1px, transparent 1px);
    background-size: 20px 20px; /* Adjust the size to match your grid size */
    z-index: 1;
}


.modal {
    position: fixed;
    transition: opacity 0.3s ease;
    z-index: 10;
    background-color: #2B2A32;
    border: none;
    color: #FBFBFE;
    width: 600px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: visible; /* Added to ensure child elements do not overflow the rounded corners */
}

.window-controls {
    display: flex;
    background-color: #1F1E24;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%; /* Make it as wide as the modal */
    padding: 10px 10px;
    justify-content: start; /* Align the control buttons to the start */
    box-sizing: border-box; /* Ensure padding does not affect total width */
}

.window-control {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #FBFBFE; /* Visible background color for buttons */
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); /* Optional: add shadow for depth */
}

.close, .minimize, .expand {
    width: 12px;
    height: 12px;
}

.window-control i {
    color: #111111;
    display: none; /* Keep icons hidden by default */
    pointer-events: none; /* Ignore pointer events so the parent can still detect hover */
}

.window-control:hover i {
    display: block; /* Show icons on hover */
}

.modal-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
    text-align: left; /* Text aligned to the left */
    padding: 20px;
}

.copy-confirmation {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    background: #2B2A32;
    color: #FBFBFE;
    padding: 10px;
    border-radius: 10px;
    z-index: 1001;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
}

.timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #FBFBFE;
    height: 5px;
    width: 0;
    transition: width 3s linear;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


/* Ensure there is no extra space inside the .copy-confirmation due to .timer-bar */
.copy-confirmation {
    padding-bottom: 5px; /* Adjust padding to match the height of the timer bar */
}


/* Style for confirmation message */
#copyConfirm {
    display: none;
    position: fixed;
    top: 20px; /* Position at the top left */
    left: 20px; /* Position at the top left */
    background: #2B2A32;
    color: #FBFBFE;
    padding: 10px;
    border-radius: 10px;
    z-index: 1001; /* Above the minimized tab */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
}

#discordButton {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: white;
    text-align: left;
    cursor: pointer; /* To change the mouse cursor when hovering */
}

#discordButton:hover {
    background-color: #3b3a41;
}

.profile {
    display: flex;
    align-items: center;
    gap: 20px; /* Adjust the space between the avatar and the name */
    width: 100%; /* Ensure the profile section fills the modal width */
}

.avatar {
    width: 80px; /* Adjust size as needed */
    height: 80px; /* Adjust size as needed */
    border-radius: 50%; /* Makes the image round */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    border: 3px solid #1f1e24; /* Thin gray border around the avatar */
}

.buttons button {
    margin-top: 10px;
    padding: 10px 30px;
    border: 2px solid transparent; /* Add border to enhance on hover */
    border-radius: 10px;
    background-color: #1f1e24; /* Slightly lighter for better contrast */
    color: #FFFFFF;
    cursor: pointer;
    margin-right: 20px;
    font-weight: 600; /* Make the text a bit bolder */
    transition: background-color 0.2s ease-in-out, transform 0.2s ease, border-color 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.buttons button:hover, .buttons button:focus {
    background-color: #3B3A41; /* Slightly lighter shade on hover */
    border-color: #FFFFFF; /* Highlight border on hover/focus */
    transform: translateY(-2px); /* Slight lift effect on hover */
}


.window-control.close {
    background-color: #ff605c; /* Red */
    font-size: 15px;
}

.window-control.minimize {
    background-color: #ffbd44; /* Yellow */
    font-size: 10px;
}

.window-control.expand {
    background-color: #28ca41; /* Green */
}

.minimized-tab {
    position: fixed; /* Fixed position to place it relative to the viewport */
    bottom: 20px; /* Positioned at the bottom right */
    right: 20px;
    width: 120px; /* Width and height to ensure it's visible */
    height: 40px;
    background-color: #1F1E24; /* Dark theme for minimized tab */
    color: #FBFBFE; /* Light gray text */
    display: flex; /* Make sure it's hidden initially */
    align-items: center;
    z-index: 100;
    padding-left: 10px;
    justify-content: flex-start;
    border-radius: 10px; /* Match the modal border-radius */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for visibility */
}

.minimized-tab-icon {
    /* background-color: #2B2A32; Icon background */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    margin-right: 10px;
}

.minimized-tab-title {
    font-size: 14px;
    color: #FBFBFE; /* Ensure light gray text color */
}


/* DROPDOWN STYLES START */

.dropdown {
    position: relative;
    display: inline-block; /* This makes the dropdown inline with other elements */
  }
  
  .dropbtn {
    background-color: #1f1e24;
    color: white;
    padding: 10px 30px;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease, border-color 0.2s;
  }
  
  .dropdown-content {
    display: none;
    overflow: hidden;
    position: absolute;
    background-color: #2b2a32;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000; /* Higher z-index to ensure it stacks above other content */
    border-radius: 10px;
    top: 100%; /* Position right below the button */
    left: 0; /* Align with the left edge of the button */
}
  
  .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content a:hover {
    background-color: #3b3a41;
  }
  
  .dropdown:hover .dropdown-content {
    display: block; /* Show dropdown content on hover */
}
  
  .dropdown:hover .dropbtn {
    background-color: #3b3a41;
    border-color: #FFFFFF;
  }

/* DROPDOWN STYLES END */

.window-control .fa-x, .window-control .fa-up-right-and-down-left-from-center {
    font-size: 6px;
}

#pixelCanvas div:hover {
    background-color: #FFFFFF; /* This is to visualize the hover effect for drawing */
}

@media (max-width: 768px) {
    body, html {
        background-color: #212121; /* Change background color to gray */
        display: flex; /* Keeps the body full screen */
        justify-content: center; /* Center content (if any) horizontally */
        align-items: center; /* Center content (if any) vertically */
        height: 100vh; /* Ensure full screen height */
        width: 100vw; /* Ensure full screen width */
        overflow: hidden; /* Hide any overflowing content */
    }
    
    /* Hide all content inside body to ensure only the gray background is shown */
    body * {
        display: none;
    }
}