.cont {
    display: flex;  /* Use flexbox layout for alignment */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    height: 90vh; /* Set height to 90% of the viewport height */
}

h1 {
    color: white; /* Set text color to white for visibility */
    border: 2px solid #ADD8E6; /* Add a thin light blue border */
    width: fit-content; /* Adjust the width to fit the content */
    text-align: center; /* Center align the text inside the heading */
    padding: 10px; /* Add padding for spacing inside the border */
    margin: 0 auto; /* Center the heading horizontally */
    font-weight: normal; /* Use normal font weight for the heading */
    background-color: transparent; /* Keep background transparent */
    box-sizing: border-box; /* Include padding and border in the element’s total width and height */
}

.links-container {
    display: flex;  /* Use flexbox to arrange links in a row */
    justify-content: center; /* Center items horizontally within the container */
    gap: 20px; /* Optional: Add space between the links */
    margin: 20px 0; /* Optional: Add vertical margin around the container */
}

.links-container a {
    transition: font-weight 0.3s, font-size 0.3s; /* Smooth transitions for font weight and size */
    background-color: white; /* Set background color for links */
    color: black; /* Set text color to black */
    text-align: center; /* Center align text within links */
    padding: 10px 10px; /* Add padding for clickable area */
    text-decoration: none; /* Remove underline from links */
    border-radius: 30%; /* Round the corners of the links */
}

.links-container a:hover {
    color: black; /* Keep text color black on hover */
    background-color: #ADD8E6; /* Change background color on hover */
    font-weight: bolder; /* Make text bolder on hover */
    font-size: 1.2em; /* Increase font size on hover for emphasis */
}

/* Styling for the success message box */
.success {
    color: black; /* Set text color to black for readability */
    padding: 20px; /* Add padding inside the box */
    background-color: #ADD8E6; /* Set light blue background for the box */
    border: 2px solid black; /* Add a solid black border */
    border-radius: 8px; /* Round the corners of the box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
    text-align: justify; /* Justify text within the box for a neat appearance */
    max-width: 600px; /* Set a maximum width for the box */
    width: 100%; /* Ensure the box takes full width within the max-width */
    margin: 10% auto; /* Center the box with vertical margin */
    padding: 25px; /* Add extra padding for the box content */
}

button{
    transition: font-weight 0.3s, font-size 0.3s;
    background-color: white;
    color: black;
    text-align: center;
    padding: 10px 10px;
    border-radius: 10%;
    -webkit-box-shadow: 0px 0px 28px 0px rgba(46, 210, 255, 1);
    -moz-box-shadow: 0px 0px 28px 0px rgba(46, 210, 255, 1);
    box-shadow: 0px 0px 28px 0px rgba(46, 210, 255, 1);
}

button:hover{
    color: black;
    background-color: #ADD8E6;
    font-weight: bolder;
    font-size: 1.2em;
}

/* Media queries for responsiveness */

/* For Desktop/Laptop Screen (1920X1080) */
/* Additional styles can be added here for desktop responsiveness */

/* For Tablet Screen (768x1024 to 1536x2048) */
/* Additional styles can be added here for tablet responsiveness */

/* For Smartphone Screen (320x568 to 414x896) */
/* Additional styles can be added here for smartphone responsiveness */