body { background-color: #121212; color: #ffffff; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; } .container { flex: 1; display: flex; justify-content: center; align-items: center; padding-top: 60px; /* Space for header */ } .logo-grid { display: grid; gap: 20px; padding: 20px; width: 100%; max-width: 1200px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .logo-tile { position: relative; padding: 20px; background-color: #1e1e1e; border-radius: 15px; text-align: left; display: flex; align-items: center; justify-content: space-between; /* Ensure elements are spaced */ transition: transform 0.3s ease-in-out; text-decoration: none; color: inherit; overflow: hidden; } .logo-tile::before { content: ''; position: absolute; top: 0; right: 0; width: 90px; height: 100%; background-image: url('https://dmaslsummit.com/wp-content/uploads/dmasl2.png'); background-size: cover; background-position: center; opacity: 0.05; border-radius: 0 15px 0 15px; z-index: 0; } .logo-tile:hover, .logo-tile:focus, .logo-tile:active { transform: scale(1.05); outline: none; } .logo-tile img { border-radius: 15px; width: 50px; height: 50px; object-fit: cover; transition: transform 0.3s ease-in-out; z-index: 1; } .title-description { z-index: 1; position: relative; margin-right: 20px; /* Ensure space between title and logo */ } .title-description h2 { margin: 0; font-size: 1.25rem; /* Adjusted font size */ transition: color 0.3s ease-in-out; } .title-description h3 { margin: 0; font-size: 1rem; /* Font size for subtitle */ color: #aaaaaa; transition: color 0.3s ease-in-out; } .title-description p { margin: 0; font-size: 0.6rem; /* Adjusted font size for description */ transition: color 0.3s ease-in-out; } .title-description:hover h2, .title-description:hover h3, .title-description:hover p, .logo-tile:hover h2, .logo-tile:hover h3, .logo-tile:hover p { color: #bbbbbb; } .title-description:active h2, .title-description:active h3, .title-description:active p, .logo-tile:active h2, .logo-tile:active h3, .logo-tile:active p { color: #888888; } footer { text-align: center; padding: 20px; background-color: #1e1e1e; margin-top: auto; } a { color: #ffffff; text-decoration: none; } .header { position: fixed; top: 0; width: 100%; background-color: #1e1e1e; padding: 10px; z-index: 10; } .navbar-light .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.75); } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:active { color: #ffffff; } .navbar-light .navbar-brand { color: #ffffff; } .navbar-toggler { background-color: rgba(255, 255, 255, 0.75); }