@media screen and (min-resolution: 2dppx) {
    html {
        font-size: 18px; /* For high-resolution screens */
    }
}

@media screen and (max-resolution: 1dppx) {
    html {
        font-size: 12px; /* For low-resolution screens */
    }
}

html {
    font-size: 16px; /* Base size */
}

body {
	font-size: 2vmin; /* vmin ensures the font size scales well on both wide and tall screens */
    font-family: 'Arial', sans-serif;
    font-weight: normal;
    /*font-size: 1rem;*/ /* = 16px */
    font-size: calc(1rem + 0.5vh); /* Base size with a viewport relative increase */  
    text-align: center;
    background-image: url('image.jpg');
    background-size: auto; /* Keeps the original size of the image */
    background-repeat: repeat; /* This will tile your image */
    background-attachment: fixed;    
    margin: 0;
    /*height: 100vh;*/
    /*display: flex;*/
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    /*overflow: hidden;*/ /* to prevent any unwanted scroll */
}

h1 {
    font-size: 2rem; /* = 32px */
}

form {
    width: 80%; /* or any specific width you prefer */
    max-width: 800px; /* optional: maximum width the form can expand to */
    /* ... your other form styles ... */
}

.timer {
    position: fixed;
    font-size: 52pt;
    top: 10px;
    right: 10px;
    background: #f0f0f0;
    padding: 5px;
    border-radius: 5px;
    text-align: right;
}

.game-image-container {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: #f0f0f0;
    padding: 0px;
    border-radius: 0px;
    z-index: -1;
}

.game-image {
	width: 200px;
}

.centered-form  {
    margin: 0 auto;
    max-width: 80%;
    background-color: rgba(255, 255, 255, 0.8); /* white with 60% opacity */
    padding: 10px; 
    border-radius: 20px; /* Optional: for rounded corners */
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); /* Optional: a slight shadow to make it pop out */
    overflow-x: auto;
    overflow-y: auto;
}

.container {
    overflow-x: auto;
    overflow-y: auto;
}

#myForm {
    position: relative; /* This ensures child absolute positioning is relative to the form */
    padding-top: 10px; /* To ensure the image doesn't overlap with form elements if necessary */
    z-index: 1;
}

#formImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px; /* Set the width of the image */
    height: auto; /* Maintain aspect ratio */
    z-index: 2; /* Ensure the image stays on top if needed */
}

.form-content {
	position: relative; /* This is crucial */
    z-index: 3; /* Higher than the formImage to ensure visibility */
}

.header-wrapper {
    display: block; /* Forces a new line */
    padding: 2px 2px;
}

.text-background {
    background-color: rgba(255, 255, 255, 0.5);;
    color: black;
    padding: 2px 2px; /* Adjust padding to control the background size around the text */
    border-radius: 5px;
    display: inline; /* or inline, depending on your layout needs */
}

.message, .error-message, .happy-message {
    margin-bottom: 5px;
}

.infos {
	font-size: 0.7em;
}

.happy-message {
	color: green;
	font-size: 1em;
}

.error-message {
    color: red;
}

/* Table styles */
table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}
th, td {
	border: 1px solid black;
	padding: 10px;
	text-align: left;
}
th {
	background-color: #f2f2f2;
}

.top_bar a, .main_menu a {
    /* Base styles for links */
    background-color: #333; /* Dark background */
    color: white;           /* White text */
    font-size: 18px;        /* Big font size */
    padding: 10px 20px;     /* Padding for bigger appearance */
    border-radius: 8px;     /* Rounded corners */
    text-decoration: none;  /* Remove the default underline */
    display: inline-block;  /* Allows padding to work properly and makes link behave like a block element */
    transition: background-color 0.3s; /* Transition for hover effect */
    margin: 5px;            /* Add some space around each link */
}

.top_bar a:hover, .main_menu a:hover {
    background-color: #555; /* Dark gray when mouse is over it */
    text-decoration: none;  /* Ensure no underline on hover */
}

.top_bar a:active, .main_menu a:active {
    background-color: #222; /* Even darker color when link is clicked */
}

.txtin {
    /* Base button styles */
    background-color: #333; /* Dark background */
    color: white;           /* White font */
    font-size: 18px;        /* Big font size */
    padding: 10px 20px;     /* Padding for bigger appearance */
    border: none;           /* Remove default border */
    border-radius: 8px;     /* Rounded corners */
    cursor: pointer;        /* Cursor changes to pointer on hover */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    max-width: 90%;
    
    /* Remove outline on focus for a cleaner look; 
       but remember this impacts accessibility, so consider alternatives if necessary */
    outline: none;  
}

.txtin:hover {
    background-color: #555; /* Dark gray when mouse is over it */
}

/* Optional: Button on active state (when clicked) */
.txtin:active {
    background-color: #333; /* Even darker color when button is active */
}

.bbutton {
    /* Base button styles */
    background-color: #333; /* Dark background */
    color: white;           /* White font */
    font-size: 18px;        /* Big font size */
    padding: 10px 20px;     /* Padding for bigger appearance */
    border: none;           /* Remove default border */
    border-radius: 8px;     /* Rounded corners */
    cursor: pointer;        /* Cursor changes to pointer on hover */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
    
    /* Remove outline on focus for a cleaner look; 
       but remember this impacts accessibility, so consider alternatives if necessary */
    outline: none;  
}

.bbutton:hover {
    background-color: #555; /* Dark gray when mouse is over it */
}

/* Optional: Button on active state (when clicked) */
.bbutton:active {
    background-color: #222; /* Even darker color when button is active */
}