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

body{

background-color:#050505;

background-image:
linear-gradient(rgba(0,0,0,0.82), rgba(0,0,0,0.82)),
url("../images/blog_texture.png");

background-size:1400px;

background-repeat:repeat;

color:#f1f1f1;

font-family:Courier New, monospace;

overflow-x:hidden;
}

.noise{
position:fixed;
inset:0;
opacity:0.08;
pointer-events:none;
background-image:
repeating-radial-gradient(circle at 0 0,
transparent 0,
#ffffff 1px,
transparent 2px);
}

.topbar{

padding:30px;

display:flex;

justify-content:space-between;

align-items:center;

border-bottom:1px solid #333;
}

.topbar h1{

font-size:1rem;

letter-spacing:3px;
}

.back-link{

color:white;

text-decoration:none;

border-bottom:1px solid white;
}

.entry-wrapper{

display:flex;

justify-content:center;

padding:60px 20px;
}

.entry{

width:min(900px, 100%);

background:rgba(0,0,0,0.55);

backdrop-filter:blur(2px);

border:1px solid #333;

padding:40px;

transform:rotate(-0.5deg);

box-shadow:
0 0 40px rgba(0,0,0,0.4);
}

.date{

opacity:0.6;

margin-bottom:20px;

letter-spacing:2px;
}

.entry h2{

font-size:2.5rem;

margin-bottom:30px;

line-height:1.1;
}

.hero-image{

width:100%;

margin-bottom:40px;

border:2px solid #777;
}

.content{

display:flex;

flex-direction:column;

gap:25px;

line-height:1.8;

font-size:1rem;
}

.content ul{

padding-left:20px;
}

pre{

background:#111;

padding:20px;

overflow:auto;

border:1px solid #333;
}

@media(max-width:700px){

.entry{

padding:25px;
}

.entry h2{

font-size:1.8rem;
}

}