/* =========================================================
   VARIABLES
========================================================= */

:root {

    --pink-1: #fff5fa;
    --pink-2: #ffe3f1;
    --pink-3: #ffc7e3;
    --pink-4: #f2a9d0;

    --purple: #d7c1ef;

    --text: #654359;
    --text-soft: #896b7e;

    --white: rgba(255, 255, 255, .88);

    --shadow:
        0 15px 40px rgba(111, 65, 100, .15);

    --shadow-small:
        0 5px 15px rgba(111, 65, 100, .12);

}


/* =========================================================
   RESET
========================================================= */

/* =========================================================
   PROJECTS / SOFTWARE ARCHIVE
========================================================= */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.project-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.65), rgba(255, 220, 240, 0.45));
    box-shadow: var(--shadow-small);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(110, 70, 100, 0.15);
}

.project-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.project-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 1);
}

.project-title-box h3 {
    font-size: 16px;
    color: var(--text);
    font-family: Georgia, serif;
}

.project-preview {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.9);
    margin: 12px 0;
    background: rgba(255, 255, 255, 0.3);
}

.project-description {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-soft);
    margin-bottom: 14px;
}

.project-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.6);
}

.download-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 8px 14px;
}

.file-size {
    font-size: 10px;
    opacity: 0.55;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    font-family:
        "Trebuchet MS",
        "Segoe UI",
        sans-serif;

    color: var(--text);

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(255,255,255,.95),
            transparent 25%
        ),

        radial-gradient(
            circle at 90% 5%,
            rgba(255,185,221,.55),
            transparent 30%
        ),

        radial-gradient(
            circle at 70% 90%,
            rgba(211,187,245,.45),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #ffeef7,
            #fbd9eb 45%,
            #e9ddf8
        );

    background-attachment: fixed;

    overflow-x: hidden;

}


button,
a {

    font: inherit;

}


button {

    color: inherit;

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   BACKGROUND
========================================================= */

.background-glow {

    position: fixed;

    width: 500px;
    height: 500px;

    left: -200px;
    top: -200px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.9),
            transparent 70%
        );

    pointer-events: none;

    z-index: -2;

}


body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    opacity: .2;

    background-image:

        radial-gradient(
            rgba(255,255,255,.9) 1px,
            transparent 1px
        );

    background-size: 24px 24px;

    z-index: -1;

}


/* =========================================================
   SPARKLES
========================================================= */

.sparkles span {

    position: fixed;

    color: white;

    text-shadow:
        0 0 5px white,
        0 0 15px #ff8bc8;

    pointer-events: none;

    animation:
        floating 5s ease-in-out infinite;

    z-index: -1;

}


.sparkles span:nth-child(1) {
    left: 8%;
    top: 18%;
}


.sparkles span:nth-child(2) {
    left: 30%;
    top: 80%;

    animation-delay: 1s;
}


.sparkles span:nth-child(3) {
    right: 6%;
    top: 30%;

    animation-delay: 2s;
}


.sparkles span:nth-child(4) {
    right: 20%;
    bottom: 12%;

    animation-delay: 3s;
}


.sparkles span:nth-child(5) {
    left: 55%;
    top: 12%;

    animation-delay: 1.5s;
}


@keyframes floating {

    0%,
    100% {

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

        opacity: .4;

    }

    50% {

        transform:
            translateY(-20px)
            rotate(15deg);

        opacity: 1;

    }

}


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

.site-wrapper {

    width:
        min(1400px, 94%);

    margin:
        30px auto;

    display: grid;

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

    gap: 20px;

}


/* =========================================================
   AERO WINDOWS
========================================================= */

.aero-window {

    border:
        1px solid
        rgba(255,255,255,.9);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.82),
            rgba(255,225,242,.65)
        );

    box-shadow:

        var(--shadow),

        inset
        0 1px 0
        rgba(255,255,255,1),

        inset
        0 -1px 0
        rgba(255,255,255,.5);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    border-radius: 22px;

}


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

.sidebar {

    height: fit-content;

    padding: 17px;

    position: sticky;

    top: 20px;

}


