/* styles.css */

/* Reset some default margin and padding */
body, h1, h2, h3, p {
    margin: 0;
    padding: 0;
}

.container {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(2, 1fr); /* Create a 2-column grid with equal width */
    gap: 20px; /* Add even spacing between columns */
    background-color: #f0f0f0;
    height: auto; /* Set height to auto to adjust based on content */
    max-height: 70vh; /* Set a maximum height (adjust as needed) */
    padding: 20px; /* Add some spacing around the content */
    overflow: auto; /* Add scroll if content exceeds the maximum height */
}

.left {
    padding: 20px;
    background-color: #f7f7f7; /* Light gray background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-start; /* Align content to the top */
    align-items: flex-start; /* Left justify content */
    text-align: left; /* Left-align text */
}

/* Add spacing between classes in the left column */
.left h1 {
    margin-bottom: 30px; /* Add margin below the heading */
    font-family: Arial, sans-serif; /* Font family */
    font-size: 24px; /* Font size */
    color: #333; /* Text color */
}

.left label {
    margin-bottom: 10px; /* Add margin below the labels */
    font-family: Arial, sans-serif; /* Font family */
    font-size: 16px; /* Font size */
    color: #666; /* Text color */
}

.left input[type="color"] {
    margin-bottom: 20px; /* Add margin below the color inputs */
    padding: 2px; /* Add padding to the inputs */
    width: 60px; /* Adjust the width as needed */
    height: 50px; /* Set the same height as the width */
    border: 1px solid #ccc; /* Border style */
    border-radius: 4px; /* Rounded corners */
}

.left #checkContrast {
    margin-bottom: 20px; /* Add margin below the check contrast button */
    padding: 10px 20px; /* Padding for the button */
    background-color: #34689c; /* Button background color */
    color: #fff; /* Button text color */
    border: none; /* Remove border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer;
    font-family: Arial, sans-serif; /* Font family */
    font-size: 16px; /* Font size */
}

.left #checkContrast:hover {
    background-color: #204161; /* Button background color on hover */
}

.left p {
    margin-bottom: 20px; /* Add margin between paragraphs */
    font-family: Arial, sans-serif; /* Font family */
    font-size: 16px; /* Font size */
    color: #333; /* Text color */
    font-weight: bold;
}

.right {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    text-align: left; /* Left-align text */
}

.right p {
    margin-bottom: 20px; /* Increase margin between paragraphs for more spacing */
}

/* Add styles for the live color samples */
#liveColorSample, #colorSample {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

#textSample, #colorSample #textSample {
    width: 100px;
    height: 100px;
    background-color: #ffffff; /* Default text color */
    color: #000000; /* Default background color */
    text-align: center;
    line-height: 100px;
    font-size: 16px;
    border: 1px solid #000;
    border-radius: 4px;
    margin-bottom: 10px;
}