/* styles.css */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: white; /* White background for the page */
}

.popup {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 30px; /* 30 pixels from the top */
    left: 50%; /* Center horizontally */
    width: 60vw; /* 50% of the viewport width */ 
    max-height: 90vh; /* Maximum height of 90% of the viewport height */
    background-color: white; /* White background for the box */
    border-radius: 15px; /* Rounded corners for the entire box */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transform: translateX(-50%); /* Center the box horizontally */
    overflow-y: auto; /* Enable vertical scrolling for overflow */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .popup {
        top: 0; /* Align to the top of the viewport */
        width: 100vw; /* Full width on mobile */
        height: 90vh; /* Full height on mobile */
        min-height: auto; /* Remove minimum height restriction */
    transform: translateX(-50%); /* Center the box horizontally */
    }
}

.header {
    width: 100%;
    background-color: #007BFF; /* Blue background */
    color: white; /* White text */
    text-align: center;
    padding: 10px 0; /* Padding for header */
    border-top-left-radius: 15px; /* Round top left corner */
    border-top-right-radius: 15px; /* Round top right corner */
}

.content {
    flex: 1; /* Take up remaining space */
    padding: 20px; /* Padding for content */
    overflow-y: auto; /* Allow scrolling if content overflows */
}

.footer {
    width: 100%;
    background-color: #007BFF; /* Blue background */
    color: white; /* White text */
    text-align: center;
    padding: 10px 0; /* Padding for footer */
    border-bottom-left-radius: 15px; /* Round bottom left corner */
    border-bottom-right-radius: 15px; /* Round bottom right corner */
}

#continueBtn {
    background-color: #007BFF; /* Blue background */
    color: white; /* White text */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Padding for the button */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    display: block; /* Make the button a block element */
    margin: 20px auto; /* Center the button with auto margins */
    text-align: center; /* Center text inside the button */
}

/* Hover effect */
#continueBtn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}


.cool-button {
  display: inline-block;
  background-color: #007BFF; /* Bootstrap-like blue */
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cool-button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}

.cool-button:active {
  background-color: #00448f;
  transform: translateY(0);
}