body{
    background-image: url('https://i.pinimg.com/736x/04/9f/00/049f008b4be9884c7e70b43d065796e1.jpg');
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

h1 {
    color: white;
    font-size: clamp(50px, 15vw, 130px); /* Responsive font size */
    text-align: center;
    letter-spacing: 4px;
    font-family: 'Special Elite', 'Courier New', Courier, monospace;
    padding: 70px 0 30px 0;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Makes text readable on any background */
}

.main {
    display: flex;
    flex-direction: column; /* I NEED THIS WHOLE SHIT TO BE EXPLAINED */
    gap: 30px;
    align-items: center;
    padding: 20px;
    min-height: auto;
}

/* Hide sidebar gifs on mobile - they take too much space */
.left, .right {
    display: none;
}

/* Show sidebars only on larger screens */
@media (min-width: 1100px) {
    .main {
        display: grid;
        grid-template-columns: 340px 1fr 340px;
        gap: 25px;
        align-items: start; /* WHAT DOES IT MEAN? */
        min-height: 450px;
    }
    
    .left, .right {
    position: sticky;
    top: 20px; /* Distance from top when sticky */
    height: calc(100vh - 40px); /* Make sidebar full height */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 40px;
        
    }
    
    .left {
        max-width: 120px;
        padding-left: 90px;
    }
    
    .right {
        gap: 20px;
        max-width: 140px;
        padding-left: 90px;
    }
    
    .right #guitar {
        width: 100px;
        padding-left: 30px;
    }
}

.frame {
    width: 100%; /* Full width on mobile */
    max-width: 700px; /* But never too wide on desktop */
    margin: 0 auto;
}
.entry-box {
    background: #fff0ad;
    border: 3px solid #fff4c600;
    background-image: url('https://i.pinimg.com/736x/71/9c/a6/719ca63d8cda00d3b566ad0edf3a2248.jpg');
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
   /* box-sizing: border-box;  Include padding in width calculation (MEMORIZE IT)*/
}

.date {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: clamp(16px, 4vw, 18px); /* Slightly smaller on mobile (EXPLAIN) */
    margin: auto;
}

.entry {
    font-family: Nunito;
    font-size: clamp(14px, 3.5vw, 16px); /* Readable text on mobile */
    line-height: 1.6; /* Better readability (EXPLAIN)*/
    word-wrap: break-word; /* Prevent text overflow (EXPLAIN) */
    overflow-wrap: break-word;
}

.entry p {
    margin-bottom: 15px; /* Space between paragraphs */
}

@media (max-width: 480px) {
    .frame {
        padding: 15px;
    }
    
    h1 {
        letter-spacing: 2px;
    }
}