/* CSS for the page layout */
body {
    /* Background image setup */
    background-image: url("../img/background.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    background-size: cover;

    font-family: Arial, sans-serif;
    margin: 0;
}

/* Ensure main content is centered vertically and horizontally */
main {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically if space allows */
    min-height: calc(100vh - (/* Add height of your header + footer here */)); 
    /* The min-height line above is complex for a snippet, so we'll rely on the body/row settings */
}

/* --- Base Style (Non-Hover State) --- */
.neon-links {
 	font-size: 2rem; /* Large font size for impact */
	font-family: 'Blacksword';
 	font-weight: 400;
 	text-align: center;
	padding: 10px;
	text-decoration: none;
 	
 	/* 1. Small White Area Inside the Font */
 	color: #070707; /* Near-white color for the inner part */
 	
 	/* 2. The Outer Neon Glow - **Only the subtle inner shadow remains** */
 	text-shadow: 
 		/* First layer: Subtle inner shadow for perceived depth */
 		0 0 5px rgba(255, 255, 255, 0.4); 

	/* Flicker Effect */
	animation: flicker 3s infinite alternate;
}

/* --- Base Style (Hover State) --- */
.neon-links:hover {
  	font-size: 2rem; /* Large font size for impact */
	font-family: 'Blacksword';
  	text-align: center;
	padding: 10px;
	text-decoration: none;
  
  	/* 1. Small White Area Inside the Font */
  	color: #f7f7f7; /* Near-white color for the inner part */
  
  	/* 2. The Outer Neon Glow */
  	text-shadow: 
    	/* First layer: Subtle inner shadow for perceived depth */
    	0 0 5px rgba(255, 255, 255, 0.4),
    
    	/* Second layer: The primary glow color (e.g., Pink/Purple) */
    	0 0 20px #ff00ff,
    	0 0 40px #ff00ff,
    
    	/* Third layer: Wider, more diffused glow */
    	0 0 80px #b300b3,
    	0 0 100px #b300b3;

	/* Flicker Effect */
	animation: flicker 4s infinite alternate;
}

/* --- Neon Title Style --- */
.neon-title {
    font-size: 3rem;
    font-family: 'Blacksword';
    text-align: center;
    padding: 25px;
    text-decoration: none;
    color: #f7f7f7;
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.4),
        0 0 20px #ff00ff,
        0 0 40px #ff00ff,
        0 0 80px #b300b3,
        0 0 100px #b300b3;

	/* Flicker Effect */
	animation: flicker 4s infinite alternate;
}

/* Optional: Add a subtle animation for a "flickering" effect */
@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.4),
            0 0 20px #ff00ff,
            0 0 40px #ff00ff,
            0 0 80px #b300b3,
            0 0 100px #b300b3;
    }
    20%, 24%, 55% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.4),
            0 0 10px #ff00ff,
            0 0 20px #ff00ff,
            0 0 50px #b300b3,
            0 0 70px #b300b3;
        opacity: 0.9;
    }
}

/* Row 1 (Title) */
.row.first {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Removed border-bottom */
    width: 100%;
}

/* Row 2 (Verification Content) - MODIFIED FOR NO COLUMNS */
.row.second {
    flex: 1;
    display: flex; /* Use flex to center the container */
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px; /* Add some padding around the container */
    box-sizing: border-box;
}

.container {
    background: rgba(0 ,0, 0, 0.50);
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px; /* Constrain the size */
    width: 90%;
}

p {
	color: rgba(251,181,255,1.00);
	font-weight: bold;
	margin-bottom: 30px;
}

label {
	display: block;
	margin-bottom: 10px;
	color: rgba(251,181,255,1.00);
}

input[type="date"] {
	padding: 10px;
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

button {
	background-color: #007bff;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s;
}

button:hover {
	background-color: #0056b3;
}

#message {
	margin-top: 20px;
	font-weight: bold;
	color: red;
}


/* --- Left Side (Logo) --- */
.head-left {
    display: flex;
    align-items: center;
}

img#lips {
    /* Logo image specific styling */
    width: 300px;
    height: auto;
    /* Optional: Add a subtle filter to make the logo fit the theme */
    filter: drop-shadow(0 0 5px #ff00ff) drop-shadow(0 0 10px #ff00ff);
}

/* --- Right Side (Neon Link) --- */
.head-right {
    /* Use flex just in case more items are added here later */
    display: flex;
    align-items: right;
	padding-right: 50px;
}

/* ============================================
   Footer (Fixed at Bottom)
   ============================================ */
#links_footer {
    position: fixed; /* Set position to fixed */
    bottom: 0;       /* Align to the bottom of the viewport */
    left: 0;         /* Align to the left of the viewport (ensure full width) */
    width: 100%;     /* Ensure it spans the full width of the viewport */
    padding: 10px 0;
    text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;    /* Optional: Ensure it stays on top of other content */
}

#cp1{
	color: rgba(251,181,255,1.00);
    text-shadow: 0px 0px 20px #ED1C91;
    font-size: clamp(.8rem, 1.5vw, 1.25rem);
}

#cp2 {
    color: rgba(251,181,255,1.00);
    text-shadow: 0px 0px 10px #CB0A71;
	font-size: clamp(0.5rem, .75vw, 1rem);
	text-decoration: none;
}

/* ============================================
   Media Query for Mobile Devices
   (Columns stack vertically - 1 column for width <= 600px)
   ============================================ */
@media screen and (max-width: 600px) {
    /* Make Header and Footer Scrollable (Not Fixed) */
header {
        flex-direction: column; /* Stack items vertically */
        justify-content: center;
        align-items: center;
        padding-top: 20px;
        padding-bottom: 20px;
        position: static; /* Header now scrolls with content */
    }

    #links_footer {
        position: static; /* Footer now scrolls with content */
    }

    /* Reset Main margins now that header/footer are static */
    main {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Target the second row which contains the columns */
	.row.second {
        /* This row now consistently centers the single container */
        padding: 10px;
    }
    
    /* Header adjustments for smaller screens */
	img#lips {
        width: 75%; /* Make logo smaller on mobile */
        max-width: 200px;
        margin-bottom: 15px; /* Add space between logo and link */
        filter: none; /* Reduce filter complexity on mobile if needed */
    }

    .neon-links a {
        font-size: 1rem;
}