html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #f3f4f6;
}

a {
    transition: opacity 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}

a:hover {
    opacity: 0.8;

    .icon {
        opacity: 0.8;
    }
}

.page {
    position: relative;
}

.page::after {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='671' height='656' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.02' d='M476.815 51.526C538.226 7.562 664.614-5.331 669.903 2.163c5.285 7.494-7.957 109.514-52.239 184.046-10.645 17.917-18.317 30.309-33.788 44.289-19.103 17.261-24.137 20.625-45.928 29.415-50.873 20.521-111.776 26.517-140.541 28.256l.525.544-109.116 105.051c20.44-15.346 42.927-30.187 63.655-39.442 44.749-19.981 52.923-15.624 101.738-11.73 75.288 6.007 180.197 77.669 179.402 86.805-.797 9.138-76.712 78.563-158.62 106.964-19.69 6.828-33.545 11.35-54.386 12.057-25.731.871-31.748.197-54.07-7.139-70.963-23.32-138.774-79.215-138.774-79.215l-4.038-5.634L85.534 589.472c17.743-12.785 36.537-24.651 54.073-32.512 44.721-20.046 52.902-15.699 101.722-11.876 75.295 5.898 180.303 77.402 179.528 86.542-.253 2.954-8.351 12.22-21.958 24.374H0V246.893c14.362-15.334 25.52-24.584 28.41-23.861 8.898 2.227 65.493 88.132 80.634 173.492 3.64 20.52 5.922 34.915 3.336 55.607-3.193 25.547-4.809 31.383-15.57 52.27-13.099 25.424-30.842 49.638-47.75 69.843l148.466-142.938c-3.202-4.563-59.278-84.992-75.482-145.486-12.68-47.338-7.089-54.724 4.449-102.316 17.794-73.4 105.09-165.706 113.987-163.482 8.897 2.225 65.495 88.131 80.636 173.492 3.64 20.521 5.923 34.916 3.336 55.607-3.193 25.547-4.808 31.382-15.569 52.269-11.899 23.095-27.632 45.19-43.088 64.19l105.618-101.683c4.535-33.14 15.269-96.497 35.213-137.794 21.314-44.13 30.371-46.072 70.189-74.578Z'/%3E%3C/svg%3E");
    background-size: min(100vw, 41.9375rem);
    width: min(100vw, 41.9375rem);
    height: min(97.8vw, 41rem);
    z-index: -1;
}

.header {
    position: relative;
}

.header::before {
    content: "";
    position: absolute;
    top: 0;
    height: 9.375rem;
    left: 0;
    right: 0;
    background-color: gold;
    z-index: -1;
}

.skill {
    border-radius: 4px;
    border: 1px solid gold;
    padding: 2px 6px;
    margin: 2px 2px;
    font-size: 0.875rem;
    line-height: 2;
    color: rgba(0, 0, 0, 0.6);
}

.icon {
    display: block;
    transition: opacity 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}

.icon-github {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-github' %3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8' /%3E%3C/svg%3E");
    width: 1rem;
    height: 1rem;
}

.icon-github-large {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%23000' d='M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.012 10.012 0 0 0 20 10c0-5.525-4.475-10-10-10Z'/%3E%3C/svg%3E");
    width: 1.25rem;
    height: 1.25rem;
}

.icon-pin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%23000' d='M10 20s7.5-7.107 7.5-12.5a7.5 7.5 0 0 0-15 0C2.5 12.893 10 20 10 20Zm0-8.75a3.75 3.75 0 1 1 0-7.5 3.75 3.75 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
    width: 1.25rem;
    height: 1.25rem;
}

.icon-linkedin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23000' d='M0 1.433C0 .64.657 0 1.469 0H18.53C19.343 0 20 .641 20 1.433v17.134C20 19.36 19.343 20 18.531 20H1.47C.657 20 0 19.359 0 18.567V1.433Zm6.179 15.31V7.71H3.177v9.031H6.18Zm-1.5-10.265c1.046 0 1.697-.693 1.697-1.56-.019-.887-.65-1.56-1.677-1.56C3.67 3.357 3 4.032 3 4.918c0 .867.651 1.56 1.659 1.56h.02Zm6.135 10.264V11.7c0-.27.02-.54.1-.733.216-.538.71-1.097 1.54-1.097 1.086 0 1.52.827 1.52 2.042v4.832h3.001v-5.18c0-2.776-1.48-4.066-3.455-4.066-1.592 0-2.306.876-2.706 1.492v.031h-.02l.02-.031V7.71h-3c.037.848 0 9.031 0 9.031h3Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    width: 1.25rem;
    height: 1.25rem;
}

.icon-devpost {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='20' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m0 9.992 5.738 9.983h11.467l5.738-9.983L17.205 0H5.738L0 9.992Zm7.26 6.057h3.602c3.102 0 6.171-1.794 6.171-6.057 0-4.436-2.554-6.066-6-6.066H7.26v12.123Zm2.407-9.77h1.276c2.554 0 3.61 1.235 3.602 3.705 0 2.222-1.162 3.711-3.692 3.711H9.667V6.28Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h23v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    width: 1.4375rem;
    height: 1.25rem;
}

.icon-globe {
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-globe2' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855q-.215.403-.395.872c.705.157 1.472.257 2.282.287zM4.249 3.539q.214-.577.481-1.078a7 7 0 0 1 .597-.933A7 7 0 0 0 3.051 3.05q.544.277 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9 9 0 0 1-1.565-.667A6.96 6.96 0 0 0 1.018 7.5zm1.4-2.741a12.3 12.3 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332M8.5 5.09V7.5h2.99a12.3 12.3 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.6 13.6 0 0 1 7.5 10.91V8.5zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741zm-3.282 3.696q.18.469.395.872c.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a7 7 0 0 1-.598-.933 9 9 0 0 1-.481-1.079 8.4 8.4 0 0 0-1.198.49 7 7 0 0 0 2.276 1.522zm-1.383-2.964A13.4 13.4 0 0 1 3.508 8.5h-2.49a6.96 6.96 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667m6.728 2.964a7 7 0 0 0 2.275-1.521 8.4 8.4 0 0 0-1.197-.49 9 9 0 0 1-.481 1.078 7 7 0 0 1-.597.933M8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855q.216-.403.395-.872A12.6 12.6 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.96 6.96 0 0 0 14.982 8.5h-2.49a13.4 13.4 0 0 1-.437 3.008M14.982 7.5a6.96 6.96 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008zM11.27 2.461q.266.502.482 1.078a8.4 8.4 0 0 0 1.196-.49 7 7 0 0 0-2.275-1.52c.218.283.418.597.597.932m-.488 1.343a8 8 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z'/%3E%3C/svg%3E");
}

.project-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    /* padding: 1rem; */
    background-color: #fff;
}

.project-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
}

.project-card__footer {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid oklch(96.7% 0.003 264.542);
}

.project-card__title {
    font-size: 2rem;
    font-weight: bold;
}