/* For the reader, this code is shit, just look at it, tons of line srepeating itself, doing the same stuff, but does it work? YES, actually, this is just a web page, this code can be shit because who fucking cares lol */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Inter';
    src: url('Inter.ttf') format('truetype'); /* Adjust the path as necessary */
    font-weight: normal;
    font-style: normal;
}

body, html {
    height: 100%;
    font-family: 'Inter', sans-serif; /* Fallback to sans-serif if Inter is not available */
    background-color: #180A32;
    color: #32CD32; /* Set default text color to lime green */
}

body {
    height: 100%;
    font-family: 'Inter', sans-serif; /* Fallback to sans-serif if Inter is not available */
    background-color: #180A32; /* Fallback color */
    background-image: url('indexmap.png'); /* Path to your background image */
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    color: #32CD32; /* Set default text color to lime green */
}

.container {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.bottom-button {
    padding: 12px 12px;
    cursor: pointer;
    border: none;
    background-color: #180A32;
    color: #32CD32;
    border-radius: 8px;
    position: absolute;
    bottom: 10px; /* Add some space from the bottom */
}

.settings-button {
    padding: 12px 12px;
    cursor: pointer;
    border: none;
    background-color: #180A32;
    color: #32CD32;
    border-radius: 8px;
    position: absolute;
    left: 10px; /* Position for the settings button on the left side */
    top: 10px; /* Add some space from the top */
}

.login-sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -100%; /* Start hidden below the viewport */
    background-color: #180A32;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: bottom 0.5s ease; /* Transition for sliding up */
    height: 100%; /* Full height */
    z-index: 1000; /* Ensure it appears above other content */
}

.register-sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -100%; /* Start hidden below the viewport */
    background-color: #180A32;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: bottom 0.5s ease; /* Transition for sliding up */
    height: 100%; /* Full height */
    z-index: 1000; /* Ensure it appears above other content */
}

.register-sidebar form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.register-sidebar input {
    margin: 10px 0;
    padding: 10px;
    width: 200px;
    border: 1px solid #391771;
    border-radius: 5px;
    background: #391771;
    color: #55E451;
    border-radius: 5px;
}

.register-sidebar button { 
    margin-bottom: 10px;
    margin-top: 10px;
    width: 124px;
    height: 32px;
    border: none;
    background-color: #28a745;
    color: #391771;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 5px;
    cursor: pointer;
}

#registerButton {
    background-color: transparent; /* Make the background transparent */
    color: #7730EB; /* Set the text color to lime green */
    border: none; /* Remove the border */
    cursor: pointer; /* Change cursor to pointer on hover */
    font-weight: bold; /* Make the text bold */
    padding: 10px 10px; /* Optional: Add padding for better appearance */
    font-size: 12px;
}

.settings-sidebar {
    position: fixed;
    left: -100%; /* Start hidden off-screen to the left */
    top: 0;
    width: 100%; /* Full width of the screen */
    height: 100%; /* Full height */
    background-color: #180A32;
    transition: left 0.5s ease; /* Change transition from right to left */
    z-index: 1000; /* Ensure it appears above other content */
    padding: 0; /* Remove padding from the sidebar */
}

.settings-options {
    list-style-type: none; /* Remove default list styling */
    padding: 10px;
    padding-top: 72px;
    margin: 0; /* Remove margin to align with the top */
    text-align: left; /* Align text to the left */
    width: 100%; /* Full width */
}

.settings-options li {
    padding: 10px 20px; /* Add padding for each option */
    font-style: normal; /* Text color */
    font-weight: 700;
    line-height: normal;
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s; /* Smooth background color transition */
}

.settings-options li:hover {
    background-color: #58E54D; /* Change background on hover */
    color:#260f52;
    border-radius: 8px;
}

.login-sidebar form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-sidebar input {
    margin: 10px 0;
    padding: 10px;
    width: 200px;
    border: 1px solid #391771;
    border-radius: 5px;
    background: #391771;
    color: #55E451;
    border-radius: 5px;
}

.login-sidebar button {
    margin-bottom: 3px;
    margin-top: 10px;
    width: 124px;
    height: 32px;
    border: none;
    background-color: #28a745;
    color: #391771;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 5px;
    cursor: pointer;
}

