/* Base font size for the HTML document */
html {
    font-size: 14px; /* Default font size */
}

/* Increase font size for larger screens */
@media (min-width: 768px) {
    html {
        font-size: 16px; /* Larger font size for better readability on bigger screens */
    }
}

/* Focus styles for various elements */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; /* Adds a white and blue shadow for focus indication */
}

/* Ensure HTML takes full height and sets a relative position for layout */
html {
    position: relative;
    min-height: 100%; /* Ensures the page takes full height */
}

/* Basic body styling with a radial gradient background */
body {
    margin-bottom: 60px; /* Adds bottom margin to ensure space for fixed footer */
    display: flex;
    flex-direction: column; /* Stacks children elements vertically */
    position: relative; /* Ensure the pseudo-element is positioned correctly */
    background-color: whitesmoke; /* Set the base background color */
    text-shadow: 1px 2px blue; /* Adds a text shadow for a subtle effect */
}

    /* Background animation with pulsating dots */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(indianred 2%, transparent 2%); /* Radial gradient background */
        background-position: 0 0;
        background-size: 100px 100px;
        box-shadow: 0 0 10px 5px purple; /* Adds a purple shadow to the dots */
        animation: pulse 2s infinite; /* Apply the pulsating animation */
        pointer-events: none; /* Ensure the pseudo-element doesn't interfere with interactions */
        z-index: -1; /* Place the pseudo-element behind the content */
    }

/* Keyframes for the pulsating effect */
@keyframes pulse {
    0%, 100% {
        transform: scale(1); /* Initial scale */
        box-shadow: 0 0 10px 5px whitesmoke; /* Initial shadow */
    }

    50% {
        transform: scale(1.1); /* Slightly larger scale */
        box-shadow: 0 0 30px 20px blue; /* Larger shadow */
    }

}

/* Header styling */
header {
    background-color: transparent;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10; /* Ensures header is above other content */
}

/* Footer styling */
/*.footer {
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
    background-color: transparent;
    margin-top: 0%;
    text-shadow: 10px 10px 30px blue;*/ /* Adds a blue shadow for visual effect */
/*}*/

.footer {
    width: 100%;
    text-align: center;
    background-color: transparent;
    margin-top: 0%;
    text-shadow: 10px 10px 30px blue;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

    .footer a {
        color: black;
        text-decoration: none;
    }

    .footer p {
        margin: 0;
    }

/* Button styling with rainbow animation */
button {
    background-color: white;
    position: relative;
    animation-name: rainbow;
    animation-duration: 8s; /* Changed duration to 8s for quicker color changes */
    animation-iteration-count: infinite;
}

/* Keyframes for the rainbow color animation */
@keyframes rainbow {
    0% {
        background-color: black;
    }

    12.5% {
        background-color: red;
    }

    25% {
        background-color: yellow;
    }

    37.5% {
        background-color: pink;
    }

    50% {
        background-color: green;
    }

    62.5% {
        background-color: purple;
    }

    75% {
        background-color: orange;
    }

    87.5% {
        background-color: blue;
    }

    100% {
        background-color: black;
    }
}

/* Footer hover effect */
.footer:hover {
    text-transform: uppercase; /* Transforms text to uppercase */
    text-shadow: 20px 20px 40px purple; /* Adds a larger shadow for hover effect */
}

/* Navigation link hover effect */
.nav-link:hover {
    text-transform: uppercase;
    background-color: black;
    opacity: 85%;
    box-shadow: 10px 10px 30px purple; /* Adds shadow on hover */
}

/* Icon hover animation - spins the icon */
.icon:hover {
    color: red;
    position: fixed;
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* Keyframes for the spin animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Icon animation - gelatine effect */
.icon {
    animation: gelatine 5.5s infinite;
}

/* Keyframes for the gelatine animation */
@keyframes gelatine {
    from, to {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}

/* Jumbotron styling */
#jum1, #jum2, #jum3, #jum4, #jum5, #jum6 {
    background: url("https://i.gifer.com/IrF.gif");
    opacity: 70%;
    background-size: cover;
    border-radius: 9999px; /* Fully rounded corners */
    border: 5px ridge red; /* Initial border color, overridden by animation */
    margin-bottom: 20px;
    padding: 2em;
    box-shadow: 10px 10px 30px purple; /* Adds a purple shadow */
    animation: borderColorChange 8s infinite; /* Apply the color change animation to the border */
}

/* Keyframes for the border color change effect */
@keyframes borderColorChange {
    0%, 100% {
        border-color: red;
    }

    12.5% {
        border-color: red;
    }

    25% {
        border-color: yellow;
    }

    37.5% {
        border-color: pink;
    }

    50% {
        border-color: green;
    }

    62.5% {
        border-color: indianred;
    }

    75% {
        border-color: orange;
    }

    87.5% {
        border-color: darkred;
    }
}

/* Jumbotron hover effect */
#jum1:hover, #jum2:hover, #jum3:hover, #jum4:hover, #jum5:hover, #jum6:hover {
    opacity: 100%; /* Full opacity on hover */
    transform: scaleY(1.1); /* Scales vertically on hover */
    box-shadow: 20px 20px 40px purple; /* Larger shadow on hover */
}

/* Hover effect for headings and paragraphs */
h1:hover, p:hover, h2:hover, h3:hover {
    text-transform: uppercase;
}

/* Hover effect for specific SVG element */
#Capa_1:hover {
    transform: scaleY(1.5);
}

