/* Duration variables */

:root {
    --rotation-duration: 3s;
    --underline-duration: 0.6s;
    --appear-duration: 0.3s;
}

/* Underline button */

.underline-button::after {
    transition: width var(--underline-duration) ease;
}

/* Asterisk */

.asterisk {
    animation: rotation var(--rotation-duration) linear infinite;
}

@keyframes rotation {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Header subtitle */

.header-subtitle {
    transition: opacity var(--appear-duration) ease-in-out;
}

/* Menu */

.main-menu-item {
    transition: all var(--appear-duration) ease-in-out;
}

.main-menu-item img {
    transition: background-color var(--appear-duration) ease-in-out;
}

.menu-label {
    transition: opacity var(--appear-duration) ease-in-out;
}

/* Sections */

.content-section {
    transition: opacity var(--appear-duration) ease-in-out;
}

/* Back button */

#back-button {
    transition: opacity var(--appear-duration) ease-in-out;
}

/* Contact card */

.contact-card {
    transition: opacity var(--appear-duration) ease-in-out;
}

/* Link preview */

.link-preview {
    transition: opacity var(--appear-duration) ease-in-out;
}