.close-button, .hide-button {
    background: none;
    border: none;
    color: #391771;
    cursor: pointer;
    position: absolute; /* Positioning for the buttons */
}

.close-button {
    background-color: #260f52;
    border: none; /* Remove border */
    color: #ffffff; /* Text color */
    cursor: pointer; /* Change cursor to pointer */
    position: absolute; /* Positioning for the button */
    top: 0; /* Position for the close button at the top */
    right: 0; /* Position for the close button on the right */
    padding: 12px 12px; /* Add some padding */
    margin: 10px 10px;
    border-radius: 8px; /* No rounded corners */
}

.hide-button {
    left: 20px; /* Position for the hide button on the left side */
    top: 20px; /* Position for the hide button at the bottom */
}

.option-sidebar {
    position: fixed;
    left: -100%; /* Start hidden off-screen to the left */
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #180A32; /* Solid background color */
    display: flex; /* Use flexbox for centering content */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2000; /* Ensure it appears above other content */
    transition: transform 0.5s ease; /* Smooth transition for transform */
}

.option-sidebar.active {
    transform: translateX(100%); /* Slide in from the left */
}

.close-option-button {
    background-color: #260f52;
    border: none;
    color: #ffffff;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    padding: 12px 12px;
    margin: 10px 10px;
    border-radius: 8px;
}

.tables-container {
    display: flex; /* Use flexbox to arrange tables side by side */
    justify-content: space-around; /* Space between tables */
    width: 100%; /* Full width */
    margin-top: 20px; /* Space above the tables */
}

.account-info-table, .settings-info-table {
    width: 45%; /* Set width for each table */
    background-color: rgba(255, 255, 255, 0.8); /* Light background with transparency */
    border-radius: 10px; /* Smooth edges */
    overflow: hidden; /* Ensure rounded corners are visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
}

table {
    width: 100%; /* Full width of the table */
    border-collapse: collapse; /* Collapse borders */
}

th, td {
    padding: 12px; /* Padding for table cells */
    text-align: left; /* Align text to the left */
}

th {
    background-color: #260f52; /* Header background color */
    color: #58E54D; /* Header text color */
}

td {
    background-color: #58E54D; /* Cell background color */
    color: #260f52;
}

.tables-container {
    display: flex; /* Use flexbox to arrange tables */
    flex-wrap: wrap; /* Allow wrapping to the next line */
    justify-content: space-around; /* Space between tables */
    width: 100%; /* Full width */
    margin-top: 20px; /* Space above the tables */
}

.progress-table {
    width: 45%; /* Set width for each table */
    background-color: #260f52; /* Light background with transparency */
    border-radius: 10px; /* Smooth edges */
    overflow: hidden; /* Ensure rounded corners are visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    margin-bottom: 20px; /* Space between tables */
    padding: 15px; /* Padding inside the table */
}

.progress-bar {
    background-color: #260f52; /* Background for the progress bar */
    border-radius: 5px; /* Smooth edges for the progress bar */
    height: 20px; /* Height of the progress bar */
    margin-top: 10px; /* Space above the progress bar */
}

.progress {
    background-color: #28a745; /* Color of the progress */
    height: 100%; /* Full height of the progress bar */
    border-radius: 5px; /* Smooth edges for the progress */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .progress-table {
        width: 90%; /* Full width on smaller screens */
    }
}

.tables-container {
    display: flex; /* Use flexbox to arrange tables */
    flex-wrap: wrap; /* Allow wrapping to the next line */
    justify-content: space-around; /* Space between tables */
    width: 100%; /* Full width */
    margin-top: 20px; /* Space above the tables */
}

.event-table {
    width: 45%; /* Set width for each table */
    background-color: #260f52; /* Light background with transparency */
    border-radius: 10px; /* Smooth edges */
    overflow: hidden; /* Ensure rounded corners are visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    margin-bottom: 20px; /* Space between tables */
    padding: 15px; /* Padding inside the table */
}

.event-table h3 {
    margin-bottom: 10px; /* Space below the heading */
}

.event-table p {
    margin: 5px 0; /* Space between paragraphs */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .event-table {
        width: 90%; /* Full width on smaller screens */
    }
}

