/* Base styling */
* {
    font-family: 'Andada Pro', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #afc9e9; /* Light blue background */
    color: #333;  /* Text color */
    line-height: 1.6;
    background-image: url('../GdxMCJk.jpeg'); 
    background-size: cover; /* Resize the background image to cover the entire container */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
}

.main-title {
    background-color: whitesmoke; /* white with 80% opacity */
    padding: 60px;
    margin-bottom: 80px; /* Increased space below the title */
    border-radius: 10px;
    text-align: center;
}

.main-title h1 {
    font-size: 48px; /* increased font size */
    font-weight: bold;
    color: #333; /* text color */
}

.page {
    width: 95%;  /* Changed to percentage for responsiveness and wider view */
    max-width: 1400px;  /* Maximum width so it doesn’t get too wide on large screens */
    margin: 20px auto;
    padding: 20px;
}

/* Titles and Headers */
h1, h2 {
    margin-bottom: 5px;  /* Space below headers */
}

/* Flex container for visualization and description */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
    padding: 15px;
    border-radius: 10px;
    background-color: whitesmoke;
    
}

/* Flex item for visualization */
.vis-container {
    flex: 1; /* Adjust as needed */
    padding-right: 20px; /* Space between visualization and description */
}

/* Flex item for description */
.description {
    flex: 1; /* Adjust as needed */
    font-size: 14px;
    margin: 20px 0;
    column-count: 2; /* Divides the content into 2 columns */
    column-gap: 20px; 
}

/* Visualization title styling */
.vis-title {
    margin-bottom: 15px; /* Decreased space below visualization title */
    padding: 15px; /* Increased padding around the title */
}

/* Adjust Play/Pause button position */
#playButtonChoropleth, #playButtonScatter {
    position: relative;
    left: -20px; /* Adjust this value to move it more or less to the left */
    bottom: 30px; /* Adjust this value to move it up or down */
    width: 100px; /* Set a fixed width that accommodates both "Play" and "Pause" */
    text-align: center; /* Center the text within the button */
}

/* Play/Pause Button Styling */
#playButtonChoropleth, #playButtonScatter {
    background-color: #afc9e9; 
    color: #333; 
    border: none; /* Removes the default border */
    padding: 10px 20px; /* Increases the button size slightly */
    border-radius: 5px; /* Rounds the edges */
    font-weight: bold; /* Makes the text bolder */
    cursor: pointer; /* Changes cursor to a hand when hovering */
    transition: background-color 0.3s; /* Adds a transition effect */
}

#playButtonChoropleth:hover, #playButtonScatter:hover {
    background-color: #8eaac4; /* Darker shade of blue for hover effect */
}

.description-right .single, .description-right .column-content {
    font-size: 14px;
    line-height: 1.4;
    padding-left: 5%;
    columns: 2;
    column-gap: 20px;
}

/* Visualization Title Card */
.vis-title-card {
    background-color: whitesmoke; /* Background color for the title card */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    text-align: start;
}

/* Play Button Container */
.play-button-container {
    text-align: center; /* Center the play button */
}

/* Play Button Styling */
#playButtonScatter {
    background-color: #afc9e9; 
    color: #333; 
    border: none; /* Removes the default border */
    padding: 10px 20px; /* Increases the button size slightly */
    border-radius: 5px; /* Rounds the edges */
    font-weight: bold; /* Makes the text bolder */
    cursor: pointer; /* Changes cursor to a hand when hovering */
    transition: background-color 0.3s; /* Adds a transition effect */
}

#playButtonScatter:hover {
    background-color: #8eaac4; /* Darker shade of blue for hover effect */
}

.text-box {
    margin-top: 5px; 
    font-size: 14px;
    color: #333;  /* Text color */
    background-color: whitesmoke; 
    padding: 5px; /* Padding around the text */
    border-radius: 5px; /* Optional: for rounded corners */
    font-family: 'Andada Pro', sans-serif;
}

figcaption {
    font-size: 10px;  
    color: #777;     /* Gray color for the caption */
    margin-top: 5px; /* Space above the caption */
}
.flex-container {
    display: flex;
    justify-content: space-between;
}

.vis-container {
    flex: 1;
    margin-right: 20px; 
}

.description {
    flex: 1;
    display: flex;
    flex-direction: column;
    column-count: 2;
}

figure {
    margin-top: 10px; 
}

/* Flex item for description */
.des {
    flex: 1; 
    font-size: 14px;
    margin: 20px 0;
    column-count: 2; /* Divides the content into 2 columns */
    column-gap: 20px; 
}