/* Container grid layout for flexible columns */
.container {
    padding: 3em;
    display: grid;
    grid-gap: 2em;
}

/* Remove underline from links */
a {
    text-decoration: none;
}

    /* Hover effect for links */
    a[href]:hover {
        color: green;
    }

/* Navbar brand hover animation */
.navbar-brand:hover {
    animation: hinge 2s ease infinite;
}

/* Keyframes for the hinge animation */
@keyframes hinge {
    0% {
        transform: rotate(0);
        transform-origin: top left;
    }

    20%, 60% {
        transform: rotate(80deg);
        transform-origin: top left;
    }

    40% {
        transform: rotate(60deg);
        transform-origin: top left;
    }

    80% {
        transform: rotate(60deg) translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(700px);
        opacity: 0;
    }
}

/* Column styling for layout */
.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Image hover effect */
#sambucasingleart:hover {
    transform: scale(2.5);
}

/* Cookie notice styling */
#cookieNotice {
    background: url("https://i.gifer.com/MRr.gif");
    position: fixed;
    opacity: 95%;
    background-size: cover;
    border-radius: 9999px;
    border: 5px groove;
    margin-bottom: 20px;
    padding: 2em;
    box-shadow: 10px 10px 30px purple;
    height: 420px;
    width: 480px;
    justify-content: center;
    left: 50%;
    transform: translate(-50%, 0);
 }




/* Media query for small screens */
@media (max-width: 768px) {
    #cookieNotice {
        width: 90%;
        padding: 1em;
    }
}



/* Button styling with white shadow animation */
.btn {
    opacity: 90%;
    box-shadow: 1px 1px 2px whitesmoke;
    animation: rainbow 8s infinite;
}

    /* Button hover effect */
    .btn:hover {
        opacity: 100%;
        box-shadow: 20px 30px 40px whitesmoke;
        animation: mymovewhite 1s infinite;
    }

/* Keyframes for the white shadow animation */
@keyframes mymovewhite {
    0% {
        box-shadow: 1px 2px 4px whitesmoke;
    }

    20% {
        box-shadow: 10px 12px 22px whitesmoke;
    }

    50% {
        box-shadow: 15px 20px 40px whitesmoke;
    }

    80% {
        box-shadow: 15px 29px 42px whitesmoke;
    }

    100% {
        box-shadow: 10px 20px 30px whitesmoke;
    }
}

/* Navbar styling */
header {
    background-color: transparent;
    width: 100%;
}

/* Navbar styling with flexbox for layout */
.navbar {
    background-color: transparent !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

/* Navbar responsiveness */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }

    .navbar-nav {
        width: 100%;
    }

        .navbar-nav .nav-item {
            width: 100%;
            text-align: center;
        }

    .navbar-collapse {
        width: 100%;
    }

    .navbar-toggler {
        align-self: flex-start;
    }
}

/* Footer responsiveness */
/*@media (max-width: 768px) {
    .footer {
        flex-direction: column;
        align-items: center;
    }

        .footer .fixed-bottom {
            width: 100%;
        }
}*/

/* Ensure footer items stay on one line on small screens */
@media (max-width: 768px) {
    .footer {
        flex-direction: column;
        text-align: center;
    }

        .footer a, .footer p {
            width: 100%;
            margin-bottom: 10px;
        }
}

/*Logo Shadow*/

/*.big-a-image {
    box-shadow: 0 4px 8px 0 purple, 0 6px 20px 0 purple;
}*/

/* Fix slight movement on mobile */
body, html {
    overflow-x: hidden;
}

.text-center {
    overflow: hidden;
}

.welcome-header, .available-services-header, .featured-artists-header {
    box-shadow: 0 4px 8px rgba(128, 0, 128, 0.5);
    padding: 10px;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
}

.big-a-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure the headers are centered and do not cause overflow */
@media (max-width: 768px) {
    .welcome-header, .available-services-header {
        font-size: 1.5em; /* Adjust font size for better readability on smaller screens */
        box-shadow: 0 2px 4px rgba(128, 0, 128, 0.5); /* Slightly smaller shadow on smaller screens */
        width: 90%; /* Ensure it fits within the screen */
    }
}


/*space between navbar command content.*/
.main-content {
    margin-top: 70px; /* Adjust the value as needed */
}

/* Additional Media Queries for Different Devices */

/* For small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .footer {
        font-size: 0.9em; /* Smaller font size for footer */
    }

    h1, h2, h3 {
        font-size: 1.2em; /* Smaller font size for headings */
    }

    .btn {
        font-size: 0.8em; /* Smaller button text */
    }
}

/* For tablets and small desktops (600px to 768px) */
@media only screen and (min-width: 601px) and (max-width: 768px) {
    .footer {
        font-size: 1em;
    }

    h1, h2, h3 {
        font-size: 1.5em;
    }

    .btn {
        font-size: 0.9em;
    }
}


@media (max-width: 768px) {
    .table th, .table td {
        font-size: 14px;
    }

    .btn {
        font-size: 12px;
    }
}