@font-face {
  font-family: "chinese rocks";
  src: url("/fonts/chinese_rocks_rg.otf") format("opentype");
}

@font-face {
  font-family: "FeFCrm2";
  src: url("/fonts/FeFCrm2.ttf") format("truetype");
}

@import url(https://fonts.bunny.net/css?family=amiri:400);
@import url(https://fonts.bunny.net/css?family=im-fell-double-pica:400);
@import url(https://fonts.bunny.net/css?family=im-fell-dw-pica-sc:400);
@import url(https://fonts.bunny.net/css?family=im-fell-dw-pica:400);



:root {
    --pink: oklch(0.7294 0.2689 339.88);
    --pink: #FA4B84;
    --blue: #49CDD9;
    --yellow: #FAD143;
    /*--pink: #ff4bda;*/
}


body {
    --bg: #F5EFE1;

    background:
        linear-gradient(-90deg, rgba(0,0,0,.05) 1px, var(--bg) 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, var(--bg) 1px),
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, var(--bg) 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, var(--bg) 1px),
        linear-gradient(var(--bg) 3px, #f2f2f2 3px, #f2f2f2 78px, var(--bg) 78px),
        linear-gradient(-90deg, #aaa 1px, var(--bg) 1px),
        linear-gradient(-90deg, var(--bg) 3px, #f2f2f2 3px, #f2f2f2 78px, var(--bg) 78px),
        linear-gradient(#aaa 1px, var(--bg) 1px),
        #f2f2f2;
    background-size:
        4px 4px,
        4px 4px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px;

        font-family: 'FeFCrm2', serif;
        font-size: 13px;
        /*font-family: 'IM Fell Double Pica', serif;
        font-family: 'IM Fell DW Pica SC', serif;*/
        /*font-family: 'IM Fell DW Pica', serif;*/
}

header {
    h1 {
        position: relative;
        color: var(--blue);
        font-family: 'chinese rocks';
        font-size: 52px;
        margin: 24px 0 0 0;
    }

    h1::after {
        --shadow-color: var(--pink);
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, transparent 45%, var(--shadow-color) 45%, var(--shadow-color) 55%,transparent 0);
        /*animation: 15s linear infinite line-shadow;*/
        background-size: 3px 3px;
        background-clip: text;
        left: 0.08em;
        top: 0.08em;
        content: 'hangyas.me';
        color: transparent;
        position: absolute;
        z-index: -1;
    }

    .subtitle {
        margin-bottom: 24px;
    }
}

nav, #design {
    .title {
        font-family: 'chinese rocks';
        letter-spacing: 0.15rem;
        font-weight: normal;
        font-size: 24px;
    }

    .separator {
        display: none;
    }

    a {
        color: var(--pink);
        padding: 2px 10px;
        text-shadow: 3px 2px 0px var(--yellow);
        text-decoration: none;
        display: inline-block;
        position: relative;
        font-family: 'chinese rocks';
        letter-spacing: 0.12em;
        font-weight: normal;
        font-size: 24px;
        margin-bottom: 8px;
    }

    a::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: skew(10deg);
      z-index: -1;

      background: var(--blue);
      background-image: radial-gradient(var(--yellow) 1px, transparent 0);
      background-size: 7px 7px;
      background-position: 0px 0px;
    }

    a.disabled, a.disabled::before, a.disabled:hover {
        filter: grayscale();
        cursor: not-allowed;
        text-decoration: none;
    }


    a:hover {
        text-decoration: underline;
    }
}

name-card {
    background: var(--pink);
    color: var(--yellow);
    border: 4px dashed var(--yellow);
    display: block;
    padding: 8px;

    p {
        margin: 0;
    }

    p:first-child {
        font-size: 24px;
        margin: 8px 0;
    }

    a {
        color: var(--yellow);
    }
}

section#publications {
    p {
        border: 1px rgba(0, 0, 0, 50%) solid;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        padding: 8px 8px 12px 8px;
        background: linear-gradient(to bottom, white 70%, transparent);
        box-shadow: -3px -5px 0 0 rgba(0, 0, 0, 20%);
        transition: box-shadow 0.1s, transform 0.1s;
    }

    p:hover {
        box-shadow: 0px 0px 0 0 rgba(0, 0, 0, 20%);
        transform: translate(-3px, -5px);
    }
}

section#blog {
    li {
        background: var(--blue);
        width: fit-content;
        padding: 8px;
        margin-bottom: 14px;
        color: white;
        list-style-position: inside;
        box-shadow: 3px 5px 0 0 var(--yellow);
        border: 2px solid color-mix(in oklab, var(--blue) 80%, black);
        transition: box-shadow 0.1s;

        a {
            color: white;
        }
    }

    li:hover {
        box-shadow: 1px 2px 0 0 var(--yellow);
    }
}

footer {
    border-top: 1px dashed black;
    margin-top: 48px;
}

#ai-stamp {
    border: 1px solid black;
    border-radius: 18px 0;
    padding: 4px 16px;
    display: inline-block;
    background: white;
    margin-top: 16px;
}

code {
    background: white;
    color: var(--pink);
    margin: 0 3px;
}

pre {
    background: white;
    padding: 2px 4px;
}