@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap'); html, body { min-height: 100vh; margin: 0; padding: 0; font-family: 'Inter', sans-serif; } body { /* Background image is now set dynamically by the PHP/CSS configuration in about.php */ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; width: 100%; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; overflow-x: hidden; } #firstcontainer { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 90%; max-width: 900px; padding-bottom: 4vh; } #profile-image-container { display: flex; justify-content: center; position: relative; width: 100%; height: 40vh; opacity: 0; padding: 0; margin: 0; z-index: 2; animation: fadeIn 2s ease-out forwards; overflow: hidden; animation-delay: 1s; } #profile-image { object-fit: contain; display: block; width: 100%; height: 100%; margin: 0; padding: 0; } #main_container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; box-sizing: border-box; /* Glass effect styling */ background-color: rgba(255, 255, 255, 0.48); /* Transparent aliceblue */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.255); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 3vh 4vw; color: #000000; z-index: 1; animation: fadeIn 2s ease-out forwards; } #main_container p { font-size: 2.2vh; line-height: 1.1; font-weight: 400; text-align: justify; } #about-paragraph-1 { animation: slideFromBottom 1s ease-out forwards; animation-delay: 0.2s; opacity: 0; animation-fill-mode: forwards; } #about-paragraph-2 { animation: slideFromBottom 1s ease-out forwards; animation-delay: 0.5s; opacity: 0; animation-fill-mode: forwards; } #about-paragraph-3 { animation: slideFromBottom 1s ease-out forwards; animation-delay: 0.8s; opacity: 0; animation-fill-mode: forwards; } #about-paragraph-4 { animation: slideFromBottom 1s ease-out forwards; animation-delay: 1.1s; opacity: 0; animation-fill-mode: forwards; } #about-paragraph-5 { animation: slideFromBottom 1s ease-out forwards; animation-delay: 1.4s; opacity: 0; animation-fill-mode: forwards; } .about-paragraph { margin-bottom: 1.5vh; margin-top: 1vh; font-size: 2vh; line-height: 1.2; font-weight: 400; text-align: justify; } #about-paragraph-4 { margin-bottom: 1vh; } /* Animation keyframes */ @keyframes slideFromTop { 0% { transform: translateY(-150px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes slideFromBottom { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } #top_buttons { display: flex; flex-direction: row; width: 90%; max-width: 1200px; justify-content: space-between; align-items: center; height: 12vh;/*---------------------------------------------main div 1---------------------------------------------*/ } #homeBtn{ font-family: 'Bebas Neue', cursive; color: rgb(211, 211, 211); border-radius: 50%; transition: transform 0.7s; } #homeBtn img { height: 3.3vh; } #homeBtn:hover{ transform: scale(1.3); cursor: pointer; } #backBtn{ font-family: 'Bebas Neue', cursive; color: rgb(211, 211, 211); border-radius: 50%; transition: transform 0.7s; } #backBtn img { height: 2.5vh; } #backBtn:hover{ transform: scale(1.3); cursor: pointer; } .site-footer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0; margin-top: 2.2vh; margin-bottom: 1vh; padding: 7px 18px; border-radius: 6px; /* Silver heraldic layered background */ background: repeating-linear-gradient( 45deg, transparent, transparent 5px, rgba(255,255,255,0.04) 5px, rgba(255,255,255,0.04) 6px ), linear-gradient(160deg, #2e2e2e 0%, #1a1a1a 45%, #272727 100%); border: 1px solid #5a5a5a; border-top-color: #888; border-bottom-color: #333; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 -1px 0 rgba(0,0,0,0.4) inset, 0 3px 10px rgba(0,0,0,0.5); font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.5px; } .site-footer-link { color: #c8c8c8; text-decoration: none; margin: 0 8px; padding: 2px 0; font-variant: small-caps; letter-spacing: 0.8px; transition: color 0.2s ease, transform 0.2s ease; } .site-footer-link:hover { color: #f0f0f0; transform: translateY(-1px); } .site-footer-link:focus-visible { outline: 1px solid #999; outline-offset: 3px; border-radius: 2px; } .site-footer-link.is-active { color: #e8e8e8; font-weight: 600; } .site-footer-link:not(:last-child)::after { content: '✦'; color: #6a6a6a; font-size: 7px; margin-left: 16px; vertical-align: middle; position: relative; top: -1px; }