/* =========================================================
   LOGO
========================================================= */

.site-logo {

    min-height: 140px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border-radius:
        18px;

    background:

        radial-gradient(
            circle at 50% 0%,
            white,
            transparent 55%
        ),

        linear-gradient(
            145deg,
            #ffc6e2,
            #dec9f5
        );

    border:
        1px solid
        rgba(255,255,255,.8);

    box-shadow:

        inset
        0 2px 5px
        rgba(255,255,255,.9),

        var(--shadow-small);

    margin-bottom:
        18px;

}


.logo-symbol {

    font-size:
        37px;

    margin-bottom:
        4px;

}


.logo-name {

    font-size:
        19px;

    font-weight:
        bold;

    letter-spacing:
        1px;

}


.logo-subtitle {

    font-size:
        11px;

    opacity:
        .65;

    margin-top:
        3px;

}


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

.sidebar-label {

    font-size:
        10px;

    letter-spacing:
        2px;

    opacity:
        .55;

    padding:
        8px 9px;

}


.navigation {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.nav-button {

    border:
        1px solid
        rgba(255,255,255,.75);

    border-radius:
        13px;

    padding:
        11px 13px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    cursor:
        pointer;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.72),
            rgba(248,199,225,.55)
        );

    box-shadow:

        inset
        0 1px 2px
        rgba(255,255,255,1),

        0 4px 10px
        rgba(110,70,100,.07);

    transition:
        .18s ease;

}


.nav-button:hover {

    transform:
        translateX(4px);

    box-shadow:

        inset
        0 1px 2px white,

        0 7px 16px
        rgba(110,70,100,.15);

}


.nav-button.active {

    background:

        linear-gradient(
            180deg,
            white,
            #eac8e8
        );

    box-shadow:

        inset
        0 2px 5px white,

        0 0 0 2px
        rgba(255,150,210,.18);

}


/* =========================================================
   STATUS
========================================================= */

.status-box {

    margin-top:
        18px;

    padding:
        12px;

    border-radius:
        14px;

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

    border:
        1px solid
        rgba(255,255,255,.6);

    font-size:
        11px;

}


.status-line {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.online-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #d7d972;

    box-shadow:
        0 0 9px
        #d9cf72;

}


.status-small {

    opacity:
        .6;

    margin-top:
        6px;

}


.sidebar-footer {

    margin-top:
        20px;

    text-align:
        center;

    font-size:
        9px;

    opacity:
        .45;

    line-height:
        1.7;

}


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

.main-content {

    min-width:
        0;

}


.page {

    display:
        none;

    animation:
        page-in
        .3s
        ease;

}


.page.active {

    display:
        block;

}


@keyframes page-in {

    from {

        opacity:
            0;

        transform:
            translateY(10px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


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

.hero {

    min-height:
        330px;

    padding:
        40px;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

}


.hero-content {

    position:
        relative;

    z-index:
        2;

}


.eyebrow,
.tiny-label {

    font-size:
        10px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    opacity:
        .52;

}


.hero h1 {

    font-family:
        Georgia,
        serif;

    font-weight:
        normal;

    font-size:
        clamp(
            40px,
            6vw,
            70px
        );

    line-height:
        .95;

    margin-top:
        12px;

    color:
        #6d405f;

}


.hero h1 span {

    display:
        block;

    color:
        #b75f92;

}


.hero-description {

    max-width:
        620px;

    line-height:
        1.75;

    margin-top:
        20px;

    color:
        var(--text-soft);

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        22px;

}


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

.aero-button {

    border:
        1px solid white;

    border-radius:
        999px;

    padding:
        10px 18px;

    cursor:
        pointer;

    background:

        linear-gradient(
            180deg,
            white,
            #f1c6e3
        );

    box-shadow:

        inset
        0 1px 3px white,

        var(--shadow-small);

    color:
        #70435e;

    transition:
        .18s ease;

}


.aero-button:hover {

    transform:
        translateY(-3px);

    box-shadow:

        inset
        0 1px 3px white,

        0 10px 20px
        rgba(100,50,90,.16);

}


.aero-button.secondary {

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

}


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

.hero-orb {

    position:
        absolute;

    right:
        8%;

    width:
        220px;

    height:
        220px;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle at 35% 25%,
            white,
            transparent 25%
        ),

        linear-gradient(
            145deg,
            #ffc1e1,
            #d8c5f3
        );

    box-shadow:

        inset
        0 3px 8px
        rgba(255,255,255,.9),

        0 25px 50px
        rgba(100,60,100,.13);

    animation:
        orb-float
        6s
        ease-in-out
        infinite;

}


.orb-inner {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        70px;

    color:
        rgba(255,255,255,.85);

    text-shadow:
        0 0 15px white;

}


@keyframes orb-float {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-3deg);
    }

    50% {
        transform:
            translateY(-15px)
            rotate(3deg);
    }

}


