@import url('https://rsms.me/inter/inter.css');
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
    /* font-family: 'Inter', sans-serif !important; */
    font-family: 'Poppins', sans-serif !important;
}

@supports (font-variation-settings: normal) {
    html {
        /* font-family: 'Inter var', sans-serif !important;*/
        font-family: 'Poppins', sans-serif !important;
    }
}

@layer utilities {
    .navbar-list {
        @apply hover: bg-white hover:px-3 hover:rounded-md hover:peer-placeholder-shown\:scale-100 duration-300;
    }

    .width-apply {
        @apply max-w-5xl mx-auto;
    }

    .skill-image {
        @apply h-10 w-15;
    }

    .skill-title {
        @apply ml-3 text-gray-700 text-sm font-semibold;
    }
}

html {
    scroll-behavior: smooth;
}

.newtons-cradle {
    --uib-size: 50px;
    --uib-speed: 1.2s;
    --uib-color: #474554;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--uib-size);
    height: var(--uib-size);
}

.newtons-cradle__dot {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 25%;
    transform-origin: center top;
}

.newtons-cradle__dot::after {
    content: '';
    display: block;
    width: 100%;
    height: 25%;
    border-radius: 50%;
    background-color: var(--uib-color);
}

.newtons-cradle__dot:first-child {
    animation: swing var(--uib-speed) linear infinite;
}

.newtons-cradle__dot:last-child {
    animation: swing2 var(--uib-speed) linear infinite;
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }

    25% {
        transform: rotate(70deg);
        animation-timing-function: ease-in;
    }

    50% {
        transform: rotate(0deg);
        animation-timing-function: linear;
    }
}

@keyframes swing2 {
    0% {
        transform: rotate(0deg);
        animation-timing-function: linear;
    }

    50% {
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }

    75% {
        transform: rotate(-70deg);
        animation-timing-function: ease-in;
    }
}