@import url('press-start-2p.css');
@font-face {
    font-family: 'Departure Mono';
    src: url('fonts/departure-mono-regular.woff2') format('woff2');
    font-display: swap;
}
body {
    background-color: #c0c0c0;
    font-family: Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Sewerslvt-inertiastatus.gif'); /* your Win95 disks wallpaper */
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.main-content {
  margin-left: 0px;
}
/* Top bar Assbook */
.top-bar {
    background: linear-gradient(to right, #010101, #020202);
    color: white;

    padding: 5px 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 2px solid #000;
}

.top-bar-title {
    font-size: 32px;
}

.top-bar-links {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 32px;
    font-family: "R95 Sans Serif 8pt";
}

.top-bar-links a {
    color: white;
    text-decoration: none;
}

.top-bar-links a:hover {
    text-decoration: underline;
}
/* Profile window */
.window {
    width: 670px;
    margin: 20px auto;
    background: #ece9d8;
    border: 2px solid #000;
    box-shadow: 3px 3px #808080;
}

.title-bar {
    background: linear-gradient(to right, #010101, #020202);
    color: white;
    padding: 4px 8px;
    font-size: 14px;
    border-bottom: 2px solid #000;
    font-family: "R95 Sans Serif 8pt";
}

.content {
    padding: 15px;
}

.profile {
    display: flex;
    align-items: center;
}

.avatar {
    flex-shrink: 0;
}

.avatar img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border: 2px solid #000;
    margin-right: 20px;
    border-radius: 0;
}

.profile-header h1 {
  display: none;
}

.info {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 160px;
}


.info h1 {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: #000000;
}
.bio {
  line-height: 1;
}
.from {
    font-size: 12px;
    margin-top: 8px;
}
.info p {
    margin: 5px 0;
}

/* Buttons */
/* Buttons */
.links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin-top: auto;
    gap: 4px;
    box-sizing: border-box;
}

.links .btn {
    flex: 1 1 calc(33.333% - 4px);
    min-width: 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    gap: 6px;

    background: #d4d0c8;
    border: 2px solid #808080;
    padding: 4px 8px;

    color: black;
    text-decoration: none;
    text-align: center;
    font-size: 14px;

    box-shadow:
        inset -2px -2px #fff,
        inset 2px 2px #404040;
        font-family: "R95 Sans Serif 8pt";
}

.links .btn img {
    display: block;
    width: 18px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.links .btn:hover {
    background: #c0c0c0;
}

/* Powered by */
.powered {
    text-align: center;
    margin: 30px 0px 10px 10px;
    width: 670px;
    margin: 20px auto;
    background: #ece9d8;
    border: 2px solid #000;
    box-shadow: 3px 3px #808080;
}

.devices {
    text-align: left;
    line-height: 1;
    margin: 30px 0px 10px 10px;
    width: 670px;
    margin: 20px auto;
    background: #ece9d8;
    border: 2px solid #000;
    box-shadow: 3px 3px #808080;
}
.devices h4 {
  font-size: 24px;
  margin: 5px 0px;
}

.laptop {
    text-align: left;
    line-height: 1;
    margin: 30px 0px 0px 10px;
    width: 670px;
    margin: auto;
    background: #000000;
    border: 2px solid #000;
    box-shadow: 3px 3px #808080;
    color: #ffffff;
    box-shadow:
        inset -2px -2px #666666,
        inset 2px 32px #333333,
        3px 3px 0px #808080;;
            -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.laptop pre {
  font-family: monospace;
  font-size: 13px;
  line-height: 1.2;
  margin: 0px
}

.arch-blue {
    color: #00FFFF;
}

.green {
  color: #00FF00;
}

.gray {
  color: #C0C0C0;
}

.dred-bg {
  background: #800000;
}

.dgr-bg {
  background: #008000;
}

.dor-bg {
  background: #808000;
}

.dbl-bg {
  background: #3465A4;
}

.dma-bg {
  background: #75507B;
}

.dcy-bg {
  background: #06989A;
}

.dwh-bg {
  background: #D3D7CF;
}

.bl-bg {
  background: #555753;
}

.red-bg {
  background: #EF2929;
}

.gr-bg {
  background: #8AE234;
}

.or-bg {
  background: #FCE94F;
}

.blu-bg {
  background: #729FCF;
}

.ma-bg {
  background: #AD7FA8;
}

.cy-bg {
  background: #34E2E2;
}

.wh-bg {
  background: #EEEEEC;
}
.powered img {
    vertical-align: middle;
    margin: 5px 5px;
    height: 31px;
    width: 88px;
    border-radius: 0px;
    transition: height ease-in-out 0.2s;
}

/* Window buttons */
.window-buttons {
    margin-left: auto;
    display: flex;
    gap: 2px;
    color: #000000
}

.win-btn {
    background: #d4d0c8;
    border: 2px solid #808080;
    font-family: 'Tahoma', sans-serif;
    font-size: 12px;
    width: 20px;
    height: 20px;
    line-height: 0px;
    text-align: center;
    padding: 0px;
    cursor: pointer;
    box-shadow: inset -2px -2px #fff, inset 2px 2px #404040;
    font-weight: bold;
    color: #000000
}

.win-btn:hover {
    background: #c0c0c0;
}

.title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* BSOD */
#bsod {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0000aa;
    color: #c0c0c0;
    font-family: 'Lucida Console', 'Courier New', monospace;
    box-sizing: border-box;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    text-align: left;
}

#bsod.active {
    display: flex;
}

.bsod-content {
    max-width: 800px;
}

/* Серый прямоугольник с надписью Windows */
.bsod-header {
    text-align: center;
    margin-bottom: 20px;
}

.bsod-windows {
    background: #c0c0c0;
    color: #0000aa;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 24px;
}

/* Кнопка Reload как мигающий курсор */
#reload-btn {
    background: #c0c0c0;
    color: #0000aa;
    border: none;
    padding: 4px 12px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    animation: blink-cursor 1s steps(1) infinite;
    margin-top: 15px;
}