/* =========================================================
   CONTENT WINDOWS
========================================================= */

.content-window {

    margin-top:
        18px;

    overflow:
        hidden;

}


.window-titlebar {

    height:
        35px;

    padding:
        0 12px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.72),
            rgba(255,220,239,.42)
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.8);

    font-size:
        11px;

    opacity:
        .8;

}


.window-controls {

    display:
        flex;

    gap:
        5px;

}


.window-controls span {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        white;

    border:
        1px solid
        #e9bcd5;

}


.window-content {

    padding:
        25px;

}


.window-content h1 {

    font-family:
        Georgia,
        serif;

    font-weight:
        normal;

    font-size:
        38px;

    margin-top:
        8px;

}


.window-content h2 {

    font-family:
        Georgia,
        serif;

    font-weight:
        normal;

}


.window-content p {

    line-height:
        1.7;

    color:
        var(--text-soft);

}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        15px;

}


.section-heading h2 {

    margin-top:
        5px;

}


.date {

    font-size:
        11px;

    opacity:
        .5;

}


.text-button {

    border:
        0;

    background:
        transparent;

    color:
        #a15380;

    cursor:
        pointer;

}


/* =========================================================
   FEATURED
========================================================= */

.featured-grid {

    display:
        grid;

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

    gap:
        12px;

}


.featured-item {

    aspect-ratio:
        1;

    overflow:
        hidden;

    border-radius:
        14px;

    border:
        1px solid white;

    cursor:
        pointer;

    box-shadow:
        var(--shadow-small);

}


.featured-item img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        .3s ease;

}


.featured-item:hover img {

    transform:
        scale(1.06);

}


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

.gallery-heading p {

    margin-top:
        5px;

}


.gallery-toolbar {

    margin-top:
        25px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        12px;

    flex-wrap:
        wrap;

}


.filter-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.filter-button {

    border:
        1px solid
        rgba(255,255,255,.8);

    border-radius:
        999px;

    padding:
        7px 13px;

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

    cursor:
        pointer;

    font-size:
        12px;

}


.filter-button:hover {

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

}


.filter-button.active {

    background:
        white;

    box-shadow:
        var(--shadow-small);

}


.art-counter {

    font-size:
        11px;

    opacity:
        .55;

}


/* =========================================================
   ART GRID
========================================================= */

.art-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(190px, 1fr)
        );

    gap:
        15px;

    margin-top:
        15px;

}


.art-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        260px;

    border-radius:
        17px;

    border:
        1px solid white;

    background:
        #f4d7e7;

    cursor:
        pointer;

    box-shadow:
        var(--shadow-small);

    transition:
        transform
        .2s ease,
        box-shadow
        .2s ease;

}


.art-card:hover {

    transform:
        translateY(-5px)
        rotate(.3deg);

    box-shadow:
        0 18px 35px
        rgba(105,60,95,.2);

}


.art-card-image {

    width:
        100%;

    height:
        100%;

    min-height:
        260px;

    object-fit:
        cover;

    display:
        block;

    transition:
        .3s ease;

}


.art-card:hover
.art-card-image {

    transform:
        scale(1.04);

}


/* =========================================================
   ART INFORMATION
========================================================= */

