/* Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #ffffff;
    font-family: 'Radio Canada Big', sans-serif;
}

body {
    background-image: url("images/plieades2023.jpeg");
}

/* Container Styles */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;    
    margin: 2px 20px 0 20px;
}

.container .heading {
    width: 50%;
    padding-bottom: 50px; 
}

.container .heading p {
    padding-top: 15px;
    text-align: left;
}

.container .heading h3 {
    font-size: 4em;
    font-weight: lighter;
    border-bottom: 3px solid #222;
    padding-bottom: 10px;
}

.container .box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.container .box .dream {
    display: flex;
    flex-direction: column;
    width: 32.5%;
    justify-content: center;
    vertical-align: top;
}

.container .box .polaroid {
    width: 100%;    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

.container .box .polaroid img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease; /* Smooth and slow transition for enlargement */
}

.container .box .polaroid .container {
    width: 32%; /* Adjust this width as needed */
    position: absolute;
    bottom: -100%;
    left: 0;
    padding: 10px;
    text-align: left; /* Align text to the left */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, bottom 0.5s ease; /* Smooth transition for text visibility */
}

/* Hover Effect */
.container .box .polaroid:hover .container {
    opacity: 1;
    visibility: visible;
    bottom: 0;
}

.container .box .polaroid:hover img {
    transform: scale(1.2); /* Slightly enlarge the image on hover */
}

/* Footer Styles */
.footer {
    color: #ffffff;
    padding: 20px 0;
    text-align: center;
    width: 100%;
    margin-top: 50px;
}

.footer .footer-content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Adds spacing between links */
    margin-bottom: 20px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    transition: transform 0.5s ease; /* Smooth and slow transition for both hover and non-hover states */
}

.footer-links a:hover {
    transform: scale(1.1); /* Slightly enlarge the link on hover */
}

.footer-links i, .footer-icon {
    margin-right: 8px;
    font-size: 18px;
    vertical-align: middle;
}

.footer-icon {
    width: 18px;
    height: 18px;
    object-fit: contain; /* Ensures the image fits within the specified dimensions */
}

.footer p {
    margin: 10px 0;
    font-size: 14px;
    color: #888;
}