:root {
    --blue-neon: hsl(240, 100%, 65%);
    --cyan-neon: hsl(180, 100%, 60%);
    --pink-neon: hsl(320, 100%, 60%);
}
@font-face{
    font-family: 'IBM';
    src: url('fonts/web_ibm.woff2');
}
@font-face{
    font-family: 'Comingsoon';
    src: url('fonts/ComingSoonRUS.woff2');
}
body {
    background-color: rgb(0,0,0);
    color: rgb(255,255,255);
    font-family: 'Comingsoon', cursive;
    font-size: large;
    overflow-x: hidden;
}
main {
    flex-grow: 1;
    padding: 10px 1em 1em 0;
}
.page-wrapper main {
    display: contents;
}
main img {
    max-width: 50%;
}
main article {
    --post-color: var(--blue-neon);
    --text-color: white;
    border: 5px solid var(--post-color);
    color: var(--text-color);
    padding: 10px;
    margin-bottom: 10px;
    position:relative;
}
main article::before {
    content: "";
    position: absolute;
    inset: -5px;              /* чтобы накрыть рамку толщиной 5px */
    box-shadow: 0 0 40px var(--post-color), inset 0 0 20px var(--post-color);
    animation: neon-pulse 4s infinite ease-in-out;
    pointer-events: none;  
}
main article time {
    float: right;
}
main article h3 {
    margin-top: 10px;
    margin-bottom: 20px;
}
main article p {
    margin-top: 10px;
    margin-bottom: 0px;
}
main article:nth-of-type(-n+2), .divider:nth-of-type(1) {
    grid-column: 2;
    align-self: start;
}
main article:nth-of-type(n+3), .divider:nth-of-type(n+2) {
    grid-column: 1 / -1;
}
#crow-marquee {
    
}
.small {
    max-width: 20%;
}
.medium {
    max-width: 40%;
}
.large {
    max-width: 100%;
}
.ascii-art {
    font-family: 'IBM', monospace;
    /* font-size: x-small; */
    font-size: clamp(4px, 1vw, 15px);
    width: max-content;
}
.glitch-art {
    font-family: 'IBM', monospace;
    /* font-size: x-small; */
    font-size: clamp(4px, 1vw, 15px);
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 2px 0 var(--cyan-neon), -2px 0 var(--pink-neon);
    animation: glitch 10s infinite steps(1, end);
}
.subtitle {
    text-align: center;
    position:relative;
}
.page-wrapper {
    display: grid;
    grid-template-columns: clamp(110px, 19%, 200px) 1fr;
    flex-direction: row;
    gap: 1%;
}
.page-wrapper .sidebar {
    width: auto;
    min-width: 0;
    max-width: none;
}
.sidebar {
    width: 19%;
    flex-shrink: 1;
    border: 5px solid var(--blue-neon);
    box-shadow: 0 0 40px var(--blue-neon), inset 0 0 20px var(--blue-neon);
    min-width:200px;
    max-width:250px;
    align-self: flex-start;
    text-align: center;
    /* min-width: 150px; */
    /* max-width: 250px; */
    grid-column: 1;
    grid-row: 1/4;
    align-self: start;
}

.sidebar ul {
    list-style: none;
    padding: 10px;
    margin: 0px;
}
.sidebar a:link {
    color: hsl(75, 100%, 55%);
    text-decoration: wavy underline;
}
.sidebar a:visited {
    color: hsl(275, 100%, 55%);
}
.sidebar a:hover {
    color: hsl(345, 100%, 60%);
    text-decoration: underline;
}

.post-1 {
    --post-color: hsl(45, 100%, 50%);
}
.post--1 {
    --post-color: hsl(55, 30%, 18%);
    background-color: hsl(55, 30%, 18%);
}
.divider {
    font-family: 'IBM', monospace;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    color: hsl(80, 50%, 50%);
}

#crow-marquee {
    animation: marquee-anim 15s linear infinite;
}
@keyframes marquee-anim {
    0%   { transform: translate(110vw, 0vh);}
    100% { transform: translate(-100%, 0vh);}
}

