body{ background-image: url("https://smile4anything.neocities.org/backgrounds/pinktexture.jpg"); font-size: 16px; font-family: 'PT Serif', serif; font-style: normal; font-weight: 400; color: #000; margin: 0; padding: 0; -text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; } a:link {text-decoration: none; color: #5b1829;} a:visited {text-decoration: none; color: #5b1829;} a:hover {text-decoration: underline; color: #5b1829;} a:active {text-decoration: none; color: #5b1829;} img { vertical-align: middle; max-width:100%; max-height:100% } a img { border: 0px; } table, td { vertical-align: top; border-spacing: 0px; border-collapse: collapse; padding: 2px 2px 2px 2px; } ul { list-style-type: none; margin: 0; padding: 10px 20px 6px 20px; width: auto; } .ul { list-style-type: none; margin: 0; padding: 0px; width: auto; } li a:link { display: block; background-color: #5b1829; color:#fff; text-decoration: none; padding: 5px 5px 5px 5px; margin-bottom: 6px; } li a:visited { display: block; background-color: #5b1829; color:#fff; text-decoration: none; padding: 5px 5px 5px 5px; margin-bottom: 6px; } li a:hover { display: block; background-color: #b76e80; color:#fff; text-decoration: underline; padding: 5px 5px 5px 5px; margin-bottom: 6px; } li a:active { display: block; background-color: #5b1829; color:#fff; text-decoration: none; padding: 5px 5px 5px 5px; margin-bottom: 6px; } .dropdown { position: relative; display: none; width: 100%; } .wrapper{ max-width: 1100px; display: flex; flex-direction: column; margin-left: auto; margin-right: auto; margin-top: 73px; margin-bottom: 73px; } .header, .footer{ height: auto; background: #ffffff; color: #000; } /* Cherub GIF Animation */ .cherub-link { position: absolute; top: 20px; right: 30px; z-index: 100; animation: floatCherub 4s infinite ease-in-out; } .cherub-link img { width: 150px; height: auto; transition: transform 0.3s, filter 0.3s; } .cherub-link:hover img { transform: scale(2.1); filter: drop-shadow(0 0 10px pink) drop-shadow(0 0 20px pink); } /* New and Enhanced Animations */ @keyframes sparkle { 0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff69b4, 0 0 30px #ff69b4; } 50% { text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4, 0 0 40px #ff69b4; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slide { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } @keyframes headerFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @keyframes floatCherub { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } }

.content { display: flex; flex: 1; background: #ffffff; color: #000; } .columns { display: grid; grid-template-columns: 1fr; /* Make the main content take up the full width */ width: 100%; } .main{ flex: 1; order: 2; background: #ffffff; } /* On screens that are 600px or less, stack the columns */ @media screen and (max-width: 600px) { .columns { grid-template-columns: 1fr; padding: 0px; } } .lace-top, .lace-bottom { background-image: url('lacefr.png'); width: 100vw; height: 73px; position: fixed; z-index: 3; background-repeat: repeat-x; } .lace-top { top: 0; } .lace-bottom { bottom: 0; } h1, h2, h3 { margin: 0; padding: 0; font-family: 'bookman'; } .image-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 15px; /* Add spacing between images */ margin-top: 20px; } .image-wrapper { text-align: center; /* Center the caption */ position: relative; overflow: hidden; } .image-grid img { width: 100%; height: 250px; /* Set a fixed height for images */ border-radius: 5px; /* Optional: adds rounded corners */ object-fit: cover; /* Crop images to fit the container */ transition: opacity 0.3s ease; } .caption { font-size: 14px; font-family: 'bookman', serif; font-weight: normal; } @media screen and (max-width: 600px) { .image-grid { grid-template-columns: 1fr; /* Stack the images vertically on smaller screens */ } } .hover-text { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 10px; border-radius: 8px; color: black; margin: 0; opacity: 0; transition: opacity 0.3s ease; /* Smooth transition for the hover effect */ } .image-wrapper:hover img { opacity: 0.1; /* Makes image more transparent on hover */ } .image-wrapper:hover .hover-text { opacity: 1; /* Shows the text when hovering over the image */ } .posts-container { margin-top: 10px; padding: 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 5px; } .category-posts { list-style: none; padding: 0; margin: 0; } .category-posts li { margin: 5px 0; } .category-posts a { color: #5b1829; text-decoration: none; font-size: 0.9em; display: block; padding: 5px; transition: background-color 0.3s ease; } .category-posts a:hover { background-color: rgba(91, 24, 41, 0.1); text-decoration: none; }