:root {
  --md-admonition-icon--youtube: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"/></svg>')
}
.md-typeset .admonition.youtube,
.md-typeset details.youtube {
  border-color: rgb(255, 0, 0);
}
.md-typeset .youtube > .admonition-title,
.md-typeset .youtube > summary {
  background-color: rgba(255, 0, 0, 0.1);
}
.md-typeset .youtube > .admonition-title::before,
.md-typeset .youtube > summary::before {
  background-color: rgb(255, 0, 0);
  -webkit-mask-image: var(--md-admonition-icon--youtube);
          mask-image: var(--md-admonition-icon--youtube);
}


/* Animation */

@keyframes youtube{
  0%, 40%, 80%, 100% {
    transform: scale(1.10);
  }
  20%, 60% {
    transform: scale(1.30);
  }
}

@keyframes instagram{
  0%, 40%, 80%, 100% {
    transform: scale(1.10);
  }
  20%, 60% {
    transform: scale(1.30);
  }
}

@keyframes x-twitter{
  0%, 40%, 80%, 100% {
    transform: scale(1.10);
  }
  20%, 60% {
    transform: scale(1.30);
  }
}

.youtube {
  color: #EE0F0F;
  animation: youtube 1000ms infinite;
}

.instagram {
  color: #ee300f;
  animation: instagram 1000ms infinite;
}

.x-twitter {
  color: #ffffff;
  animation: x-twitter 1000ms infinite;
}

.md-typeset .admonition,
.md-typeset details {
  border-width: 0;
  border-left-width: 4px;
}