body {
            font-family: Arial, sans-serif;
            background-color: #121212;
            color: #ffffff;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }
        .login-container {
            position: absolute;
            top: 10px;
            right: 20px;
            background: rgba(30, 30, 30, 0.8);
            padding: 10px;
            border-radius: 5px;
            text-align: center;
			width: 190px;
        }
        .login-container input {
            padding: 5px;
            margin: 5px;
        }
        .login-container button {
            background-color: #1e88e5;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
        }
        .login-container button:hover {
            background-color: #1565c0;
        }
		#sessionBtn {
			background-color: #1e88e5;
			color: white;
			border: none;
			padding: 5px 10px;
			cursor: pointer;
			border-radius: 5px;
			width: 100%;
			display: block;
			margin-top: 10px;
		}

		#sessionBtn:hover {
			background-color: #1565c0;
		}
		#logoutBtn {
			display: none;
			background-color: #d32f2f;
			color: white;
			border: none;
			padding: 5px 10px;
			cursor: pointer;
			border-radius: 5px;
			width: 10%;
			position: absolute;
			top: 15px;
			right: 60px;
		}

		#logoutBtn:hover {
			background-color: red;
		}
        .messages-button {
            display: none;
            position: absolute;
            top: 12px;
            right: 605px;
            background-color: #1e88e5;
            padding: 10px;
            border-radius: 5px;
        }
        .messages-button a {
            color: white;
            text-decoration: none;
        }
		.messages-button:hover {
			background-color: blue;
		}
		.enlaces-button {
            display: none;
            position: absolute;
            top: 12px;
            right: 480px;
            background-color: #1e88e5;
            padding: 10px;
            border-radius: 5px;
        }
        .enlaces-button a {
            color: white;
            text-decoration: none;
        }
		.enlaces-button:hover {
			background-color: red;
		}
		.plan-button {
            display: none;
            position: absolute;
            top: 12px;
            right: 740px;
            background-color: #1e88e5;
            padding: 10px;
            border-radius: 5px;
        }
        .plan-button a {
            color: white;
            text-decoration: none;
        }
		.plan-button:hover {
			background-color: red;
		}
        .container {
            max-width: 800px;
            margin: auto;
            padding: 50px 20px;
            text-align: center;
            flex: 1;
        }
        .sidebar, .sidebar-right {
            width: 250px;
            padding: 20px;
            background-color: rgba(30, 30, 30, 0);
            color: silver;
            position: fixed;
            transform: translateY(-50%);
            text-align: center;
        }
        .sidebar {
            left: 7%;
            top: 50%;
        }
        .sidebar-right {
            right: 7%;
            top: 52%;
        }
        .logo {
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: auto;
            z-index: -1;
        }
        .buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }
        .buttons a {
            display: block;
            width: 100px;
        }
        .button {
            background-color: #1e88e5;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            font-size: 1.1em;
            transition: background 0.3s;
        }
        .button:hover {
            background-color: #1565c0;
        }
        footer {
            background-color: #121212;
            color: silver;
            text-align: center;
            padding: 10px;
            border-top: 2px solid #1565c0;
            box-shadow: 0px -5px 5px rgba(0,0,0,0.5);
            position: fixed;
            bottom: 0;
            width: 100%;
            box-sizing: border-box;
        }
		@media (max-width: 480px) {
			
			#logoutBtn {
				width: 30%;
				top: 905px;
				right: 215px;
			}
			.login-container {
				top: 840px;
				right: 150px;
			}
			.messages-button {
				top: 900px;
				right: 8px;
			}
			.enlaces-button {
				top: 900px;
				right: -107px;
			}
			.plan-button {
				top: 900px;
				right: -200px;
			}
			
			.container {
				max-width: 560px;
				margin: auto;
				padding: 5px 20px;
				text-align: center;
				flex: 1;
				
			}
            
			.sidebar {
            left: 2%;
			top: 30%;
			font-size: 1.2em;
			width: auto;
			}
			.sidebar-right {
				right: 0%;
				top: 32.5%;
				font-size: 1.2em;
				width: auto;
			}

            .logo {
				position: absolute;
				top: 105%;  
				left: 82%;  
				width: 400px;
				height: auto;
				z-index: -1;
			}

            h1 {
                font-size: 1.8em;
            }
			
			.buttons {
				display: flex;
				justify-content: center;
				gap: 5px;
				margin-top: 30px;
				
			}

            .buttons a {
                width: 100%; 
				height: 30px;
				text-align: center;
				white-space: nowrap;
				
            }
			

            footer {
                font-size: 1.3em;
                padding: 10px;
            }
        }