body {
    background: solid(120deg, #000000, #000000);
    font-family: "Verdana", sans-serif;
    margin: 0;
}

/* CONTAINER */
#container {
    width: 1000px;
    margin: auto;
    background: #C1E1C1;
    border: 5px dashed green;
}

/* HEADER */
#header {
    height: 250px;
    background-image: url("https://i.ibb.co/nxHtD5P/IMG-8109.gif");
    background-size: cover;
    background-position: center;
    border-bottom: 5px dashed hotpink;
}

/* NAVBAR */
#navbar {
    text-align: center;
    background: #D9FFD9;
    border-bottom: 2px solid #D9FFD9;
    padding: 10px;
}
#navbar a {
    margin: 0 12px;
    text-decoration: none;
    color: hotpink;
    font-weight: bold;
}
#navbar a:hover { text-decoration: underline; }

/* LAYOUT */
#layout { display: flex; padding: 20px; gap: 20px; }

/* COLUMNS */
#left, #right { width: 200px; }

/* MAIN CENTER */
#main { flex: 1; }

/* BOXES */
.box {
    background: #D9FFD9;
    border: 2px dashed green;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
}

/* SCROLL BOX */
.scroll-box {
    display: flex;
    overflow-x: auto;
    gap: 10px;
}
.scroll-box img { width: 100px; height: 100px; object-fit: cover; border: 2px dashed hotpink; }

/* ART GALLERY */
.art-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.art-gallery img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border: 2px dashed hotpink;
    border-radius: 5px;
    transition: transform 0.2s;
}
.art-gallery img:hover { transform: scale(1.05) rotate(-3deg); }

/* BLOG POSTS */
.blog-posts { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.post { background: #E8FFE8; border: 2px dashed lightgreen; padding: 15px; border-radius: 8px; }
.post img { width: 200px; height: 200px; object-fit: cover; margin-top: 10px; }

/* FOOTER */
#footer { text-align: center; padding: 15px; background: #D9FFD9; border-top: 2px solid #d6c4e6; }

/* RAIN ANIMATION */
.rain-layer { position: fixed; top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; }
.rain-layer img { position: absolute; animation: fall linear infinite; }
@keyframes fall { 0% { top: -100px; } 100% { top: 110%; } }

/* FLOATING BLINKIES */
.floating-blinkies img {
    position: absolute;
    animation: float 10s linear infinite;
    width: 50px;
}
@keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(50px) rotate(15deg); } 100% { transform: translateY(0) rotate(0deg); } }

/* MARQUEES */
marquee { font-weight: bold; color: hotpink; }