.art-card-info {

    position:
        absolute;

    left:
        9px;

    right:
        9px;

    bottom:
        9px;

    padding:
        10px;

    border-radius:
        12px;

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

    backdrop-filter:
        blur(9px);

    box-shadow:
        inset
        0 1px white;

}


.art-card-title {

    font-weight:
        bold;

    font-size:
        13px;

}


.art-card-meta {

    margin-top:
        4px;

    font-size:
        10px;

    opacity:
        .6;

}


/* =========================================================
   NSFW COVER
========================================================= */

.nsfw-cover {

    position:
        absolute;

    inset:
        0;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        25px;

    color:
        white;

    background:

        linear-gradient(
            135deg,
            rgba(82,42,72,.88),
            rgba(163,76,125,.8)
        );

    backdrop-filter:
        blur(15px);

}


.nsfw-content {

    max-width:
        220px;

}


.nsfw-badge {

    display:
        inline-block;

    padding:
        5px 10px;

    border:
        1px solid
        rgba(255,255,255,.7);

    border-radius:
        999px;

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

    font-size:
        10px;

    letter-spacing:
        1px;

}


.nsfw-content h3 {

    margin-top:
        10px;

}


.nsfw-content p {

    color:
        white;

    opacity:
        .75;

    font-size:
        11px;

    margin-top:
        5px;

}


.reveal-button {

    border:
        1px solid white;

    border-radius:
        999px;

    padding:
        8px 14px;

    margin-top:
        12px;

    background:
        white;

    color:
        #754761;

    cursor:
        pointer;

}


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

.about-layout {

    display:
        grid;

    grid-template-columns:
        190px 1fr;

    gap:
        30px;

    align-items:
        start;

}


.about-avatar {

    width:
        190px;

    aspect-ratio:
        1;

    border-radius:
        50%;

    overflow:
        hidden;

    position:
        relative;

    border:
        6px solid white;

    background:

        linear-gradient(
            145deg,
            #ffc6e2,
            #d9c6f5
        );

    box-shadow:
        var(--shadow);

}


.about-avatar img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.about-avatar > span {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        65px;

    z-index:
        -1;

}


.avatar-fallback > span {

    z-index:
        1;

}


.about-text h1 {

    margin:
        5px 0 17px;

}


.about-text p {

    margin-bottom:
        14px;

}


.tag-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        20px;

}


.tag-list span {

    padding:
        7px 10px;

    border:
        1px solid white;

    border-radius:
        999px;

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

    font-size:
        11px;

}

/* Убираем синий цвет и подчеркивание для карточек-ссылок */
.social-card {
    color: inherit;         /* Наследовать нормальный цвет текста */
    text-decoration: none;  /* Убрать синее подчеркивание */
}

