@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500&family=UnifrakturCook:wght@700&display=swap');


/* =====================================================
   ABIE'S WEB — GOTHIC EDITORIAL
   ===================================================== */


:root {

    --bg: #eee9df;
    --paper: #faf8f1;

    --ink: #292521;
    --muted: #756f67;

    --line: rgba(41,37,31,.22);

    --pink: #c9949a;
    --pink-dark: #82565d;

    --green: #8f9f87;
    --cream: #e7deca;

}


/* =====================================================
   BASIC
   ===================================================== */


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:

        radial-gradient(
            circle at 15% 10%,
            rgba(201,148,154,.12),
            transparent 25%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(143,159,135,.12),
            transparent 25%
        ),

        var(--bg);

    color: var(--ink);

    font-family:
        "DM Sans",
        sans-serif;

    font-weight: 300;

    font-size: 14px;

    line-height: 1.8;

    cursor: crosshair;

}


/* =====================================================
   LINKS
   ===================================================== */


a {

    color:
        var(--pink-dark);

    text-decoration:
        none;

    transition:
        opacity .25s ease;

}


a:hover {

    opacity:
        .5;

}


/* =====================================================
   SITE
   ===================================================== */


.site {

    width:
        min(1180px, calc(100% - 40px));

    margin:
        30px auto 60px;

    position:
        relative;

    z-index: 2;

}


/* =====================================================
   HEADER
   ===================================================== */


.header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        30px;

    padding:
        18px 0;

    border-bottom:
        1px solid var(--line);

    margin-bottom:
        20px;

}


.logo {

    font-family:
        "UnifrakturCook",
        serif;

    font-size:
        33px;

    font-weight:
        700;

    color:
        var(--ink);

    line-height:
        1;

}


.logo span {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        18px;

    color:
        var(--pink-dark);

}


/* =====================================================
   NAVIGATION
   ===================================================== */


nav {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        18px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

}


nav a {

    color:
        var(--ink);

    position:
        relative;

}


nav a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -5px;

    width:
        0;

    height:
        1px;

    background:
        var(--pink-dark);

    transition:
        width .25s ease;

}


nav a:hover {

    opacity:
        1;

}


nav a:hover::after {

    width:
        100%;

}


/* =====================================================
   MARQUEE
   ===================================================== */


.marquee {

    overflow:
        hidden;

    white-space:
        nowrap;

    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);

    margin-bottom:
        35px;

}


.marquee div {

    display:
        inline-block;

    padding:
        7px 0;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    animation:
        marquee 22s linear infinite;

}


@keyframes marquee {

    from {
        transform:
            translateX(100%);
    }

    to {
        transform:
            translateX(-100%);
    }

}


/* =====================================================
   MAIN LAYOUT
   ===================================================== */


.layout {

    display:
        grid;

    grid-template-columns:
        220px minmax(0, 1fr);

    gap:
        55px;

    align-items:
        start;

}


.content {

    display:
        grid;

    gap:
        35px;

}


.single {

    max-width:
        850px;

    margin:
        auto;

}


/* =====================================================
   SIDEBAR
   ===================================================== */


.sidebar {

    display:
        grid;

    gap:
        25px;

    position:
        sticky;

    top:
        25px;

}


.box {

    padding:
        0 0 20px;

    border-bottom:
        1px solid var(--line);

}


.box h3 {

    margin:
        0 0 12px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    font-weight:
        400;

}


.box p {

    margin:
        7px 0;

    font-size:
        12px;

    line-height:
        1.6;

}


.box a {

    display:
        block;

    margin:
        5px 0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        18px;

    color:
        var(--ink);

}


/* =====================================================
   PROFILE
   ===================================================== */


.avatar {

    width:
        95px;

    height:
        95px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        15px;

    background:
        var(--pink);

    border:
        1px solid var(--ink);

    border-radius:
        50%;

    font-family:
        "UnifrakturCook",
        serif;

    font-size:
        40px;

    transform:
        rotate(-5deg);

}


