/* no root no domyślne rzeczy strony co nie? */
:root{
    --bg:#d8f5b2;
    --panel:#f1ffe0;
    --green:#556B2F;
    --green-dark:#556B2F;
    --text:#556B2F;
    --border:#65b32e;
}



*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/* domyślne rzeczy twojego body w html*/

body{
    background:
    linear-gradient(
        180deg,
        #d8f5b2,
        #c4e89d
    );

    color:var(--text);
    font-family:'VT323', monospace;
    min-height:100vh;
}


/*te takie waves co są jako tło*/
.noise{
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.04;
    background-image:
    repeating-radial-gradient(
    circle,
    white 0px,
    transparent 1px,
    transparent 3px
    );
}
/*nagłówek*/
header{
    text-align:center;
    padding:2rem;
}
/*te zdjęcia na górze, myślałam żeby to były puszki po energolach*/
.monster-shelf{
    display:flex;
    justify-content:center;
    gap:1rem;
    margin-bottom:2rem;
}

.monster-shelf img{
    height:90px;
    transition:.3s;
}

.monster-shelf img:hover{
    transform:rotate(-8deg);
}
/*h1 to jest rodzaj nagłówka, z resztą wiesz pewnie*/
h1{
    font-family:'Rubik Mono One', sans-serif;
    font-size:4rem;
    color:#556B2F;
  
}
/*intuicyjnie, podtytuł*/
.subtitle{
    margin-top:.5rem;
    font-size:1.5rem;
    color:#4B5320;
}
/*panel nawigacji, home, art, te rzeczy*/
nav{
    margin-top:2rem;
    display:flex;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
}

nav a{
    color:#4A5D23;
    text-decoration:none;
    border:2px solid #8FBC8B;
    padding:.6rem 1rem;
    background:#8FBC8B;
    transition:.2s;
}

nav a:hover{
    transform:rotate(-2deg) scale(1.05);
    box-shadow:0 0 20px #D0F0C0;
}
/*główna część html*/
main{
    width:min(1100px,90%);
    margin:auto;
}
/*status card no to intuicyjnie*/
.status-card{
   background:#f8ffe9; 
   border:3px solid #6aa532;
   box-shadow: 4px 4px 0 rgba(0,0,0,.12);
    
    
}

.status-card h2{
    margin-bottom:1rem;
}
/*moodbar*/
.bar{
    width:50%;
    height:25px;
    border:2px solid #D0F0C0;
    margin:1rem 0;
}

.fill{
    width:20%; /*no i jakby wiesz, tyle ile tu będzie 0%-100% to twoja energia haha*/
    height:100%;
    background:#4A5D23;
}
/*intuicyjnie*/
.blog-preview{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:1.5rem;
    margin-bottom:3rem;
}
/*ramki*/
.note{
   background:#f8ffe9; 
   border:3px solid #6aa532;
   box-shadow: 4px 4px 0 rgba(0,0,0,.12);
}

.note:nth-child(odd){
    transform:rotate(-1deg);
}

.note:nth-child(even){
    transform:rotate(1deg);
}
/*klasa na playlisty*/
.playlists{
    margin-bottom:3rem;
}

.playlists h2{
    margin-bottom:2rem;
}
/*poszczególne kafelki z playlistami*/
.cassette-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.5rem;
}

.cassette{
    background:#f8ffe9; 
    border:3px solid #6aa532;
    box-shadow: 4px 4px 0 rgba(0,0,0,.12);
    transition:.3s;
}
/*animacja jak najeżdżasz na kafelek*/
.cassette:hover{
    transform:
    rotate(2deg)
    scale(1.05);
}

.cassette h3{
    margin-bottom:1rem;
    color:var(--green);
}
/*posty*/


.posts{
    margin: 3rem 0;
}

.section-title{
    margin-bottom: 1rem;
    font-size: 1.8rem;
    color: #3d5f1a;
}

/* post */
.post{
    background: #f8ffe9;
    border: 3px solid #6aa532;
    box-shadow: 4px 4px 0 rgba(0,0,0,.12);

    padding: 1.2rem;
    margin-bottom: 1.5rem;

    transform: rotate(-0.5deg);
    transition: 0.2s;
}


.post:nth-child(even){
    transform: rotate(0.7deg);
}

.post:hover{
    transform: scale(1.02) rotate(-0.2deg);
}

/* metadata  */
.post-meta{
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

/* tituł */
.post-title{
    font-family: "Rubik Mono One", sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0.7rem;
    color: #3c8d0d;
}

/* tekst */
.post p{
    line-height: 1.3;
}


.post.preview{
    cursor: pointer;
    position: relative;
}

/* link reset */
.post-link{
    text-decoration: none;
    color: inherit;
}

/* hover  */
.post.preview:hover{
    transform: scale(1.02) rotate(-0.2deg);
    box-shadow: 6px 6px 0 rgba(0,0,0,.18);
}

/* no read more no */
.read-more{
    margin-top: 0.8rem;
    font-size: 0.9rem;
    opacity: 0.8;
    color: #2f6b12;
}

/* glow od tego readmore*/
.read-more:hover{
    text-shadow: 0 0 8px rgba(60,141,13,0.4);
}

/*przycisk do cofania*/
.back-button{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #f8ffe9;
    border: 3px solid #6aa532;
    padding: 0.5rem 1rem;
    
    
}
.back-button:hover{
    transform:rotate(-2deg) scale(1.05);
    box-shadow:0 0 20px #6aa532;
}
.a-back-button{
    margin-top: 0.8rem;
    font-size: 0.9rem;
    opacity: 0.8;
    color: #2f6b12;
    text-decoration: none
  }


/*stopka*/
footer{
    margin-top:4rem;
    text-align:center;
    color:#4B5320;
    padding:2rem;
}