/* Set a base font size */
* {margin: 0;padding: 0;box-sizing: border-box;}
html{font-size: 16px;background-image:linear-gradient(90deg, rgb(0, 0, 0),rgb(255, 255, 255));} 
/* Use rem units for other elements */
h1 {font-size: 2rem; /* 32px if base is 16px */}
p {font-size: 1rem; /* 16px if base is 16px */}
.container{
height: auto;
width: 35%;
margin: 6rem auto;
padding: 20px;
margin-bottom: 15%;
background-color: rgb(255, 255, 255);
border-radius:15px;
box-shadow: 0 16px 30px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.hidden{display: none;}
.container h1 {
font-size: 400%;
margin-top: 0;
font-weight: bold;
font-family: Georgia;
margin-bottom: 20px;
text-align: center;
color:rgb(0, 0, 0);}
form{display: flex;
flex-direction: column;
align-items: center;}
label{margin-top: 10px;}
input {
height:2.5rem;
font-size:2rem;
width: 50%;
margin-top: 5px;
padding: 5px;
border: 1px solid #ccc; 
border-radius: 5px;
text-align:center;}
button{
font-size:2rem;
text-align:center;
width: 50%;
padding: 5px;
border: 1px solid #ccc; 
margin-top: 2%;
background-color: rgb(0, 0, 0);
color:rgb(255, 255, 255);
border-radius:5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
button:hover{
background-color:rgb(255, 255, 255);
color:rgb(0, 0, 0);
cursor:pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
@media(max-width: 600px){
.container{
width: 75%;
height: 45%;}
form input{width:80%;}
.container h1 {font-size: 300%;
padding: 0px 10px 40px 10px;}}
/* SMALLER SCREENS */
@media(max-width: 768px){
body{flex-direction: column;}}



/*  START OF NAVIGATION xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/*  ONLY FOR LOGIN PAGE xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
header.navbar {
background-image:linear-gradient(90deg, rgb(0, 0, 0),rgb(255, 255, 255));
/*background-color: rgb(255, 255, 255);*/
margin:0;
padding:0;
position: relative; /* Important for keeping the flow */
width: 100%;}
/* Collapsible Menu Styles */
.nav-links {width: 100%;}
.nav-links ul {
list-style: none;
padding: 10px 20px;}
.nav-links li {
width:auto;
margin: 10px 0;}
.nav-links a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 1.2rem;
display: block;
transition: color 0.3s ease;}
.nav-links a:hover {
background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);}
/* Expanded Menu */
.nav-links.expanded {
height: auto; /* Expand to fit content */}
/* Responsive Design */
@media (min-width: 768px) {
.nav-links {
display: flex;
height: auto; /* Menu always visible on larger screens */
flex-direction: row;
justify-content: flex-end;
background: none;}
.nav-links ul {display: flex;padding: 0;}
.nav-links li {margin: 0 15px;color:rgb(255,255,255);}}
@media (max-width: 768px) {
.nav-links a {color:rgb(255,255,255);}
.nav-links a:hover {
color:rgb(0, 0, 0); background-color:rgb(255, 255, 255);}}
/*  END OF NAVIGATION xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/*FOOTER*/
footer {
margin-top: auto;
position: fixed; 
left: 0; 
bottom: 0; 
width: 100%;
background-image:linear-gradient(90deg, rgb(0, 0, 0),rgb(255, 255, 255)); 
/*background-color:rgb(255,255,255);*/ 
text-align: center;
color: rgb(0, 0, 0); 
font-weight: bold;}
footer p{margin:0;padding:0;}
@media (max-width: 768px) {
footer {color:rgb(255, 255, 255);}}
/*POP UP WINDOW*/
.popup {
position: fixed;
margin: 6rem auto 0 auto;
width: 20%;
height: auto;
background-color: rgb(255, 255, 255);
display: none;
justify-content: center;
align-items: center;}
.popup-content {
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: relative;
text-align:center;
border: 0.1rem solid rgb(0, 0, 0)}
.close-button {
position: absolute;
top: 10px;
right: 10px;
font-size: 2.1rem;
cursor: pointer;}
/* Container for error-message */
.box{
text-align:center;
height: auto;
width: 50%;
margin: 0 auto;
padding: 5px;
margin-top: 5%;
background-color: rgb(255, 255, 255);
border-radius:15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.4);}