/* Мигающая анимация как у курсора */
@keyframes blink-cursor {
    50% { opacity: 0; }
}
/* Анимация появления BSOD */
@keyframes crt-flash {
    0% {
        transform: scaleY(0.05) scaleX(0);
        filter: brightness(400%);
    }
    40% {
        transform: scaleY(0.05) scaleX(1);
        filter: brightness(200%);
    }
    60% {
        transform: scaleY(1) scaleX(1);
        filter: brightness(150%);
    }
    100% {
        transform: scaleY(1) scaleX(1);
        filter: brightness(100%);
    }
}

#bsod.active {
    display: flex;
    animation: crt-flash 0.4s ease-out;
}

#error-window {
    width: 300px;
    background: #ece9d8;
    border: 2px solid #000;
    box-shadow: 3px 3px #808080;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

#error-window .title-bar {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: linear-gradient(to right, #010101, #020202);
    border-bottom: 2px solid #000;
}

#error-window .title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: white;
}

#error-window .window-buttons {
    display: flex;
    align-items: center;
    margin-left: auto;
}
  

.flash {
    animation: error-flash 0.5s;
}
#error-window .title-bar.inactive {
    background: #808080;
}

.title-bar.inactive {
    background: #808080 !important;
}

.open-animation {
    animation: error-open 0.2s ease-out forwards;
}

.close-animation {
    animation: error-close 0.15s ease-in forwards;
}

@keyframes error-open {
    0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes error-close {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
}

@keyframes error-flash {
    0%, 100% { opacity: 100%}
    50% { opacity: 50%}
}
#error-window .content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
}

#error-window .content img {
    flex-shrink: 0;
}

#error-window .content p {
    margin: 0;
    flex: 1;
}

