@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');



:root {

    --green: #00ff41;

    --black: #000000;

}

:root{

    --green:#00ff41;

    --black:#000000;

    

}



*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



body{

    background:var(--black);

    color:white;

    font-family: "IBM Plex Mono", monospace;

    line-height:1.7;

    padding:20px;

    max-width:900px;

    margin:auto;

}



::selection{

    background:var(--green);

    color:black;

}



a{

    color:white;

}



.logo{

    margin-bottom:40px;

    white-space:pre;

}



.hero{

    margin-top:80px;

}



h1{

    font-size:3rem;

    margin-bottom:20px;

}



.subtitle{

    color:#8affaa;

    margin-bottom:40px;

}



.section{

    margin-top:80px;

}



.block{

    border:1px solid white;

    padding:20px;

    margin-top:20px;

}

.block:hover {

    background-color: rgba(255, 255, 255, 0.02);

    border-color: var(--green);

}





.cursor{

    animation:blink 1s infinite;

}



@keyframes blink{

    50%{

        opacity:0;

    }

}



.footer{

    margin-top:120px;

    color:#5faa5f;

}



.writing-piece {

    border: 1px solid var(--green); /* Bordo verde neon stile terminale */

    padding: 25px;                  /* Spazio interno tra il testo e il bordo */         /* Spazio tra un riquadro e l'altro */

    background-color: rgba(0, 255, 65, 0.08); /* Più visibile */; /* Un leggerissimo riflesso verde sullo sfondo */

    border-radius: 4px;             /* Opzionale: arrotonda leggermente gli angoli */

    transition: all 0.3s ease;

    flex: 1 1 calc(50% - 10px);

    margin-bottom: 0;

}



/* Effetto al passaggio del mouse (opzionale, molto cyberpunk) */

.writing-piece:hover {

    box-shadow: 0 0 15px rgba(0, 255, 65, 0.4);

    border-color: #ffffff;

}



/* Stile per i titoli dentro i riquadri */

.piece-title {

    color: var(--green);

    font-size: 1.5rem;

    margin-bottom: 5px;

}



/* Stile per la data */

.piece-date {

    color: #888;

    font-size: 0.85rem;

    margin-bottom: 15px;

    font-style: italic;

}



/* Spaziatura interna del contenuto */

.piece-content p {

    color: #e0e0e0;

    text-align: justify;

}

.writings-container {

    display: flex;          /* Attiva il layout Flexbox */

    flex-wrap: wrap;        /* Permette ai box di andare a capo se non c'è spazio */

    gap: 20px;              /* Crea lo spazio (margine) tra un riquadro e l'altro */

    justify-content: flex-start; /* Allinea i box a sinistra */

}