.profile h2 {

    margin:
        0 0 8px;

    font-family:
        "UnifrakturCook",
        serif;

    font-size:
        27px;

    line-height:
        1;

}


.online {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

    color:
        #557555;

}


/* =====================================================
   COUNTER
   ===================================================== */


.counter {

    display:
        inline-block;

    padding:
        4px 8px;

    background:
        #1c1b19;

    color:
        #b8ffb8;

    border:
        2px inset #aaa;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        10px;

    letter-spacing:
        3px;

}


.tiny {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px !important;

    color:
        var(--muted);

}


/* =====================================================
   88x31
   ===================================================== */


.button88 {

    width:
        88px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    background:
        linear-gradient(
            135deg,
            #dcb0b4,
            #bd858d
        );

    border:
        1px solid var(--ink);

    font-family:
        "DM Mono",
        monospace;

    font-size:
        7px;

    line-height:
        1;

    text-align:
        center;

}


/* =====================================================
   PAPER
   ===================================================== */


.paper {

    background:
        rgba(250,248,241,.65);

    border:
        1px solid var(--line);

    padding:
        32px;

}


/* =====================================================
   HERO
   ===================================================== */


.hero {

    min-height:
        540px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    position:
        relative;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(201,148,154,.25),
            transparent 28%
        ),

        var(--paper);

}


.hero-text {

    max-width:
        650px;

}


/* GOTHIC MAIN TITLE */


.hero h1 {

    margin:
        15px 0 28px;

    font-family:
        "UnifrakturCook",
        serif;

    font-size:
        clamp(55px, 9vw, 110px);

    font-weight:
        700;

    line-height:
        .8;

    letter-spacing:
        -2px;

}


.eyebrow {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    color:
        var(--pink-dark);

}


.hero p {

    max-width:
        500px;

    font-size:
        14px;

}


.hero p strong {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        22px;

    font-style:
        italic;

    font-weight:
        400;

}


/* =====================================================
   DOODLE
   ===================================================== */


.doodle {

    width:
        180px;

    height:
        180px;

    border:
        1px dashed var(--pink-dark);

    border-radius:
        50%;

    position:
        relative;

    transform:
        rotate(7deg);

    flex-shrink:
        0;

}


.sun {

    position:
        absolute;

    top:
        5px;

    left:
        65px;

    font-size:
        35px;

    animation:
        spin 12s linear infinite;

}


.flower {

    position:
        absolute;

    bottom:
        20px;

    left:
        20px;

    font-size:
        40px;

    animation:
        bob 3s ease-in-out infinite;

}


.heart {

    position:
        absolute;

    right:
        20px;

    bottom:
        50px;

    font-size:
        32px;

    animation:
        bob 2.5s ease-in-out infinite;

}


@keyframes spin {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes bob {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-9px);
    }

}


/* =====================================================
   SECTION TITLES
   ===================================================== */


.section-title {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        baseline;

    gap:
        20px;

    margin-bottom:
        20px;

    padding-bottom:
        10px;

    border-bottom:
        1px solid var(--line);

}


.section-title h2 {

    margin:
        0;

    font-family:
        "UnifrakturCook",
        serif;

    font-size:
        32px;

    font-weight:
        700;

    line-height:
        1;

}


.section-title span {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    color:
        var(--muted);

}


/* =====================================================
   POSTS
   ===================================================== */


.post {

    display:
        grid;

    grid-template-columns:
        90px 1fr;

    gap:
        20px;

    padding:
        17px 0;

    border-bottom:
        1px solid var(--line);

}


.post:last-child {

    border-bottom:
        none;

}


.post h3 {

    margin:
        0 0 5px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        25px;

    font-weight:
        500;

    line-height:
        1.1;

}


.date {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

    color:
        var(--pink-dark);

}


/* =====================================================
   TWO COLUMNS
   ===================================================== */


.two-columns {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        35px;

}


/* =====================================================
   MICROBLOG
   ===================================================== */


.status {

    padding:
        11px 0;

    border-bottom:
        1px dashed var(--line);

}


.status strong {

    display:
        block;

    margin-bottom:
        3px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

    color:
        var(--pink-dark);

}