/* 🔹 Стили для неактивных панелей */
.lastfm-title.inactive {
  color: #999;
}
.top-bar.inactive {
    background: linear-gradient(to right, #b5b5b5, #9b9b9b);
    color: #666;
}

.top-bar.inactive a {
    color: #666 !important;
    pointer-events: none; /* отключаем клики */
}

.sidebar.inactive {
    background: #b5b5b5;
    color: #666;
}

.sidebar.inactive a {
    color: #666 !important;
    pointer-events: none;
}

/* 🔹 Делаем кнопки "Win98" серыми в неактивном состоянии */
.sidebar.inactive .btn,
.top-bar.inactive .btn {
    background: #c3c3c3;
    color: #666;
    border: 2px solid #9b9b9b;
    pointer-events: none;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.top-bar-title {
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 16px;
}

.top-bar-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.top-bar-links a {
    margin-left: 0;
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.top-bar-links a:hover {
    text-decoration: underline;
}

/* ============================= */
/* Last.fm / Winamp style window */
/* ============================= */

/* ================================= */
/* LAST.FM / WINAMP                   */
/* ================================= */

.lastfm-window {
    position: relative;

    width: 300px;

    flex-shrink: 0;

    background: #242337;

    border: 2px solid #585763;

    box-shadow:
        2px 2px #808080;

    color: #00ff66;

    font-family:
        "MS Sans Serif",
        Tahoma,
        sans-serif;

    /*
     * Растягивается по высоте
     * всей левой колонки
     */
    align-self: stretch;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
}

/* Title bar */

.lastfm-title-bar {
    height: 22px;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    padding: 2px 3px 2px 6px;

    background: linear-gradient(
        to top,
        #d4bd7b,
        #ffefa6
    );

    color: #ddd;

    border-bottom: 2px solid #585763;
        box-shadow:
        inset -7px -7px #313153,
        inset 7px 7px #313153;
}

.lastfm-title {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    background: #313153;
    border-right: 5px solid #313153;
    border-left: 5px solid #313153;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.lastfm-title-bar .window-buttons {
    margin-left: auto;
    background: #313153;
    border-left: 1px solid #313153;
}

.lastfm-title-bar .win-btn {
    width: 19px;
    height: 18px;

    min-width: 19px;
    min-height: 18px;

    font-size: 11px;

    background: #313153;
    color: #ffefa6;
    border: 0px;
    box-shadow: inset 0px 0px #fff, inset 0px 0px #404040;
}

/* LCD screen */

.lastfm-screen {
    margin: 7px;

    padding: 7px;

    background: #050805;

    border: 2px solid #333;

    box-shadow:
        inset 2px 2px #000,
        inset -1px -1px #222;

    flex: 1;

    min-height: 0;

    overflow: hidden;
}

/* Current track */

.lastfm-now {
    display: flex;
    gap: 8px;

    padding-bottom: 8px;

    border-bottom: 1px solid #174d2b;
}

#lastfm-cover {
    width: 64px;
    height: 64px;

    object-fit: cover;

    background: #111;

    border: 1px solid #174d2b;

    image-rendering: auto;
}

.lastfm-track-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

#lastfm-status {
    font-size: 9px;
    color: #00ff66;

    margin-bottom: 5px;

    letter-spacing: 1px;
}

#lastfm-track {
    font-size: 11px;
    font-weight: bold;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#lastfm-artist {
    margin-top: 4px;

    font-size: 10px;

    color: #42b866;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* History */

.lastfm-history-title {
    margin: 8px 0 5px;

    font-size: 9px;

    color: #42b866;

    letter-spacing: 1px;
}

.lastfm-item {
    display: flex;
    align-items: center;

    min-height: 25px;

    border-top: 1px solid #102817;

    font-size: 9px;
}

.lastfm-item-index {
    width: 18px;

    color: #347d4d;
}

.lastfm-item-text {
    min-width: 0;
    flex: 1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lastfm-item-artist {
    color: #347d4d;
}

/* Currently playing */

.lastfm-item.now-playing {
    color: #00ff66;
}

.lastfm-item.now-playing .lastfm-item-index {
    color: #00ff66;
}

.lastfm-loading {
    padding: 20px 0;

    text-align: center;

    font-size: 10px;

    animation: lastfm-blink 1s steps(1) infinite;
}

@keyframes lastfm-blink {
    50% {
        opacity: 0;
    }
}

/* Bottom status bar */

.lastfm-bottom {
    height: 19px;

    box-sizing: border-box;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 7px;

    background: #222;

    border-top: 1px solid #444;

    color: #777;

    font-size: 9px;
}

/* ================================= */
/* ОБЩАЯ КОМПОЗИЦИЯ ОКОН              */
/* ================================= */

.windows-layout {
    display: flex;

    align-items: stretch;
    justify-content: center;

    gap: 20px;

    width: max-content;

    margin: 20px auto;
}


/* Левая колонка */

.windows-column {
    display: flex;
    flex-direction: column;

    gap: 20px;

    width: 670px;
}


/* Убираем старые auto-margin */

.windows-column .window,
.windows-column .devices,
.windows-column .powered {
    width: 670px;
    margin: 0;

    box-sizing: border-box;
}

.lastfm-bottom {
    flex-shrink: 0;

    height: 19px;

    box-sizing: border-box;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 7px;

    background: #313153;

    border-top: 1px solid #585763;

    color: #777;

    font-size: 9px;
}

.windows-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 575px;
}

.windows-column .window,
.windows-column .devices,
.windows-column .laptop,
.windows-column .powered {
    width: 575px;
    margin: 0;
    box-sizing: border-box;
}

#error-window .ok-btn {
    display: block;

    min-width: 75px;
    height: 24px;

    margin-top: 12px;
    margin-left: auto;

    padding: 2px 12px;

    background: #d4d0c8;
    color: #000;

    border: 2px solid #808080;

    cursor: pointer;

    font-size: 14px;

    box-shadow:
        inset -2px -2px #fff,
        inset 2px 2px #404040;
        font-family: "R95 Sans Serif 8pt";
}

#error-window .ok-btn:hover {
    background: #c0c0c0;
}

#error-window .ok-btn:active {
    box-shadow:
        inset 2px 2px #404040,
        inset -2px -2px #fff;

    padding-top: 4px;
    padding-left: 14px;
    padding-right: 10px;
}

/* Название трека — ссылка */

.lastfm-track-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.lastfm-track-link:hover {
    color: #ffffff;
    text-decoration: underline;
}


/* Сердечко любимого трека */

.lastfm-loved {
    color: #ff4040;
    margin-left: 2px;
    font-size: 11px;
    text-shadow: 1px 1px #000;
}