.progress-table {
    width: 90%; /* Set width for the table */
    background-color: #260f52; /* Light background with transparency */
    border-radius: 10px; /* Smooth edges */
    overflow: hidden; /* Ensure rounded corners are visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    margin: 20px auto; /* Center the table with margin */
    padding: 15px; /* Padding inside the table */
}

.progress-bar {
    background-color: #381670; /* Background for the progress bar */
    border-radius: 5px; /* Smooth edges for the progress bar */
    height: 20px; /* Height of the progress bar */
    margin-top: 10px; /* Space above the progress bar */
}

.progress {
    background-color: #28a745; /* Color of the progress */
    height: 100%; /* Full height of the progress bar */
    border-radius: 5px; /* Smooth edges for the progress */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .progress-table {
        width: 90%; /* Full width on smaller screens */
    }
}

.options-container {
    display: flex; /* Use flexbox to arrange option cards */
    flex-wrap: wrap; /* Allow wrapping to the next line */
    justify-content: space-around; /* Space between cards */
    width: 100%; /* Full width */
    margin-top: 20px; /* Space above the options */
}

.option-card {
    width: 45%; /* Set width for each option card */
    background-color: #260f52; /* Light background with transparency */
    border-radius: 10px; /* Smooth edges */
    overflow: hidden; /* Ensure rounded corners are visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    margin-bottom: 20px; /* Space between cards */
    padding: 15px; /* Padding inside the card */
    text-align: center; /* Center text */
}

.option-card h3 {
    margin-bottom: 10px; /* Space below the heading */
}

.option-card p {
    margin: 5px 0; /* Space between paragraphs */
}

.option-button {
    background-color: #28a745; /* Button background color */
    color:  #260f52; /* Button text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Smooth edges */
    padding: 10px 15px; /* Padding inside the button */
    cursor: pointer; /* Change cursor to pointer */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s; /* Smooth background color transition */
}

.option-button:hover {
    background-color: #218838; /* Darker green on hover */
}

.friend-tables-container {
    display: flex; /* Use flexbox to arrange tables */
    flex-wrap: wrap; /* Allow wrapping to the next line */
    justify-content: space-around; /* Space between tables */
    width: 100%; /* Full width */
    margin-top: 20px; /* Space above the tables */
}

.friend-info-table {
    width: 45%; /* Set width for each table */
    background-color: #58E54D; /* Light background with transparency */
    border-radius: 10px; /* Smooth edges */
    overflow: hidden; /* Ensure rounded corners are visible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    margin-bottom: 20px; /* Space between tables */
    padding: 15px; /* Padding inside the table */
    border-collapse: collapse; /* Collapse borders */
}

.friend-info-table caption {
    font-weight: bold; /* Bold caption */
    margin-bottom: 10px; /* Space below caption */
}

.friend-info-table th, .friend-info-table td {
    padding: 12px; /* Padding for table cells */
    text-align: left; /* Align text to the left */
}

.friend-info-table th {
    background-color: #260f52; /* Header background color */
    color: #58E54D; /* Header text color */
}

.friend-info-table td {
    background-color: #58E54D; /* Cell background color */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .friend-tables-container {
        flex-direction: column; /* Stack tables on smaller screens */
        align-items: center; /* Center tables */
    }

    .friend-info-table {
        width: 90%; /* Full width on smaller screens */
        margin-bottom: 20px; /* Space between stacked tables */
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .option-card {
        width: 90%; /* Full width on smaller screens */
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .tables-container {
        flex-direction: column; /* Stack tables on smaller screens */
        align-items: center; /* Center tables */
    }

    .account-info-table, .settings-info-table {
        width: 90%; /* Full width on smaller screens */
        margin-bottom: 20px; /* Space between stacked tables */
    }
}

/* Responsive Styles */
@media (max-width: 768px) {

    .login-sidebar input {
        width: 150px; /* Smaller input fields */
    }

    .settings-sidebar {
        width: 100%; /* Full width for smaller screens */
    }
}

@media (max-width: 480px) {

    .login-sidebar input {
        width: 100%; /* Full width input fields */
    }

    .settings-sidebar {
        width: 100%; /* Full width sidebar */
    }
}