.notepad{
     width: 80px;
     height: 80px;
     z-index: 3;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     left: 1400px;
     top:500px;
     margin: 20px;
     background-color: white;
     border-radius: 10px;
     padding: 4px;
     color: black;
     cursor: pointer;
     transition: transform 0.3s ease, background-color 0.3s ease;
}
.notepad:hover{
     transform:translateY(-5px);
     background-color:white;
}

.note-icon{
    object-fit:cover;
    width:100%;
    height:100%;
}

.notepad-panel {
     opacity: 0;
     visibility: hidden;
     width: 400px;
     min-height: 480px;
     z-index: 999;
     position: fixed;
     top: 80px;
     left: 40px;
     background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
     box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
     border-radius: 18px;
     padding: 16px;
     color: #333;
     transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
     display: flex;
     flex-direction: column;
     gap: 12px;
     transform: translateY(-12px);
     pointer-events: none;
     touch-action: none;
}

.notepad-panel.open {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
     pointer-events: auto;
}

.notepad-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-weight: 600;
     font-size: 16px;
     padding-bottom: 12px;
     border-bottom: 2px solid #e0e0e0;
     cursor: grab;
     user-select: none;
}

.notepad-header:active {
     cursor: grabbing;
}

.notepad-header button {
     background: none;
     border: none;
     font-size: 24px;
     cursor: pointer;
     color: #666;
     padding: 0;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 6px;
     transition: background-color 0.2s ease;
}

.notepad-header button:hover {
     background-color: #f0f0f0;
     color: #333;
}

.notepad-window {
     display: flex;
     flex-direction: column;
     gap: 12px;
     width: 100%;
     flex: 1;
}

#note-textarea {
     flex: 1;
     padding: 12px;
     border: 1px solid #ddd;
     border-radius: 8px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 14px;
     resize: none;
     color: #333;
     background-color: #fafafa;
     transition: border-color 0.2s ease, background-color 0.2s ease;
}

#note-textarea:focus {
     outline: none;
     border-color: #4CAF50;
     background-color: #fff;
     box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

#note-textarea::placeholder {
     color: #999;
}

#save-note {
     padding: 10px 16px;
     background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
     color: white;
     border: none;
     border-radius: 8px;
     font-weight: 600;
     cursor: pointer;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#save-note:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
}

#save-note:active {
     transform: translateY(0);
}

#note-bigbox { display: block; }
#note-bigbox.hidden { visibility: hidden; opacity: 0; }