:root {
    --primary: #00803e;
    --primary-light: #28a73033;
    --primary-dark: #0e220f;
    --hover: #acacac;
}

::selection {
    background: var(--primary);
    color: white;
}

::-webkit-scrollbar {
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--primary-light);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border: 4px solid transparent;
    border-radius: 20rem;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
    border: 4px solid transparent;
    border-radius: 20rem;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: var(--hover);
    border: 4px solid transparent;
    border-radius: 20rem;
    background-clip: padding-box;
}

@font-face {
    font-family: "Ilicitan Airlines";
    src: url("../fonts/ilicitan-airlines.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body, .md-typeset {
    font-family: "Ilicitan Airlines", sans-serif;
}

[data-md-color-scheme="default"] .md-header .md-logo img {
    content: url("../images/logos/logo-light.svg");
}

[data-md-color-scheme="slate"] .md-header .md-logo img {
    content: url("../images/logos/logo-dark.svg");
}

h1 {
    font-size: 2rem !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

.md-content .md-path {
    padding: 0 !important;
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
    color: var(--primary) !important;
}

.md-nav--secondary .md-nav__link[href]:hover {
    color: var(--primary) !important;
}

[data-md-color-scheme="default"] .md-nav--primary .md-nav__item .md-nav__link--active {
    background: var(--primary-light) !important;
}

[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item .md-nav__link--active {
    color: var(--primary) !important;
    background: var(--primary-dark) !important;
    font-weight: bold !important;
}

.md-tabs__item--active {
    color: var(--primary) !important;
    font-weight: bold !important;
    border-bottom: 3px solid var(--primary) !important;
}

.md-tabs__item:hover {
    border-bottom: 3px solid var(--hover);
}

.md-tabs__item {
    padding: 0 !important;
}

.md-tabs__item > a {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0 0.6rem !important;
}

.md-tabs__item > a:hover {
    border-bottom: 3px solid var(--hover);
}

.theme-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.theme-banner .banner-dark {
    display: none;
}

[data-md-color-scheme="slate"] .theme-banner .banner-light {
    display: none;
}

[data-md-color-scheme="slate"] .theme-banner .banner-dark {
    display: block;
}

.md-footer {
    border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-footer-meta {
    background: var(--md-default-bg-color);
}

.md-footer-meta__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.2rem 1.5rem;
}

.md-footer-copyright {
    color: var(--md-default-fg-color--light);
    font-size: 0.8rem;
}

.md-footer-social {
    display: flex;
    gap: 0.5rem;
}

.md-footer-social__link {
    color: var(--md-default-fg-color--light);
    transition: color 0.2s ease, transform 0.2s ease;
}

.md-footer-social__link:hover {
    color: var(--primary);
    transform: translateY(-2px);
}

.md-copyright a[href="https://zensical.org/"] {
    display: none !important;
}

.md-copyright {
    color: var(--md-default-bg-color);
}

.md-social__link:hover svg {
    color: var(--primary) !important;
}

.md-sidebar__scrollwrap:hover {
    scrollbar-color: var(--primary) #000000 !important;
}

.md-top:hover {
    background: var(--primary) !important;
}

.md-content__inner a {
    color: var(--primary) !important;
}

.md-typeset a:hover {
    color: var(--hover) !important;
}

.twemoji svg {
    fill: var(--primary) !important;
}

.tech-content {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.tech-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    transition: all 0.3s;
    cursor: pointer;
}

.tech-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: inherit;
    background: var(--tech-color);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.tech-card img {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

.tech-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 5px;
}

.tech-info span {
    font-family: "Fira Code", "Google Sans Code", system-ui;
    line-height: 1.2;
    font-size: 0.6rem;
    font-weight: bold;
    background: var(--tech-color);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.angular {
    --tech-color: linear-gradient(90deg, #f5094e, #ff31d4, #9c19ed);
}

.kotlin {
    --tech-color: linear-gradient(90deg, #8f43f8, #d8318e);
}

.typescript {
    --tech-color: #2f74c0;
}

.spring {
    --tech-color: #6DB33F;
}

.mariadb {
    --tech-color: #00779b;
}

.java {
    --tech-color: linear-gradient(90deg, #ea2d2e 0 50%, #0074bd 50% 100%);
}

.maven {
    --tech-color: linear-gradient(90deg, #f69921 0 20%, #d43433 20% 40%, #bc2046 40% 60%, #a91e5f 60% 80%, #782c84 80% 100%);
}

.junit {
    --tech-color: linear-gradient(90deg, #dc514a 0 50%, #23a161 50% 100%);;
}

.git {
    --tech-color: #F05032;
}

.github {
    --tech-color: linear-gradient(90deg, #6e6e6e, #8d8d8d);;
}

.sass {
    --tech-color: #cf649b;
}

.html {
    --tech-color: linear-gradient(90deg, #dd4b25, #e96228);
}

.intellij {
    --tech-color: linear-gradient(90deg, #fc7723, #fe2857, #007eff);
}

.webstorm {
    --tech-color: linear-gradient(90deg, #3097ff, #e8e417);
}

.androidstudio {
    --tech-color: linear-gradient(90deg, #3ddc84 0 50%, #4285f4 50% 100%);
}

.vscode {
    --tech-color: linear-gradient(90deg, #24aef3, #0089d2);
}

.compose {
    --tech-color: linear-gradient(90deg, #3ddc84 0 33%, #4285f4 33% 66%, #083042 66% 100%);
}

.figma {
    --tech-color: linear-gradient(90deg, #f24e1e 0 20%, #ff7262 20% 40%, #a259ff 40% 60%, #1abcfe 60% 80%, #0acf83 80% 100%);
}