@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap');

:root {
  --colors-background: #222;
  --colors-text: #f7f7ff;
  --colors-elevated: #333;
  
  --fonts-body: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI';
  
  --colors-one: #C66;
  --colors-two: #D44;
  --colors-three: #E22;
  --colors-four: #F11;

}

@keyframes wobble {
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

.header-title-avatar:hover, .mention-avatar:hover, .post-emoji:hover {
  animation: wobble 2s linear infinite;
  border-radius: 64px;
}

.post-attachment, .color-1, .color-2, .color-3, .color-4 {
  transition: all 0.2s ease-in-out;
}

.post-attachment:hover {
  transform: scale(1.05);
}

.color-1:hover {
  fill: var(--colors-two);
}

.color-2:hover {
  fill: var(--colors-three);
}

.color-3:hover {
  fill: var(--colors-four);
}