body { background-color: #272822; } .container { max-width: 800px; margin: 0 auto; padding: 30px; background-color: #272822; } h1 { font-size: 32px; font-weight: bold; margin-bottom: 10px; color: #f8f8f2; } ul { list-style: none; padding: 0; } li { margin-bottom: 20px; } h2 { font-size: 24px; font-weight: bold; color: #f8f8f2; } p { color: #999999; } a { color: #78dce8; text-decoration: none; } a:hover { color: #e6a96b; } header { display: flex; justify-content: center; align-items: center; } .logo { display: flex; align-items: center; } .logo-img { width: 40px; max-width: 100%; margin-right: 10px; } .logo p { font-size: 32px; color: #999999; margin: 10px; } .logo-name { font-size: 32px; font-weight: bold; color: #999999; margin: 10px; } .logo-link { display: inline-flex; align-items: center; text-decoration: none; } .search-form { display: flex; align-items: center; justify-content: center; } .search-input { padding: 10px; border: none; border-radius: 5px; font-size: 16px; background-color: #f9f5dd; color: #75715e; width: 200px; margin: 10px; } .search-input::placeholder { color: #75715e; } .search-button { padding: 10px 20px; border: none; border-radius: 5px; font-size: 16px; background-color: #D7011D; color: #f8f8f2; cursor: pointer; margin: 10px; } .search-button:hover { background-color: #FF3D5A; } .notification-overlay { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #D7011D; color: #f8f8f2; border: 5px solid #272822; padding: 20px; border-radius: 5px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); animation: fadeIn 0.5s, fadeOut 0.5s 5s forwards; display: none; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .report-button { position: relative; display: flex; text-decoration: none; padding: 10px 20px; border-radius: 5px; color: #999999; border: none; background-color: transparent; margin: 10px; } .sort-button { position: relative; display: inline-flex; text-decoration: none; padding: 10px 20px; border-radius: 5px; color: #999999; border: 1px solid #333333; background-color: transparent; margin: 10px; transition: border 0.3s ease, background-color 0.3s ease; } .sort-button:hover { border: 1px solid #FFD3E0; background-color: #f0f0f007; } .wrapper { position: relative; display: inline-block; text-decoration: none; color: #f8f8f2; background-color: #D7011D; padding: 10px 20px; border: none; border-radius: 5px; margin: 5px; background-color: 0.3s ease; } .wrapper .button-text { display: inline-block; transition: opacity 0.3s ease; font-size: 16px; } .wrapper .button-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #f8f8f2; font-size: 20px; opacity: 0; transition: opacity 0.3s ease; } .wrapper:hover { background-color: #FF3D5A; } .wrapper:hover .button-text { opacity: 0; } .wrapper:hover .button-icon { opacity: 1; font-size: 13px; } .report-button .button-text { display: inline-block; transition: opacity 0.3s ease; opacity: 0; } .report-button .button-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; transition: opacity 0.3s ease; font-size: 25px; opacity: 1; } .report-button:hover .button-text { opacity: 1; } .report-button:hover .button-icon { opacity: 0; } .list-container { display: flex; align-items: center; } .listed-items { border: 1px solid #333333; border-radius: 10px; padding: 20px; margin-bottom: 20px; transition: border 0.3s ease, background-color 0.3s ease; } .listed-items:hover { border: 1px solid #FFD3E0; background-color: #f0f0f007; } /* CSS code for the load more button */ .load-more-button { position: relative; display: inline-block; text-decoration: none; color: #f8f8f2; background-color: #D7011D; padding: 10px 20px; border: none; border-radius: 5px; margin: 5px; background-color: 0.3s ease; } .load-more-button .button-text { display: inline-block; transition: opacity 0.3s ease; font-size: 16px; } .load-more-button .button-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #f8f8f2; font-size: 20px; opacity: 0; transition: opacity 0.3s ease; } .load-more-button:hover { background-color: #FF3D5A; } .load-more-button:hover .button-text { opacity: 0; } .load-more-button:hover .button-icon { opacity: 1; font-size: 13px; } /* CSS code for the scroll button */ .scroll-to-top-button { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; border: none; border-radius: 50%; background-color: #D7011D; color: #f8f8f2; font-size: 20px; text-align: center; line-height: 40px; cursor: pointer; opacity: 0; transition: opacity 0.3s ease, background-color 0.3s ease; z-index: 9999; } .scroll-to-top-button:hover { background-color: #FF3D5A; } .scroll-to-top-button.show { opacity: 1; } .xmr-address { background-color: #f0f0f007; border: 1px solid #333333; border-radius: 10px; padding: 20px; word-wrap: break-word; } /* Mobile Breakpoints */ /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { .search-input { width: 100%; } .search-button { margin-left: 0; } .wrapper, .report-button { font-size: 14px; padding: 10px 15px; } .logo p, .logo-name { font-size: 24px; margin: 10px 5px; } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { .wrapper, .report-button { font-size: 18px; padding: 10px 15px; } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { .wrapper, .report-button { font-size: 20px; } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { .wrapper, .report-button { font-size: 16px; } } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { .wrapper, .report-button { font-size: 14px; } }