/* =====================================================
   BUTTONS
   ===================================================== */


.little-button,
.submit {

    padding:
        7px 12px;

    border:
        1px solid var(--ink);

    background:
        transparent;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

    cursor:
        pointer;

}


.little-button:hover,
.submit:hover {

    background:
        var(--cream);

    opacity:
        1;

}


/* =====================================================
   GALLERY
   ===================================================== */


.mini-gallery,
.big-gallery {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        15px;

}


.mini-gallery img,
.big-gallery img {

    width:
        100%;

    aspect-ratio:
        1;

    object-fit:
        cover;

    border:
        1px solid var(--ink);

    cursor:
        pointer;

    transition:
        transform .3s ease;

}


.mini-gallery img:nth-child(2),
.mini-gallery img:nth-child(5),

.big-gallery img:nth-child(2),
.big-gallery img:nth-child(5) {

    transform:
        translateY(12px)
        rotate(1deg);

}


.mini-gallery img:hover,
.big-gallery img:hover {

    transform:
        scale(1.04)
        rotate(0);

}


/* =====================================================
   WEBRING
   ===================================================== */


.webring {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        18px;

    border:
        1px dashed var(--line);

    text-align:
        center;

}


.webring button {

    border:
        1px solid var(--ink);

    background:
        transparent;

    padding:
        5px 9px;

    cursor:
        pointer;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

}


/* =====================================================
   BUTTON WALL
   ===================================================== */


.button-wall {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.tiny-button {

    width:
        88px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid var(--ink);

    background:
        var(--green);

    font-family:
        "DM Mono",
        monospace;

    font-size:
        7px;

    line-height:
        1;

    text-align:
        center;

}


/* =====================================================
   MAP
   ===================================================== */


.map {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        8px;

}


.map a {

    padding:
        13px;

    border:
        1px solid var(--line);

    font-family:
        "UnifrakturCook",
        serif;

    font-size:
        20px;

    text-align:
        center;

    color:
        var(--ink);

}


.map a:hover {

    background:
        rgba(201,148,154,.16);

    opacity:
        1;

}


/* =====================================================
   ABOUT
   ===================================================== */


.about-grid {

    display:
        grid;

    grid-template-columns:
        190px 1fr;

    gap:
        30px;

    align-items:
        center;

}


.portrait {

    height:
        240px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--pink);

    border:
        1px solid var(--ink);

    font-family:
        "UnifrakturCook",
        serif;

    font-size:
        80px;

}


.likes {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        8px;

}


.likes div {

    padding:
        12px;

    border-bottom:
        1px solid var(--line);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        19px;

}


/* =====================================================
   BLOG
   ===================================================== */


.long-post {

    padding:
        15px 0 30px;

}


.long-post h1 {

    margin:
        10px 0 20px;

    font-family:
        "UnifrakturCook",
        serif;

    font-size:
        48px;

    line-height:
        .9;

}


hr {

    border:
        none;

    border-top:
        1px solid var(--line);

    margin:
        25px 0;

}


/* =====================================================
   MUSIC
   ===================================================== */


.music-player {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    padding:
        25px;

    border:
        1px dashed var(--line);

}


.record {

    width:
        140px;

    height:
        140px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        repeating-radial-gradient(
            circle,
            #242321 0px,
            #242321 2px,
            #30302d 3px,
            #242321 5px
        );

    color:
        white;

    font-size:
        35px;

    border:
        8px solid #111;

    animation:
        record 5s linear infinite;

}


.record.paused {

    animation-play-state:
        paused;

}


@keyframes record {

    to {
        transform:
            rotate(360deg);
    }

}


.music-info h2 {

    margin:
        0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        32px;

}


.music-progress {

    height:
        4px;

    margin:
        20px 0 12px;

    background:
        #ddd6c8;

}


.music-progress div {

    width:
        35%;

    height:
        100%;

    background:
        var(--pink-dark);

}


.music-controls {

    display:
        flex;

    gap:
        5px;

}


