/* Fonts */
@font-face {
    font-family: Roboto;
    src: url("../fonts/Roboto-Regular.ttf");
}

@font-face {
    font-family: Roboto-Light;
    src: url("../fonts/Roboto-Light.ttf");
}

/* Ensure full-page layout */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s ease; /* Smooth transition for background color */
    position: relative; /* Ensure the logo is positioned correctly */
}

body {
    background-color: #ebdbbe; /*lightblue; /* Default light blue background */
    font-family: Roboto, sans-serif;
}

/* Logo Styling */
.logo-container {
    position: fixed; /* Position logo in the top left corner */
    top: 20px;
    left: 20px;
    width: 250px; /* Width of the logo */
    height: 250px; /* Height of the logo */
    /*border: 4px solid white; /* White border around the logo */
    border-radius: 10px; /* Optional rounded corners for the logo */
    overflow: hidden; /* Ensures image stays within the border */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20; /* Ensure the logo stays on top of other content */
}

.logo-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 10px;
    object-fit: cover; /* Ensure the image covers the container without distortion */
}

.logo-text {
    font-family: Roboto-Light, sans-serif;
    position: absolute;
    /*top: 0px;*/
    left: 35px;
    color: black;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Shadow for better text visibility */
    z-index: 30; /* Ensure the text is above the logo */
}

.image-container-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* 4 columns */
    grid-template-rows: 1fr; /* Set fixed height for rows, ensuring no overlap */
    gap: 20px; /* Space between the title cards */
    width: 100%; /* Limit the width to 90% of the container */

}

.image-container {
    background-color: #333; /* Dark rectangular background */
    padding: 20px; /* Space around the image */
    border-radius: 10px; /* Optional: rounded corners */
    width: 300px; /* Set the width to 300px */
    height: 150px; /* Set the height to 350px */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the image */
    align-items: center; /* Horizontally center the image */
    position: relative; /* Positioning context for the label */
    overflow: hidden; /* Ensure the enlarged image stays within the container */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
    cursor: pointer; /* Make the container clickable */
    z-index: 1; /* Default stacking order */
}

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures the image fits without distortion */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for scaling and opacity */
}

.image-label {
    color: white; /* Label text color */
    position: absolute; /* Position the label at the bottom */
    bottom: 10px; /* Distance from the bottom of the container */
    text-align: center; /* Center the text */
    font-family: Roboto-Light, sans-serif;
    font-size: 20px; /* Adjust the font size if needed */
}

/* Hover effect */
.image-container:hover {
    background-color: #222; /* Slightly darken the background when hovering */
    transform: scale(1.05); /* Slightly increase the size of the container */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Add subtle border shadow on hover */
}

.image-container:hover img {
    transform: scale(1.05); /* Slightly enlarge the image */
    /*opacity: 0.8; /* Darken the image */
}


#top-div {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-end: 5;
    grid-column-start: 1;
    text-align: center;
    padding: 0 5vw 0 5vw;
}

#clock {
    font-family: Roboto;
}

#clock-div {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 0 5vw 0 5vw;
}


/* Different bounce directions */
@keyframes bounceUp {
    0% {
        transform: translateY(0); /* Start at the original position */
    }
    60% {
        transform: translateY(50px); /* Bounce up */
    }
    100% {
        transform: translateY(-100vh); /* Move off the screen upwards */
    }
}

@keyframes bounceDown {
    0% {
        transform: translateY(0); /* Start at the original position */
    }
    60% {
        transform: translateY(-50px); /* Bounce down */
    }
    100% {
        transform: translateY(100vh); /* Move off the screen downwards */
    }
}

@keyframes bounceLeft {
    0% {
        transform: translateX(0); /* Start at the original position */
    }
    60% {
        transform: translateX(50px); /* Bounce left */
    }
    100% {
        transform: translateX(-100vw); /* Move off the screen to the left */
    }
}

@keyframes bounceRight {
    0% {
        transform: translateX(0); /* Start at the original position */
    }
    60% {
        transform: translateX(-50px); /* Bounce right */
    }
    100% {
        transform: translateX(100vw); /* Move off the screen to the right */
    }
}

/* Active click state */
.image-container.clicked {
    animation: var(--bounce-animation) 0.6s ease forwards; /* Apply the bounce effect based on selected direction */
    z-index: 10; /* Ensure the clicked card is on top */
}

/* For returning back to original position */
.image-container.fall-back {
    animation: fallBackIn 1s ease forwards; /* Fall back to original position */
    pointer-events: none; /* Disable hover during return animation */
}

/* Falling back animation */
@keyframes fallBackIn {
    0% {
        transform: translateY(-100vh); /* Start from off-screen */
    }
    100% {
        transform: translateY(0); /* Return to the original position */
    }
}

/* When the card has returned, we enable hover again */
.image-container.fall-back-complete {
    pointer-events: auto; /* Re-enable hover */
}

/* Toggle Switch */
.toggle-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-container input {
    position: relative;
    appearance: none;
    width: 50px;
    height: 24px;
    background: #ccc;
    border-radius: 50px;
    transition: background 0.3s;
}

.toggle-container input:checked {
    background: #4caf50;
}

.toggle-container input::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-container input:checked::before {
    transform: translateX(26px);
}

/* Media Queries */
@media only screen and (min-width: 756px) {

    .image-container-wrapper {
	grid-column-gap: 5vw;
	grid-row-gap: 5vh;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
    }

}

@media only screen and (min-width: 768px) {
    
    .image-container-wrapper {
    
    }

}

@media only screen and (min-width: 1100px) {

    .image-container-wrapper {
	padding: 2vh 15vw 2vh 15vw;
    }

}