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

.logo-container {
    display: flex;
    align-items: center;
    position: fixed;
    top: 50px;
    left: 80px;
}

.logo {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 50px;
}

.site-title {
    margin-left: 30px;
    font-size: 20px; /* Updated font size */
    font-family: "Roboto", sans-serif; /* Roboto Regular */
}

.container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    margin-top: 150px; /* Ensure space between upload instruction and color circles */
}

.left-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
}

.left-side p {
    margin-bottom: 20px;
    font-size: 18px; /* Updated font size */
}

.left-side input,
.left-side div,
.left-side button {
    margin-bottom: 20px; /* 20px space between elements */
}

/* Button Styles */
input[type="file"],
button {
    padding: 12px; /* Padding around content */
    border-radius: 100px; /* Corner radius */
    border: 1px solid #ccc; /* Outline */
    transition: background-color 0.3s;
}

input[type="file"]:hover,
button:hover {
    background-color: rgba(237, 57, 84, 1); /* Hover color */
    cursor: pointer;
}

#thumbnailList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.thumbnail-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.thumbnail-item img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

#colorGrid {
    display: grid;
    grid-template-columns: repeat(10, 50px);
    grid-template-rows: repeat(13, 50px);
    gap: 10px;
}

.colorCircle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: white;
    position: relative;
    transition: all 0.2s ease-in-out;
    z-index: 1;
}

.colorCircle::before {
    content: attr(data-percentage);
    position: absolute;
    display: none;
    color: black;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 50%;
}

.colorCircle:hover::before {
    display: block;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.colorCircle:hover {
    transform: scale(1.1);
    z-index: 2;
}

/* Roboto font classes */
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}