body {
 font-family: 'Poppins', sans-serif;
 text-align: center;
 background-color: #A76286;;
 background: url('bookboat.jpg') no-repeat center center fixed;
 background-size: 100% 100%;
 margin: 0;
 padding: 0;
}
body::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 
 z-index: -1;
}
header {
 background-color: none;
 color: #211522;
 padding: 0px;
 font-size: 24px;

 
}
nav ul {
 list-style: none;
 padding: 10px;
 background: none;
 display: flex;
 justify-content: center;
 gap: 20px;
 
}
nav ul li {
 color: #211522;
 font-weight: bold;
 cursor: pointer;
 transition: color 0.3s;
 font-size: large;
}
nav ul li:hover {
 color: #f39c12;
}
.blink {
 color: red;
 font-weight: bold;
 animation: blinker 1s infinite;
 text-decoration: underline;
 font-size: 18px;
}
@keyframes blinker {
 50% { opacity: 0; }
}
#section1 {
 background: none;
 margin: 20px auto;
 padding: 20px;
 width: 30%;
 box-shadow: 0px 6px 12px rgba(0,0,0,0.3);
 border-radius: 10px;
}

#section2 {
 background: none;
 margin: 20px auto;
 padding: 20px;
 width: 30%;
 box-shadow: 0px 6px 12px rgba(0,0,0,0.3);
 border-radius: 10px;
 margin-top: 20vh;
}

form {
 display: flex;
 flex-direction: column;
 align-items: center;
 background: rgba(255, 255, 255, 0.8);
 padding: 20px;
 border-radius: 10px;
 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
 width: 30%;
 margin: auto;
}
input {
 margin: 10px 0;
 padding: 12px;
 width: 80%;
 border: none;
 border-radius: 5px;
 background: rgba(236, 240, 241, 0.9);
 box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
 font-size: 16px;
}
#buttonlog {
 background: #27ae60;
 color: rgb(255, 255, 255);
 border: none;
 padding: 12px;
 width: 85%;
 cursor: pointer;
 font-size: 18px;
 border-radius: 5px;
 transition: background 0.3s;
}
#buttonlog:hover {
 background: #219150;
}

#register {
 background: transparent;
 border: none;
 outline: none;
 color: inherit;
}

#register {
 background: none;
}

h1,h6 {
 margin: 5px 0;
 padding: 0;
}

.popup {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: rgb(255, 255, 255);
 padding: 30px;
 border-radius: 10px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 z-index: 1000;
 width: 300px;
 text-align: center;
}
.popup h2 {
 margin-bottom: 15px;
 font-size: 24px;
 color: #333;
}
.popup input {
 display: block;
 width: 100%;
 margin: 10px 0;
 padding: 10px;
 border: 1px solid #cccccc;
 border-radius: 5px;
 font-size: 16px;
}
.popup button {
 background: #28a745;
 color: rgb(255, 255, 255);
 padding: 12px;
 border: none;
 cursor: pointer;
 border-radius: 5px;
 width: 100%;
 font-size: 16px;
 transition: background 0.3s ease;
}
.popup button:hover {
 background: #08f83c;
}
.popup .close {
 background: #e8081e;
 margin-top: 10px;
}
.popup .close:hover {
 background: #c82333;
}
.overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 z-index: 999;
}

        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            
            
            border-radius: 5px;
            padding: 10px;
        }
        nav ul li {
            position: relative;
            cursor: pointer;
            padding: 10px;
            transition: background 0.3s ease-in-out;
        }
        nav ul li:hover {
            background: #e9ecef;
            border-radius: 5px;
        }
        nav ul li ul {
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
            background: white;
            list-style: none;
            padding: 10px;
            margin: 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        nav ul li ul li {
            padding: 8px 12px;
            transition: background 0.3s ease-in-out;
        }
        nav ul li ul li:hover {
            background: #f1f1f1;
            border-radius: 3px;
        }
        .dropdown-arrow {
            display: inline-block;
            cursor: pointer;
            position: relative;
        }
        .dropdown-arrow::after {
            content: " ▼";
            font-size: 12px;
            color: #555;
            transition: transform 0.3s ease-in-out;
        }
        .dropdown-arrow.active::after {
            transform: rotate(180deg);
        }