/* --- Common --- */ p, h1, h2, h3, h4, h5, h6, q, a { color: var(--white); } body { background-color: var(--bg-dark); } /* --- Bg --- */ #matrix { position: fixed; z-index: -42; margin: 0; padding: 0; width: 100vw; height: 100vh; } .page.contact { background-color: transparent; } /* --- Text --- */ h1 { align-self: center; } .contact a { text-decoration: none; } @media (min-width: 1025px) { .full-name { position: fixed; right: 1rem; bottom: 1rem; margin: 1rem; } } .full-name { text-align: right; } /* --- Icon --- */ .item-icon { min-width: 24px; max-width: 24px; vertical-align: middle; margin-right: .25rem; } .column .material-symbols-outlined { vertical-align: middle; } .gitlab-icon { transform: scale(1.5) !important; } /* --- Layout --- */ .page { padding: 1rem; } .contact { display: flex; flex-direction: column; } /* --- Columns --- */ .columns { margin: 0 auto; display: grid; grid-template-columns: min(24rem, max(48vh, 20vw)) min(24rem, max(48vh, 20vw)); } .column { background-color: var(--white); margin: 1rem; padding: 2rem; border-radius: 1rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; } .column h2 { margin-bottom: .2rem; margin-top: .2rem; } .column h2, .column>p { /* TODO : Less dark */ color: var(--black); } .column>p .material-symbols-outlined, .column>p .item-icon { transform: translateY(-2px); } .column .title-sep { height: 4px; width: 10%; margin-bottom: .6rem; } .column-code .title-sep, .column-pro .title-sep { background-color: var(--code-primary); } .column-music .title-sep, .column-perso .title-sep { background-color: var(--art-primary); } .column-code a, .column-pro a { color: var(--code-primary); } .column-music a, .column-perso a { color: var(--art-primary); }