style.css

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  background-color: #f4f4f4; /* Soft gray background */
  color: #333; /* Standard dark gray text */
}

/* Navbar Styling */
.navbar {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  background-color: #6200ea;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Slight text glow */
}

/* Sidebar Styling */
#side-menu {
  width: 80px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 16px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  border-right: 1px solid #e0e0e0; /* Light gray divider */
  z-index: 10;
}

#side-menu button {
  width: 56px;
  height: 56px;
  margin: 12px 0;
  border: none;
  border-radius: 50%; /* Circular buttons */
  background-color: #f5f5f5; /* Light gray */
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* display: flex;
  align-items: center;
  justify-content: center; */
  /* position: relative; */

}

#side-menu button:hover {
  background-color: #eeeeee;
  transform: scale(1.1); /* Subtle hover grow */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Elevated shadow */
}

#side-menu button.active {
  background-color: #7c4dff; /* Material purple */
  color: #ffffff;
  box-shadow: 0 6px 12px rgba(124, 77, 255, 0.4); /* Glow for active */
}

/* Ripple Effect */
#side-menu button::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.4);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  opacity: 0;
}

#side-menu button:active::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Tool Options */
#tool-options-container {
 max-width:400px; 
} 
/* Tool Options Container */
.tool-options {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  background: linear-gradient(145deg, #f7f7f7, #e4e4e4);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.tool-options:hover {
  transform: translateY(-5px); /* Subtle lift effect */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

/* Label Styling */
.tool-options label {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  text-transform: capitalize;
  letter-spacing: 1px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.tool-options label:hover {
  color: #ff6f61; /* Soft coral color */
  transform: translateY(-2px); /* Slight lift effect */
}

/* Input Styling */
.tool-options input {
  margin-right: 24px;
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 10px 16px;
  font-size: 1rem;
  background: #fff;
  color: #444;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tool-options input:focus {
  border-color: #4a90e2; /* Soft blue border on focus */
  outline: none;
  box-shadow: 0 0 12px rgba(74, 144, 226, 0.4); /* Soft blue glow */
  transform: translateY(-2px); /* Lift effect on focus */
}

/* Color Input Styling */
.tool-options input[type="color"] {
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.tool-options input[type="color"]:hover {
  transform: scale(1.1); /* Zoom effect on hover */
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); /* Blue glow on hover */
}

.tool-options input[type="color"]:active {
  transform: scale(0.95); /* Slight press effect */
}

.tool-options input[type="color"]::-webkit-color-swatch-wrapper {
  border-radius: 50%;
}

/* Active State of Tool Options */
.tool-options.active {
  display: flex;
}

.tool-options:not(.active) {
  display: none;
}

/* Whiteboard Canvas */
#whiteboard {
  border-radius: 12px; /* Consistent rounded corners */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
  background: #ffffff; /* White background */
  cursor: crosshair;
  width: 80vw; /* 80% of the viewport width */
  height: 80vh; 
}

/* Footer Styling */
footer {
  background-color: #6200ea; /* Material purple */
  color: #ffffff;
  text-align: center;
  padding: 12px;
  font-size: 0.9rem;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Shadow above footer */
}

footer a {
  color: #ffcc80; /* Light orange for contrast */
  text-decoration: none;
  font-weight: 500;
}

footer a:hover {
  text-decoration: underline;
}

#fullscreen-button {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #6200ea;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#fullscreen-button:hover {
  background-color: #3700b3;
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#fullscreen-button.active {
  background-color: #7c4dff;
  box-shadow: 0 6px 12px rgba(124, 77, 255, 0.4); 
}