/* General body styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Navbar styles */
#navbar {
    background-color: #333;
    color: white;
    overflow: hidden;
}

#navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#navbar li {
    float: left;
}

#navbar a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: white;
    transition: background 0.3s ease-in-out;
}

#navbar a:hover {
    background-color: #555;
}

/* Main content styling */
#main-content {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

/* Chat styles */
#chat-container {
    border: 1px solid #ddd;
    padding: 10px;
    margin-top: 20px;
    height: 550px;
    overflow-y: auto;
}

#message-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#message-list li {
    border-bottom: 1px solid #f1f1f1;
    padding: 10px;
}

form#message-form {
    margin-top: 20px;
}

input#message-input {
    width: calc(100% - 90px);
    padding: 10px;
}

button {
    padding: 10px 20px;
    cursor: pointer;
}

button:hover {
    opacity: 0.8;
}

/* Clearfix for floated elements */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Media queries for responsiveness */
@media (max-width: 600px) {
    #navbar li {
        float: none;
    }

    #navbar a {
        text-align: center;
        padding: 10px;
    }

    input#message-input {
        width: calc(100% - 110px);
    }
}
body {
    font-family: Arial, sans-serif;
}

/* Resetting default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styling the body for some nice background and font */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
    line-height: 1.6;
    padding: 20px;
}

/* Container for the form to centrally align it */
.register-form-wrapper {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Style for each form group section */
.form-group {
    margin-bottom: 15px;
}

/* Label styles */
.form-group label {
    display: block;
    margin-bottom: 5px;
}

/* Input field styles */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc; 
    border-radius: 5px;
}

/* Button styling */
button {
    cursor: pointer;
    background-color: #5cb85c; /* Green background */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
}

button:hover {
    background-color: #4cae4c; /* Darker green on hover */
}

/* Message styling */
.message-styling {
    background-color: #dff0d8; /* Light green background */
    color: #3c763d; /* Dark green text */
    padding: 10px;
    border: 1px solid #d6e9c6;
    border-radius: 5px;
    margin-top: 20px;
}


/* Styly pre footer */
.site-footer {
    background-color: #222;
    color: white;
    text-align: center;
    padding: 10px 0;
}

.footer-content {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
}

.site-footer p {
    margin: 0;
    font-size: 14px;
}

.site-footer a {
    color: lightblue;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* Styly pre centrálny textový blok s červeným rámčekom */
.centered-text {
    color: red; /* Červená farba textu */
    border: 2px solid red; /* Červený rámček okolo textu */
    padding: 20px; /* Odstup medzi textom a rámčekom */
    width: 50%; /* Šírka textového bloku */
    margin: 100px auto; /* Vrchný & spodný okraj a auto pre vycentrovanie na stred */
    text-align: center; /* Zarovnanie textu na stred */
}

.green-text-centered {
    color: green; /* Zelená farba textu */
    border: 2px solid green; /* Zelený rámček okolo textu */
    padding: 10px; /* Priestor medzi textom a rámčekom */
    width: fit-content; /* Šírka podľa obsahu */
    margin: auto; /* Automatické okraje pre centráciu vodorovne */
    position: absolute; /* Absolútne pozicionovanie */
    top: 112px; /* Posunutie od hornej polovice stránky o 50% */
    left: 50%; /* Posunutie od ľavej polovice stránky o 50% */
    transform: translate(-50%, -50%); /* Posunutie späť o 50% šírky a výšky elementu pre presné centrovanie */
}

/* Štylizácia odstavca s online užívateľmi */
#online-users {
    background-color: #fff;
    border-radius: 5px;
    padding: 15px;
    margin-top: 15px;
}

/* Zvýraznenie textu pre lepšiu viditeľnosť */
#online-users span {
    display: inline-block;
    background-color: #e7e7e7;
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
    font-size: 0.9em;
}