body {
    margin: 0; /* Remove any default margin from the body */
    background-color: black;
    font-family: 'Arial', 'Arial MS';
}


.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: -1001; /* Send the video to the back */
}

/* Transparent black overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.0) 0px,
        rgba(255, 255, 255, 0.0) 5px,
        rgba(0, 0, 0, 0.5) 5px,
        rgba(0, 0, 0, 0.5) 8px
    );
    pointer-events: none; /* So that the overlay doesn't block clicks */
    z-index: -1000; /* Keeps the overlay beneath the content */
}
/* Transparent black overlay */
.overlay2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.0) 0px,
        rgba(255, 255, 255, 0.0) 5px,
        rgba(0, 0, 0, 0.5) 5px,
        rgba(0, 0, 0, 0.5) 8px
    );
    pointer-events: none; /* So that the overlay doesn't block clicks */
    z-index: -1000; /* Keeps the overlay beneath the content */
}

.frontpage, .mainpage{
    font-size: 50px;
    text-align: center;
    color: white;
    font-weight: bold;
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Centre horizontally */
    align-items: center; /* Centre vertically */
    height: 100vh; /* Ensure the body takes up the full viewport height */
    z-index:-10000;
}

.frontpage{
    filter: drop-shadow(0px 0px 5px #44c);
}

.signup-window{
    padding: 40px;
    background-color: rgba(0, 0, 0, 0.33);
    border-radius: 10px;
}

footer {
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 65%); /* Fade from black to transparent */
    font-family: 'Arial', 'Arial MS';
    color: #7f7f7f;            /* White text */
    text-align: center;      /* Center text */
    padding: 5px 0;         /* Vertical padding */
    font-size: 16px;         /* Font size */
    position: fixed;         /* Fix the footer at the bottom */
    width: 100%;             /* Make sure it spans the full width */
    bottom: 0;               /* Stick to the bottom of the page */
    box-sizing: border-box;  /* Ensure padding does not affect width */
}

footer a {
    color: #44c;             /* Light blue links */
    text-decoration: none;   /* Remove underline */
}

footer a:hover {
    text-decoration: underline;  /* Underline links on hover */
}

footer p {
    margin: 0;               /* Remove default margin from paragraphs */
}

.tile-container {
    display: flex; /* Align tiles in a row */
    justify-content: center; /* Centre tiles horizontally */
    align-items: center; /* Centre tiles vertically */
}

.tile {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh; /* Set height to 20% of the viewport height */
    min-height: 75px;
    width: 20vw; /* Set width to 20% of the viewport width (optional) */
    margin: 10px; /* Add some space between the tiles */
    flex-grow: 1; /* Allow tiles to grow and adapt to available space */
}

    .tile:hover {
        transition: filter 0.3s ease, color 0.3s ease;
        filter: drop-shadow(0px 0px 50px #44c);
        color: lightblue; /* Or any other shade of light blue */
    }

.tile-container-horizontal  {
    display: flex; /* Align tiles in a row */
    justify-content: center; /* Centre tiles horizontally */
    align-items: center; /* Centre tiles vertically */
    flex-direction: row; /* Ensure tiles are arranged in a row */
}

.tile-horizontal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh; /* Adjust as needed */
    min-height: 75px; /* Ensure a minimum height */
    min-width: 200px;
    width: 20vw; /* Width is smaller for horizontal alignment */
    margin: 10px; /* Add space between tiles */
    flex-grow: 1; /* Allow tiles to adapt to available space */
}

.tile-horizontal:hover {
    transition: filter 0.3s ease, color 0.3s ease;
    filter: drop-shadow(0px 0px 50px #44c);
    color: lightblue; /* Or any other shade of light blue */
}

.passwordHint{
    font-size:12px;
    font-style: italic;
    text-align:left;
    margin: 10px;
    margin-top: 0px;
}

@media (max-aspect-ratio: 1/1) {
    .tile-container{
        display: flex; /* Align tiles in a row */
        justify-content: center; /* Centre tiles horizontally */
        align-items: center; /* Centre tiles vertically */
        flex-direction: row; /* Ensure tiles are arranged in a row */
    }
    .tile {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20vh; /* Adjust as needed */
        min-height: 75px; /* Ensure a minimum height */
        min-width: 200px;
        width: 20vw; /* Width is smaller for horizontal alignment */
        margin: 10px; /* Add space between tiles */
        flex-grow: 1; /* Allow tiles to adapt to available space */
    }
    .tile:hover {
        transition: filter 0.3s ease, color 0.3s ease;
        filter: drop-shadow(0px 0px 50px #44c);
        color: lightblue; /* Or any other shade of light blue */
    }
}

/* Style for input fields */
input {
    width: 300px; /* Double the default size */
    padding: 5px; /* Add padding for a better look */
    margin: 20px;
    font-size: 0.4em; /* Make the text larger */
    box-sizing: border-box; /* Ensure padding doesn't affect the width */
    text-align: center;
    font-style: italic;
    color: white;
    background-color:  rgba(0, 0, 0, 0.33);;
    border-color: 1px solid black;
    border-radius: 5px;
}

/* Optional: Style for the form */
form {
    max-width: 400px; /* Set a max width for the form */
    margin: auto; /* Center the form on the page */
    border: none;
}

/* Optional: Style for labels */
label {
    font-size: 0.7em; /* Slightly larger labels */
}

/* Optional: Button styling */
button {
    width: 300px;
    padding: 5px;
    margin: 20px;
    font-size: 0.4em; /* Make the text larger */
    cursor: pointer;
    color: white;
    background-color:  rgba(0, 0, 0, 0.33);;
    border-color: 1px solid black;
    border-radius: 5px;
}


a:visited {
    color: white;
}

a {
    text-decoration: none;
    font-weight: bold;
    color: white;
}

a:hover {
    transition: text-shadow 0.3s ease;
    text-shadow: 
        3px 3px 0px rgba(68, 68, 204, 0.5),  /* 50% transparent */
        -3px -3px 0px rgba(68, 68, 204, 0.5),
        3px -3px 0px rgba(68, 68, 204, 0.5),
        -3px 3px 0px rgba(68, 68, 204, 0.5);
}