﻿
html,body{
    overflow:hidden;
	padding:0;
    margin:0;
}

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
}
.container::-webkit-scrollbar { 
    display: none;  /* Older Safari and Chromium */
}

.splash-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5; /* Fallback color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it is on top of other content */
    transition: opacity 1s ease-out; /* Add fade-out transition */
}

.splash-image {
    max-width: 100vw; /* Adjust image size as needed */
    max-height: 100vh;
    /* Optional: add animation to the image */
    /* animation: blinker 2s linear infinite; */
}

.main-content {
    display: none; /* Hide main content initially */
    padding: 20px;
}

/* 1. Define the animation using @keyframes */
@keyframes fadeInScale {
    /* 0% is the start of the animation */
    0% {
        opacity: 1;
        transform: scale(0.9); /* Start slightly smaller */
    }
    /* 100% is the end of the animation */
    100% {
        opacity: 0;
        transform: scale(1); /* End at original size */
    }
}

/* 2. Apply the animation to your image element */
.animated-image {
    /* Bind the animation to the element */
    animation-name: fadeInScale;
    /* Define the duration of the animation */
    animation-duration: 9.5s;
    /* Specify how many times it should play (infinite for continuous loop) */
    animation-iteration-count: 1; /* Plays once */
    /* Define the timing function (e.g., linear, ease-in, ease-out) */
    animation-timing-function: ease-out;
    /* Ensures the final styles (100% keyframe) persist after the animation finishes */
    animation-fill-mode: forwards;
}

/* Optional: Add an effect on hover using transitions */
.animated-image:hover {
    transition: transform 0.5s ease-in-out;
    transform: scale(1.05); /* Slightly enlarge on hover */
}