.card .d1441skb {
    --border-color: transparent;
    --bg-color: transparent;
    --drop-color: transparent;
    --bg-img: url();
    --drop-x: 0;
    --drop-y: 0;
    --rot-x: 0;
    --rot-y: 0;
    background:linear-gradient(90deg, var(--main) 0%, var(--main) 60%, var(--main-60) 100%), no-repeat right 40%/40% var(--bg-img)
}

.card-bg-img .d1441skb:hover {
    background-color: var(--bg-color);
    background-image:radial-gradient(circle at var(--drop-x) var(--drop-y), var(--drop-color), transparent)
}

.card .d1441skb:hover {
    transform: perspective(1000px) rotateX(var(--rot-x)) rotateY(var(--rot-y)) scale(1.01);
    border-color: var(--border-hover)
}

.card-link .d18qy750:hover {
    border-color:var(--border-hover)
}

.card-link .d18qy750:hover:after {
    content: attr(data-help);
    display: inline-block;
    position: absolute;
    width: max-content;
    background-color: var(--secondary);
    padding: 5px 10px;
    right: 40%;
    top: calc(100% + 5px);
    border: 1px solid var(--border);
    border-radius: 15px;
    z-index:10
}

.projects-list .df4z73x {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px
}

@media (max-width: 1350px) {
    .projects-list .df4z73x {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 850px) {
    .projects-list .df4z73x {
        grid-template-columns: repeat(1, 1fr)
    }
}


.screenshot .o4z7e5 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    transition:background-size .2s
}

.screenshot .o4z7e5:hover {
    background-size: 120%
}

code[class * =language-], pre[class * =language-] {
    color: #ccc;
    background: none;
    font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
    font-size: 1em;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens:none
}

pre[class * =language-] {
    padding: 1em;
    margin: .5em 0;
    overflow:auto
}

:not(pre) > code[class * =language-], pre[class * =language-] {
    background:#2d2d2d
}

:not(pre) > code[class * =language-] {
    padding: .1em;
    border-radius: .3em;
    white-space:normal
}

.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata {
    color:#999
}

.token.punctuation {
    color:#ccc
}

.token.tag, .token.attr-name, .token.namespace, .token.deleted {
    color:#e2777a
}

.token.function-name {
    color:#6196cc
}

.token.boolean, .token.number, .token.function {
    color:#f08d49
}

.token.property, .token.class-name, .token.constant, .token.symbol {
    color:#f8c555
}

.token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin {
    color:#cc99cd
}

.token.string, .token.char, .token.attr-value, .token.regex, .token.variable {
    color:#7ec699
}

.token.operator, .token.entity, .token.url {
    color:#67cdcc
}

.token.important, .token.bold {
    font-weight:700
}

.token.italic {
    font-style:italic
}

.token.entity {
    cursor:help
}

.token.inserted {
    color:green
}

.skill-cover .d1lxhlqn {
    background: linear-gradient(90deg, var(--main) 0%, var(--main) 55%, var(--main-60) 130%), no-repeat 110% 45%/50% var(--bg-img);
    border-block-end: 1px solid var(--border)
}