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

body {
    font-family: Arial, sans-serif;
    background-color: #1b1b1b;
    color: #ffffff;
  }

h1 {
    font-size: 2em;
}

p {
    font-size: 1em;
}

a, a:visited {
    color: #ffffff;
    border-bottom: 1px dashed teal;
    text-decoration: none;
}

a:hover {
    color: teal;
}


/* Social icons */
.social-icons {
    display: flex;
    justify-content: center; /* Centers the icons */
    gap: 20px; /* Space between icons */
    margin-top: 20px; /* Space from top */
}

.social-icon {
    text-decoration: none; /* Removes underline */
    transition: transform 0.3s ease; /* Smooth transition for hover effects */
    border-bottom: none;
}

.social-icon.opensea .opensea-icon,
.social-icon.magiceden .magiceden-icon {
    width: 40px; /* Icon size */
    height: auto;
}


/* Hover effects for all icons */
.social-icon:hover {
    transform: scale(1.1); /* Slightly enlarge icon on hover */
}

.social-icon.x:hover .x-icon,
.social-icon.opensea:hover .opensea-icon,
.social-icon.magiceden:hover .magiceden-icon {
    filter: brightness(1.2); /* Slight brightness change on hover */
}

/* Image grid styles */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
}

.image-grid img {
    width: 100%;
    max-width: 400px; /* Ensure images do not exceed 400px in width */
    height: auto; /* Maintain aspect ratio */
    max-height: 400px; /* Ensure images do not exceed 400px in height */
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.image-grid video {
    width: 100%;
    max-width: 400px;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.image-grid video:hover {
    transform: scale(1.05);
}

.image-grid img:hover {
    transform: scale(1.05);
}

/* Lightbox styles */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
}

.lightbox .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    transition: color 0.3s ease;
}

.lightbox .close:hover {
    color: #f00;
}

/* Lightbox media container */
.lightbox-media {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111;
    overflow: hidden;
}

/* General overlay styles */
.lightbox-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    color: white;
    font-size: 1rem;
    text-align: center;
    box-sizing: border-box;
    opacity: 0; /* Hidden by default */
    transform: translateY(-20px); /* Slide effect */
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
    pointer-events: none; /* Prevent hover interference, except for specific elements */
}

/* Title overlay at the top */
.lightbox-title-overlay {
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    color: white;
    font-size: 1.2rem;
    /*text-align: left; /* Align text to the left */
    box-sizing: border-box;
    opacity: 0; /* Hidden by default */
    transform: translateY(-20px); /* Slide effect from above */
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
    pointer-events: none; /* Prevent interaction */
}

/* Make the description clickable */
.lightbox-description-overlay {
    bottom: 0;
    transform: translateY(20px); /* Slide effect from below */
    pointer-events: auto; /* Allow interaction for this overlay */
}

/* Hover effect on the media container */
.lightbox-media:hover .lightbox-overlay {
    opacity: 1; /* Make visible */
    transform: translateY(0); /* Reset slide effect */
}

/* Ensure lightbox image fits within media container */
.lightbox-media img,
.lightbox-media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* Styles for the video placeholder container */
.video-container {
    position: relative;
    display: inline-block;
    cursor: pointer; /* Indicate that the image is clickable */
}

/* The overlay to appear on video placeholders */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Semi-transparent black overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Make sure overlay doesn't block clicks */
}

/* Play icon styles */
.play-icon {
    font-size: 40px;
    color: white;
}

/* Show the overlay when hovering over the video placeholder */
.video-container:hover .overlay {
    opacity: 1;
}

/* Optional: Optional hover effect for image when mouse hovers over */
.video-container img {
    transition: opacity 0.3s ease-in-out;
}

/* Fall back grid styling for no javascript */
.fallback-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid */
    gap: 10px; /* Space between images */
    padding: 20px;
}

.fallback-grid a {
    display: block;
    width: 100%;
    text-decoration: none;
    border-bottom: none;
}

.fallback-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px; /* Optional: Add rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add shadow for depth */
}