body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #000000dc;
  color: #e9e9e9;
  line-height: 1.6;
  padding: 20px;
}

h1 {
  color: #ffffff;
}
button {
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #444;
  background-color: #222;
  color: #fff;
}

body.light-mode {
  background-color: #f9f9f9;
  color: #121212;
}

body.light-mode a {
  color: #0066cc;
}
body.light-mode button {
  background-color: #eee;
  color: #000; 
  border: 1px solid #ccc;
}
body.light-mode h1 {
  color: #000;
}

.menu-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.fab-button {
  width: 50 px;
  height: 50 px;
  border-radius: 50%;
  background-color: #222222;
  color: #ffff;
  font-size: 20 px;
  cursor: pointer; 
  border: 1px solid #444;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

body.light-mode .fab-button {
  background-color: #eee;
  color: #000;
  border: 1px solid #ccc;
  
}
.pop-up-menu {
  display: none;
  background-color: #1e1e1e;
  border: 1px solid #444;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  text-align: center;
}

body.light-mode .pop-up-menu {
  background-color: #ffffff;
  border: 1 px solid #ccc;
  box-shadow: 0 4px 15px rgba(0,0,0,,0.1);
}

.pop-up-menu.show {
  display: block;
}