.centered { width: 100vw; height: 100vh; display: grid; align-content: center; justify-content: center; justify-items: center; align-items: center; } .top-fade { background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 20%, rgba(0,0,0,0.1) 100%); border-bottom: 5px dashed white; } .tagline-link p { text-decoration: underline 0.15em rgba(255,255,255,0); transition: 300ms; } .tagline-link:hover p { text-decoration: underline 0.15em rgba(255,255,255,1); } .clickable-div { display:block; height: 100%; width: 100%; text-decoration: none; } .list-clickable-div { display: block; width: calc(100% - 10px - 3px); height: auto; text-decoration: underline 0.15em rgba(255,255,255,0); transition: 300ms; border: dashed; border-radius: 5px; background-color: rgba(0,0,0,0.4); margin: 5px; } .list-clickable-div p { margin: 15px 5px; } .list-clickable-div:hover { text-decoration: underline 0.15em rgba(255,255,255,1); background-color: rgba(0,0,0,0.85); } .clickable-header { display: block; text-decoration-color: rgba(255,255,255,0) !important; } .clickable-header h3 { text-decoration: underline 0.15em rgba(255,255,255,0) !important; transition: 300ms; } .clickable-header h3:hover { text-decoration: underline 0.15em rgba(255,255,255,1); } .single-column { grid-template-columns: 1fr !important; } .single-column p { margin-top: -20px; } .soft-background { background: rgba(11,11,12, 0.3); border-radius: 15px; padding: 10px; } .index-item { display: grid; align-content: center; justify-content: center; justify-items: center; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } .articles-box { width: 95vw; height: 80vh; margin: 5px; } .index-column { display: grid; grid-template-rows: 10em 1fr; width: calc(100% - 3em); } @media only screen and (max-width: 768px){ .index-item { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; justify-items: center; } } body { overflow-x: hidden; }