.firefly {
    position:absolute;
    /* overflow: hidden; */
    width: 4px;
    height: 4px;
    background: hsl(60,100%, 75%);
    box-shadow: 0 0 8px 3px hsla(60, 100%, 60%, 0.8);
}
.firefly-1 {
    animation: firefly-1-drift 30s infinite;
}
.firefly-2 {
    animation: firefly-2-drift 22s infinite;
}
.firefly-3 {
    animation: firefly-3-drift 48s infinite;
}
.firefly-4 {
    animation: firefly-4-drift 43s infinite;
}
.firefly-5 {
    animation: firefly-5-drift 37s infinite;
}
.firefly-6 {
    animation: firefly-6-drift 17s infinite;
}
@keyframes firefly-1-drift {
    0%, 100% { transform: translate(0,0);}
    25%      { transform: translate(5vw, -2vh);}
    50%      { transform: translate(16vw, 3vh);}
    75%      { transform: translate(6vw, 7vh);}
}
@keyframes firefly-2-drift {
    0%, 100% { transform: translate(106vw,0);}
    25%      { transform: translate(96vw, -4vh);}
    50%      { transform: translate(70vw, 3vh);}
    75%      { transform: translate(84vw, 5vh);}
}
@keyframes firefly-3-drift {
    0%, 100% { transform: translate(52vw,-2vh);}
    25%      { transform: translate(44vw, -4vh);}
    50%      { transform: translate(70vw, 3vh);}
    75%      { transform: translate(84vw, 5vh);}
}
@keyframes firefly-4-drift {
    0%, 100% { transform: translate(20vw, 10vh);}
    40%      { transform: translate(60vw, 8vh);}
    70%      { transform: translate(40vw, 5vh);}
    
}
@keyframes firefly-5-drift {
    0%, 100% { transform: translate(0vw,82vh);}
    25%      { transform: translate(10vw, 61vh);}
    50%      { transform: translate(0vw, 42vh);}
    75%      { transform: translate(12vw, 58vh);}
}
@keyframes firefly-6-drift {
    0%, 100% { transform: translate(5vw,53vh);}
    25%      { transform: translate(10vw, 68vh);}
    50%      { transform: translate(1vw, 81vh);}
    75%      { transform: translate(2vw, 88vh);}
}
@keyframes blink {
    0%,36%,64%,100% { content: "OvO";}
    42%, 58%       { content: "ovo";}
    46%, 54%       { content: "-v-";}
}
.eyes::before {
    content: "OvO";
    animation: blink 4s infinite;
}
.eyes {
    position:absolute;
    left:1%;
    top: 0px;
}

@keyframes neon-pulse {
    0%, 100% { opacity: 0.5;}
    50%      { opacity: 1;}
}
@keyframes glitch {
    0%, 76%,92%,  100% { text-shadow: none;}
    70%, 75%       { text-shadow: 2px 0 var(--cyan-neon), -2px 0 var(--pink-neon);}
    93%, 99%        { text-shadow: 2px 2px var(--pink-neon), -2px -2px var(--cyan-neon);}
}



@media(max-width: 1000px) {
    /* main article { */
    /*     margin-left: auto; */
    /*     margin-right: auto; */
    /* } */
    .page-wrapper {
        grid-template-columns: 1fr;
    }
    .page-wrapper .sidebar,
    .page-wrapper main article,
    .page-wrapper main article:first-of-type,
    .page-wrapper main article:nth-of-type(-n+2),
    .page-wrapper .divider,
    .page-wrapper .divider:nth-of-type(1) {
        grid-column: 1 / -1;
        grid-row: auto;
        align-self: stretch;
    }
    .sidebar ul {
        display:flex;
        flex-direction: row;
        justify-content: center;
    }
    .sidebar li {
        margin-right: 10px;
    }
    .sidebar {
        width: 100%;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .firefly-4 {
        display: none;
    }
    .firefly-5 {
        display: none;
    }
    .firefly-6 {
        display: none;
    }
    /* @keyframes firefly-2-drift { */
    /* 0%, 100% { transform: translate(52vw,0);} */
    /* 25%      { transform: translate(520px, -40px);} */
    /* 50%      { transform: translate(680px, 30px);} */
    /* 75%      { transform: translate(810px, 50px);} */
    /* } */
}