.copyright-notice {
padding: 15px;
margin: 45px 0;
border-radius: 8px;
font-size: 16px;
font-family: Arial, sans-serif;
line-height: 1.5;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s ease-in-out;
max-width: 100%;
box-sizing: border-box;
background-color: #f1f1f1;
text-align:center;
border: 1px solid #666666;
color: #000000;
}
.copyright-free,
.copyright-restricted {
background-color: #f1f1f1; border: 1px solid #e6e5e5;
color: #000000;
font-weight: 500;
}
.copyright-free .attribution {
font-style: italic;
font-weight: 400;
font-size: 14px;
display: block;
margin-top: 8px;
}
.copyright-free .attribution a.copy-link {
color: #000000;
text-decoration: underline;
cursor: pointer;
position: relative;
}
.copyright-free .attribution a.copy-link:hover {
color: #333333;
}
.copyright-free .heart-emoji {
display: inline-block;
animation: pulse 1.5s ease-in-out infinite;
}
.copyright-free .copy-tooltip {
display: none;
position: absolute;
background-color: #666666;
color: #ffffff;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
top: -30px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
z-index: 10;
}
.copyright-free .copy-tooltip.active {
display: block;
animation: fadeOut 2s ease-in-out forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes fadeOut {
0% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
}
@media (max-width: 600px) {
.copyright-notice {
font-size: 14px;
padding: 12px;
}
.copyright-free .attribution {
font-size: 12px;
}
.copyright-free .copy-tooltip {
font-size: 10px;
padding: 4px 8px;
top: -25px;
}
}