/* На всякий случай, чтобы при клике/наведении цвет не менялся на фиолетовый/синий */
.social-card:visited,
.social-card:active,
.social-card:hover {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   SKILLS
========================================================= */

.skill-grid {

    display:
        grid;

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

    gap:
        10px;

    margin-top:
        18px;

}


.skill-card {

    min-height:
        130px;

    padding:
        17px;

    border:
        1px solid white;

    border-radius:
        15px;

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

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

}


.skill-card:first-letter {

    font-size:
        25px;

}


.skill-card strong {

    font-size:
        13px;

}


.skill-card small {

    opacity:
        .55;

}


/* =========================================================
   ARCHIVE
========================================================= */

.archive-list {

    display:
        grid;

    gap:
        9px;

    margin-top:
        22px;

}


.archive-entry {

    width:
        100%;

    border:
        1px solid
        rgba(255,255,255,.75);

    border-radius:
        13px;

    padding:
        14px;

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

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        .15s ease;

}


.archive-entry:hover {

    transform:
        translateX(4px);

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

}


.archive-entry b {

    font-size:
        11px;

    opacity:
        .55;

}


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

.links-grid {

    display:
        grid;

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

    gap:
        12px;

    margin-top:
        22px;

}


.social-card {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px;

    border:
        1px solid white;

    border-radius:
        15px;

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

    transition:
        .18s ease;

}


.social-card:hover {

    transform:
        translateY(-3px);

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

    box-shadow:
        var(--shadow-small);

}


.social-icon {

    width:
        42px;

    height:
        42px;

    border-radius:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    font-size:
        20px;

}


.social-card span:nth-child(2) {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.social-card small {

    font-size:
        10px;

    opacity:
        .55;

}


/* =========================================================
   MODAL
========================================================= */

.modal {

    position:
        fixed;

    inset:
        0;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    z-index:
        100;

}


.modal.open {

    display:
        flex;

}


.modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(48,25,43,.68);

    backdrop-filter:
        blur(12px);

}


.art-modal {

    width:
        min(1000px, 100%);

    max-height:
        92vh;

    overflow:
        hidden;

    position:
        relative;

    z-index:
        2;

}


.modal-close {

    margin-left:
        auto;

    width:
        25px;

    height:
        25px;

    border:
        0;

    border-radius:
        50%;

    background:
        white;

    cursor:
        pointer;

    font-size:
        18px;

    line-height:
        1;

}


.modal-body {

    display:
        grid;

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

    max-height:
        calc(92vh - 35px);

}


.modal-image-container {

    min-height:
        400px;

    padding:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(70,40,65,.08);

}


.modal-image-container img {

    width:
        100%;

    max-height:
        calc(92vh - 80px);

    object-fit:
        contain;

    border-radius:
        12px;

}


.modal-info {

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

}


.modal-info h2 {

    font-family:
        Georgia,
        serif;

    font-weight:
        normal;

    margin-top:
        5px;

}


.modal-description {

    margin-top:
        20px;

    font-size:
        13px;

    line-height:
        1.7;

    color:
        var(--text-soft);

}


.modal-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        18px;

}


.modal-tag {

    padding:
        5px 8px;

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

    border:
        1px solid white;

    border-radius:
        999px;

    font-size:
        10px;

}


.modal-footer {

    margin-top:
        auto;

    padding-top:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    font-size:
        11px;

    opacity:
        .6;

}


.favorite-button {

    border:
        1px solid white;

    border-radius:
        999px;

    background:
        white;

    padding:
        7px 10px;

    cursor:
        pointer;

}


.favorite-button.favorite {

    background:
        #ffc5e2;

    color:
        #773c5d;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-gallery {

    grid-column:
        1 / -1;

    padding:
        50px;

    text-align:
        center;

    opacity:
        .55;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .site-wrapper {

        grid-template-columns:
            1fr;

    }


    .sidebar {

        position:
            static;

    }


    .navigation {

        display:
            grid;

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

    }


    .sidebar-label,
    .status-box,
    .sidebar-footer {

        display:
            none;

    }


    .hero-orb {

        opacity:
            .35;

        right:
            -50px;

    }


    .about-layout {

        grid-template-columns:
            1fr;

    }


    .skill-grid {

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

    }

}


@media (max-width: 600px) {

    .site-wrapper {

        width:
            95%;

        margin:
            12px auto;

    }


    .navigation {

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

    }


    .hero {

        padding:
            25px;

    }


    .hero h1 {

        font-size:
            43px;

    }


    .hero-orb {

        width:
            150px;

        height:
            150px;

        right:
            -55px;

        bottom:
            -40px;

    }


    .featured-grid {

        grid-template-columns:
            1fr;

    }


    .art-grid {

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

    }


    .art-card,
    .art-card-image {

        min-height:
            190px;

    }


    .window-content {

        padding:
            18px;

    }


    .links-grid {

        grid-template-columns:
            1fr;

    }


    .modal {

        padding:
            8px;

    }


    .modal-body {

        grid-template-columns:
            1fr;

        overflow:
            auto;

    }


    .modal-image-container {

        min-height:
            300px;

    }


    .modal-info {

        padding:
            18px;

    }

}


@media (max-width: 400px) {

    .art-grid {

        grid-template-columns:
            1fr;

    }


    .skill-grid {

        grid-template-columns:
            1fr;

    }

}