.post-icons { display: none; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: oklch(0.205 0 0); /* Background color as requested */ color: white; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh; padding-top: 20px; } /* Logo space (Rectangular) */ .logo { width: 160px; height: 150px; background-image: url('inline-font1_1'); background-size: contain; background-repeat: no-repeat; background-position: center; margin-bottom: 20px; position: absolute; /* Position the logo absolutely */ left: 0px; /* Adjust the distance from the left edge */ top: 20px; /* Adjust the distance from the top edge */ } /* Search Box */ .search-box { margin-top: 0px; width: 800px; padding: 15px; background-color: #333; border: 2px solid #00aaff; /* Add border with blue color */ border: none; border-radius: 5px; color: white; font-size: 18px; } .search-box:focus { outline: none; border: 2px solid #00aaff; } /* Heading */ .heading { font-size: 20px; margin-bottom: 10px; position: relative; top: 0px; text-align: left; width: 1000px; padding-left: 100px; color: #ccc; } /* GO HOMEPAGE Button */ .go-homebox { padding: 10px 20px; background-color: #333; border: 2px solid #00aaff; /* Add border with blue color */ border-radius: 5px; font-size: 18px; color: white; cursor: pointer; margin-top: 20px; width: 800px; } .go-homebox span { margin-right: 10px; } .go-homebox:hover { background-color: #444; } /* Message */ .message { font-size: 16px; color: #ccc; width: 80%; /* Use a percentage for responsive design */ max-width: 1000px; /* Optional: Limit the maximum width */ text-align: center; /* Center-align the text inside the box */ padding: 10px; position: absolute; /* Position it absolutely on the page */ top: 27%; /* Adjust this value to position it lower */ left: 50%; /* Move it to the center horizontally */ transform: translateX(-50%); /* Adjust to perfectly center it horizontally */ } .article { margin-top: 20px; /* Adjust the space above the article */ font-size: 18px; color: #fff; width: 80%; max-width: 900px; text-align: center; padding: 20px; border-radius: 0; box-shadow: none; background: none; top: 70%; /* Move it to the center vertically */ left: 50%; /* Move it to the center horizontally */ display: flex; /* Enable flexbox */ flex-direction: column; /* Stack elements vertically */ justify-content: center; /* Center content vertically */ align-items: center; /* Center content horizontally */ text-align: center; /* Ensure text is centered */ } /* Heading 1 (h1) */ .article h1 { font-size: 36px; color: #00aaff; margin-bottom: 20px; } /* Heading 2 (h2) */ .article h2 { font-size: 30px; color: #00aaff; margin-bottom: 18px; } /* Heading 3 (h3) */ .article h3 { font-size: 26px; margin-bottom: 15px; color: #00aaff; /* Highlighted title */ } /* Paragraph (p) */ .article p { font-size: 18px; line-height: 1.6; text-align: justify; /* Justify the text for better readability */ margin-bottom: 20px; } /* Unordered List (ul) */ .article ul { list-style-type: disc; margin-left: 20px; margin-bottom: 20px; } /* Ordered List (ol) */ .article ol { list-style-type: decimal; margin-left: 20px; margin-bottom: 20px; } /* List Items (li) */ .article li { font-size: 18px; margin-bottom: 10px; } /* Strong (strong) */ .article strong { font-weight: bold; color: #00aaff; /* Highlight strong text in blue */ } /* Emphasized (em) */ .article em { font-style: italic; color: #ccc; /* Slightly different color for emphasized text */ } /* Responsive design for mobile */ @media screen and (max-width: 768px) { /* Hide the search box on mobile */ .search-box { display: none; /* Hide the search box */ } /* Hide the heading on mobile */ .heading { display: none; /* Completely hide the heading */ } /* Hide the logo on mobile */ .logo { display: none; /* Hide the logo */ } /* Adjust the size of the home button */ .go-homebox { width: 60%; /* Make the home box smaller */ margin: 10px auto; padding: 12px; font-size: 16px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* Adjust the article width */ .article { width: 90%; margin-top: 30px; } .poster { width: 80%; max-width: 400px; margin-top: 20px; } } /* For smaller mobile screens */ @media screen and (max-width: 480px) { /* Further reduce elements for tiny screens */ .logo { width: 100px; height: 100px; } .poster { width: 90%; /* Ensure poster still fits */ max-width: 350px; } }