/*
# Color scheme: https://hookagency.com/color-schemes/ -> "Trusted Source"
#                                               Links -> "Vintage Sexy"
#                                               Hover -> "Lavendar Blush"
# Dark Pink / Fuschia: #E6E6E6
# Light Pink: #F6A5C9
# Light Purple: #B365DA
# White: #F7F6F6
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

body {
    position: relative;
    background: linear-gradient(to left, #B365DA, #F6A5C9); /* Gradient from light purple to light pink */
    color: #4B0082; /* Dark Indigo text color */
    height: 100vh; /* Ensure body covers the full viewport height */
    margin: 0; /* Remove default margin for full-page effect */
    padding-top: 20px; /* Add space at the top of the page */
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1); /* Light dark overlay */
    z-index: -1; /* Overlay behind the content */
    transition: background 0.3s ease-in-out; /* Smooth transition effect */
}

body:hover::before {
    background: rgba(0, 0, 0, 0.3); /* Darker overlay on hover */
}

h1 {
    color: #4B0082; /* Dark Indigo for header */
}

h2 {
    color: #E6E6E6; /* Dark Pink/Fuchsia for h2 */
}

h1, h2 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Soft shadow for a floating effect */
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

button {
    background-color: #4B0082; /* Dark Indigo for buttons */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth background color change */
}

button:hover {
    background-color: #D5A6E0; /* Lighter purple on hover */
    transform: scale(1.1); /* Slightly grow the button */
}

button, a {
    border-radius: 8px; /* Round corners of buttons and links */
    padding: 10px 20px;
}

table {
    border-collapse: separate;
    border-radius: 10px;
    overflow: hidden; /* Ensures that the rounded corners show properly */
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
}

.container div {
    width: 30%; /* Adjust to fit your layout */
    background-color: #F6A5C9;
    padding: 20px;
    border-radius: 8px;
}

header {
    position: sticky;
    top: 0;
    background-color: #F6A5C9; /* Light pink background for the header */
    padding: 10px;
    z-index: 1000; /* Ensures it stays above other content */
}

img {
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3); /* Stronger, darker shadow */
    border-radius: 15px 50px; /* Rounded corners */
    padding: 10px 20px;
    border: 3px solid #D5A6E0; /* Lighter purple border for contrast */
    transition: box-shadow 0.3s ease, border 0.3s ease; /* Smooth transition for shadow and border */
}

img:hover {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
    border: 3px solid #4B0082; /* Darker indigo border on hover for more contrast */
}

a, a:link, a:visited, a:active {
    color: #4B0082; /* Dark Indigo for links */
}

a:hover {
    color: #D5A6E0; /* Lighter purple on hover */
    text-decoration: underline; /* Adds an underline effect */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition */
}