/* Grid Styling */

/* Table Style */
tr,td{
    border:1px;
    border-style: solid;
}
td{
    height: 50px;
    width: 50px;
    background-color: white;
}

/*  Set up the body background image and base font */
body {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Base font style for the page */
    /* Set a full-screen background image that stays fixed during scroll */
    background: url('Grid.jpg') no-repeat center center fixed;
    background-size: cover; /* Ensure the image covers the entire viewport */
    color: #333; /* Default text color */
}

.container {
    text-align: center;/*Center align the buttons*/
    padding-top: 60px;/* Space from top */
}

button {
    background-color: #3498db; /* A shade of blue */
    border: none;/* Remove borders */
    color: #fff; /* White text */
    padding: 12px 20px; /* Padding around buttons */
    text-align: center;/* Text align in center */
    font-size: 16px; /* Set font size */
    margin: 6px; /* Space between buttons */
    cursor: pointer; /* Hand cursor on hover */
    border-radius: 4px; /* Slightly rounded corners */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

button:hover {
    background-color: #2980b9; /* Darken on hover */
}

select#selectedColorId {
    background-color: #3498db;
    color: #fff;
    font-size: 16px; /* Set font size */
    padding: 10px 20px;
    margin: 6px; /* Space between buttons */
    border: none;/* Remove borders */
    border-radius: 4px; /* Slightly rounded corners */
    cursor: pointer; /* Hand cursor on hover */
    outline: none; /* Removes blue outline on focus in some browsers */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Dropdown button color for Red */
select#selectedColorId option[value="Red"] {
    background-color: red;
    color: #fff;
  }

/* Dropdown button color for Blue */
select#selectedColorId option[value="Blue"] {
    background-color: blue;
    color: #fff;
  }

/* Dropdown button color for Green */
select#selectedColorId option[value="Green"] {
    background-color: green;
    color: #fff;
  }

/* Dropdown button color for Yellow */
select#selectedColorId option[value="Yellow"] {
    background-color: yellow;
    color: #000;
  }

/* Dropdown button color for SELECT */
select#selectedColorId option[value="SELECT"] {
    background-color: #3498db;
    color: #fff;
  }

select#selectedColorId:hover {
    background-color: #2980b9; /* Darken on hover */
}


#grid {
    margin: 20px auto; /* Centers the grid horizontally */
    border-collapse: collapse;/* Collapses the borders between cells to avoid double borders */
}