*{font-family:Roboto,sans-serif}body{margin:0;padding:0;font-family:Roboto,sans-serif;background-color:#f7f7f7}.navbar-container{width:100%;height:55px;background-color:#f4f7fa;box-sizing:border-box;padding-left:20px;padding-right:20px;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 8px #0000001a}.navbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.logo a{color:#333;text-decoration:none;font-size:1.5rem;font-weight:700}.nav-links{list-style:none;display:flex;margin-top:8px;justify-content:center;flex-grow:1}.nav-links li{margin-left:20px}.nav-links a{color:#333;text-decoration:none;font-size:1rem;padding:8px 12px;border-radius:4px;transition:background-color .3s ease,color .3s ease}.nav-links a:hover{background-color:#108acb;color:#fff}.logout-button-container{display:flex;justify-content:flex-end;margin-top:0;width:15%}.logout-button{background-color:#f4f7fa;color:#333;font-size:14px;font-weight:500;padding:8px 18px;border:1px solid #d1d7dc;border-radius:5px;cursor:pointer;transition:all .3s ease}.logout-button:hover{background-color:#e0e0e0}.hamburger-menu{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger-menu .bar{width:25px;height:3px;background-color:#333;border-radius:5px}.nav-links{list-style:none;display:flex;justify-content:center;flex-grow:1;transition:transform .3s ease}.nav-links.active{display:block;position:absolute;top:60px;left:0;width:100%;background-color:#f4f7fa;border-top:1px solid #e0e0e0}.nav-links li{padding:10px 0;text-align:center}@media screen and (max-width: 768px){.navbar-container{height:4vh}.hamburger-menu{display:flex;position:absolute;left:50%;transform:translate(-50%)}.nav-links{display:none;width:100%;padding-left:0;margin-left:0;text-align:center}.nav-links.active{display:block;position:absolute;top:4vh;left:0;width:100%;margin-top:0;background-color:#f4f7fa;border-top:1px solid #e0e0e0}.nav-links li{padding:15px 0;margin-left:0;font-size:1.2rem}}h2{text-align:center;color:#333}.container{margin:0 auto;padding:20px;display:grid;flex-wrap:wrap;gap:20px}button{background-color:#108acb}button:hover{background-color:#097b9c}button:active{background-color:#086a84}