@media (max-width: 768px) {
    .content-image {
        width: 70%;        /* Adjust width for tablets and smaller screens */
        max-width: 300px;  /* Set an appropriate max width for medium screens */
    }
}

@media (max-width: 480px) {
    .content-image {
        width: 90%;        /* Increase width for smaller devices */
        max-width: 250px;  /* Set max width for small screens */
    }
}
@media (max-width: 768px) {
    .launch-link {
        text-decoration: none !important; /* Forces removal of underline on mobile */
    }
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

h1, h2, h3, h4, h5, h6 {
    color: white;
}

/* Initial image styling */
.content-image {
    width: 80%; 
    max-width: 500px;
    min-width: 200px; 
    height: auto; 
    border-radius: 5%;
    transition: transform 0.3s ease-in-out; 
}

/* Hover effect */
.content-image:hover {
    transform: scale(1.1); 
}
.launch{
    font-size: 3vh;
}

.more-gifs {
    display: block;
    /* color: rgb(2446, 196, 74); */
    color: rgb(239,237,235);
    text-decoration: none;
    text-shadow: 
    -0.8px -0.8px 0 rgb(76,76,76),  
     0.8px -0.8px 0 rgb(76,76,76),  
    -0.8px  0.8px 0 rgb(76,76,76),  
     0.8px  0.8px 0 rgb(76,76,76);
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 5vh;
    transition: color 0.3s ease, transform 0.3s ease; 

}


.small-text{
    
    display: block;
    /* color: rgb(2446, 196, 74); */
    color: rgb(239,237,235);
    text-decoration: none;
    text-shadow: 
    -0.8px -0.8px 0 rgb(76,76,76),  
        0.8px -0.8px 0 rgb(76,76,76),  
    -0.8px  0.8px 0 rgb(76,76,76),  
        0.8px  0.8px 0 rgb(76,76,76);
    margin-bottom: 0px;
    font-weight: bold;
    font-size: 2vh;
    transition: color 0.3s ease, transform 0.3s ease; 


}

/* .more-gifs:hover {
    color: whitesmoke; 
    transform: translateY(-10px);
} */


/* rgb(246,196,74) */

.gif-container {
    background-color: rgba(0, 0, 0, 0);
    color: white;
    padding: 20px;
    /* box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); */
    border-radius: 8px;
    text-align: center;
}

.construction-gif {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.links {
    margin-top: 20px;
    font: Roboto;
}


.upload-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: green;
    color: white;
    cursor: pointer;
    font-size: 18px;
}

.upload-btn:hover {
    background-color: #0056b3;
}


body, html {
    height: 100%;
    margin: 0;
    font-weight: bold;

}

.video-container {
    position: fixed; 
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1; 
}

.back-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* opacity: 0.60; */
    
}
.content {
    position: relative;
    z-index: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: white;
}

.kanit-semibold {
    font-family: "Kanit", sans-serif;
    font-weight: 600;
    font-style: normal;
  }


  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.446); /* Adjust the alpha value to control darkness */
    z-index: 1; /* Places the overlay above the video */
    pointer-events: none; /* Allows clicks to pass through the overlay */
}

.launch-link {
    color: rgb(239,237,235); /* Adjust color for better visibility */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make it stand out */
    transition: color 0.3s ease;
}

.launch-link:hover {
    color: rgb(246,196,74);
    text-decoration: none;
}