.music-controls button {

    width:
        35px;

    height:
        30px;

    border:
        1px solid var(--ink);

    background:
        transparent;

    cursor:
        pointer;

}


/* =====================================================
   LINKS
   ===================================================== */


.link-card {

    display:
        flex;

    gap:
        20px;

    padding:
        18px 0;

    border-bottom:
        1px solid var(--line);

}


.link-card > span {

    font-family:
        "DM Mono",
        monospace;

    font-size:
        9px;

    color:
        var(--pink-dark);

}


.link-card h3 {

    margin:
        0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        26px;

    font-weight:
        400;

}


/* =====================================================
   GUESTBOOK
   ===================================================== */


label {

    display:
        block;

    margin-top:
        15px;

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

}


input,
textarea {

    width:
        100%;

    margin-top:
        5px;

    padding:
        10px;

    background:
        rgba(255,255,255,.45);

    border:
        1px solid var(--line);

    outline:
        none;

    font-family:
        "DM Sans",
        sans-serif;

}


textarea {

    min-height:
        130px;

    resize:
        vertical;

}


.guest-message {

    padding:
        15px;

    margin:
        12px 0;

    border:
        1px dashed var(--line);

}


.guest-message strong {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        20px;

}


/* =====================================================
   LIGHTBOX
   ===================================================== */


#lightbox {

    position:
        fixed;

    inset:
        0;

    display:
        none;

    place-items:
        center;

    padding:
        30px;

    background:
        rgba(20,18,15,.88);

    z-index:
        100;

}


#lightbox.show {

    display:
        grid;

}


#lightbox-image {

    max-width:
        90vw;

    max-height:
        90vh;

    border:
        4px solid white;

}


/* =====================================================
   FLOATING DECORATIONS
   ===================================================== */


.star {

    position:
        fixed;

    z-index:
        1;

    pointer-events:
        none;

    font-size:
        12px;

    opacity:
        0;

    animation:
        floatStar linear forwards;

}


@keyframes floatStar {

    0% {

        opacity:
            0;

        transform:
            translateY(20px)
            rotate(0deg);

    }

    20% {

        opacity:
            .7;

    }

    100% {

        opacity:
            0;

        transform:
            translateY(-120px)
            rotate(180deg);

    }

}


/* =====================================================
   FOOTER
   ===================================================== */


footer {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        45px;

    padding:
        15px 0;

    border-top:
        1px solid var(--line);

    font-family:
        "DM Mono",
        monospace;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;

    color:
        var(--muted);

}


/* =====================================================
   TABLET
   ===================================================== */


@media (max-width:850px) {


    .site {

        width:
            calc(100% - 25px);

    }


    .header {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    nav {

        justify-content:
            flex-start;

    }


    .layout {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .sidebar {

        position:
            static;

        display:
            grid;

        grid-template-columns:
            repeat(2,1fr);

    }


    .doodle {

        display:
            none;

    }


    .two-columns {

        grid-template-columns:
            1fr;

    }


    .about-grid {

        grid-template-columns:
            1fr;

    }

}


/* =====================================================
   PHONE
   ===================================================== */


@media (max-width:550px) {


    body {

        font-size:
            13px;

    }


    .site {

        width:
            calc(100% - 18px);

        margin-top:
            15px;

    }


    .sidebar {

        grid-template-columns:
            1fr;

    }


    .paper {

        padding:
            20px;

    }


    .hero {

        min-height:
            450px;

        padding:
            25px;

    }


    .hero h1 {

        font-size:
            70px;

    }


    .section-title {

        flex-direction:
            column;

        gap:
            5px;

    }


    .post {

        grid-template-columns:
            1fr;

        gap:
            3px;

    }


    .mini-gallery,
    .big-gallery {

        grid-template-columns:
            repeat(2,1fr);

    }


    .likes {

        grid-template-columns:
            repeat(2,1fr);

    }


    .map {

        grid-template-columns:
            repeat(2,1fr);

    }


    .music-player {

        flex-direction:
            column;

    }


    .record {

        margin:
            auto;

    }


    footer {

        flex-direction:
            column;

    }

}