/* Ссылки на Last.fm */

.lastfm-track-link,
.lastfm-artist-link,
.lastfm-item-text {
    color: inherit;
    text-decoration: none;
}

.lastfm-track-link:hover,
.lastfm-artist-link:hover,
.lastfm-item-text:hover {
    text-decoration: underline;
    color: #00ff66;
}


/* Чтобы ссылка в списке нормально сжималась */

a.lastfm-item-text {
    min-width: 0;
    flex: 1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Сердечко лайкнутого трека */

.lastfm-heart {
    flex-shrink: 0;
    margin-left: 6px;

    color: #ff4d6d;

    font-size: 12px;
}

/* ============================= */
/* MOBILE ADAPTATION             */
/* ============================= */

@media (max-width: 940px) {

    #bsod.active {
    display: none;
}

    .windows-layout {
        width: auto;
        max-width: 100%;
        margin: 15px auto;

        flex-direction: column;
        align-items: center;

        gap: 20px;

        padding: 0 10px;
        box-sizing: border-box;
    }


    .windows-column {
        width: 100%;
        max-width: 575px;
    }


    .windows-column .window,
    .windows-column .devices,
    .windows-column .powered,
    .windows-column .laptop{
        width: 100%;
        max-width: 575px;
    }


    .lastfm-window {
        width: 100%;

        align-self: auto;
        max-width: 575px;
    }

}


/* Телефоны */

@media (max-width: 700px) {

    #bsod.active {
    display: none;
}

    .top-bar {
        display: none;
    }


    .top-bar-links {
        width: 100%;
        justify-content: space-between;
        gap: 5px;
    }


    .top-bar-links a {
        font-size: 12px;
    }


    .windows-layout {
        margin: 10px auto;
        padding: 0 7px;
        gap: 10px;
    }


    .windows-column {
        gap: 10px;
    }


    .content {
        padding: 10px;
    }


    /* Профиль */

    .profile {
        flex-direction: column;
    }


    .avatar img {
        margin-right: 0;
        margin-bottom: 0px;
        height: 70px;
        width: auto;
    }
    .profile-header {
      display: flex;
      flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    }
.profile-header h1 {
  margin: 0px 20px 0px 20px;
    font-size: 22px;
    color: #000000;
    display: flex;
    align-items: center;
}

    .info {
        height: auto;
        width: 100%;
        text-align: left;
        align-items: flex-start;
                margin-bottom: 10px;
    }


    .info h1 {
        display: none;
    }


    /* Кнопки ссылок */

    .links {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        width: 100%;

        gap: 4px;
    }


    .links .btn {
        width: 100%;
        min-width: 0;
        padding: 6px 4px;

        font-size: 12px;
    }

    /* Последняя кнопка на всю ширину */


    /* Devices */

    .devices h4 {
        font-size: 18px;
    }


    .devices .content {
        font-size: 14px;
    }
    
    .logo {
      display: none;
    }


    /* Powered */

    .powered img {
        max-width: 100%;
        height: auto;
        max-height: 30px;
        margin: 2px;
    }


    /* Last.fm */

    .lastfm-window {
        width: 100%;
        max-width: 575px;
    }


    .lastfm-screen {
        min-height: 300px;
    }


    /* Окно ошибки */

    #error-window {
        width: calc(100% - 30px);
        box-sizing: border-box;
    }

}

@media (max-width: 940px) {

    /* Разворачиваем структуру для управления порядком */
    .windows-layout {
        display: flex;
        flex-direction: column;
    }

    /* Левая колонка перестаёт быть отдельной визуальной колонкой */
    .windows-column {
        display: contents;
    }

    /* Порядок окон на телефоне */
    .main-window {
        order: 1;
    }

    .lastfm-window {
        order: 2;

        /* Больше не растягиваем на всю высоту остальных окон */
        align-self: auto;
    }

    .devices {
        order: 3;
    }
    
    .laptop {
      order: 4;
    }

    .powered {
        order: 5;
    }


    /* ========================= */
    /* Укорачиваем LAST.FM       */
    /* ========================= */

    /* Скрываем историю */
    .lastfm-history-title,
    #lastfm-list {
        display: none;
    }


    /* Убираем растягивание экрана */
    .lastfm-screen {
        flex: none;
        min-height: 0;
    }
    
    .lastfm-now {
    padding-bottom: 0px;

    border-bottom: 0px solid #174d2b;
}

}

.webring {
padding: 10px;
font-size: 18px;
font-family: "R95 Sans Serif 8pt";
box-shadow: 0px -2px #aca0a0;
border-top: 2px solid #fcf9e8;
padding-top: 20px;
}

.webring a {
padding: 0px 30px;
text-decoration: none;
}

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

.webring-label a{
color: #000000;
}