img#avatar {
    border-radius: 10rem;
}

span.skill {
    /* border: 1px solid; */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
    padding: 5px 10px;
    border-radius: 1rem;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

span.skill:hover {
    background-color: black;
    color: white;
}

a {
    color: #0547A9;
    text-decoration: none;
}

body {
    font-family: 'Inconsolata', monospace;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Kanit', sans-serif;
}

.card {
    overflow: hidden;
}

.card:hover span.cursor {
    background-color: black;
    color: green;
    animation: blind 1.5s infinite;
    padding: 0 2px;
    font-weight: bold;
    margin-right: -4px;
}

.slider {
    overflow: hidden;
    position: relative;
}

.slider::before,
.slider::after {
    background: linear-gradient(to right, #f8f9fa, #ffffff00);
    content: "";
    height: 100px;
    position: absolute;
    width: 25px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slider .slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14);
    gap: 15px;
}

.slider .slide img,
.slider .slide {
    height: 60px;
    width: auto;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 7));
    }
}

@keyframes blind {
    0% {
        background-color: black;
        color: green;
    }

    50% {
        background-color: black;
        color: green;
    }

    90% {
        background-color: transparent;
        color: initial;
    }
}

@media screen and (max-width: 575px) {
    img#avatar {
        width: 100px;
    }
}