/* --- Utils --- */ .flex-row { display: flex; flex-direction: row; align-items: center; justify-content: space-around; } .flex-expand { flex-grow: 1; } /* --- Common --- */ body { overflow-y: hidden; background-color: var(--bg-dark); } /* --- Home --- */ .page-home { display: flex; flex-direction: row; justify-content: stretch; } .home-buttons { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-around; } .button { margin: 0; border-radius: 50vh; padding: 16px 32px; min-width: 4rem; } .home-button-link { text-decoration: none; } .button p { margin: 0; padding: 0; text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--black); } .gitlab-button { bottom: 1rem; left: 1rem; position: fixed; z-index: 42; } .gitlab-button img { padding: 0; margin: 0; width: 32px; transform: scale(1.5); transition: all 150ms; } .gitlab-button:hover img { transform: scale(2); } .contact-button { background-color: var(--white); } /* LHS */ #matrix { position: absolute; z-index: -42; min-width: 54vw; max-width: 54vw; height: 100vh; } .home-lhs { min-width: 58vw; max-width: 58vw; display: flex; flex-direction: column; align-items: center; justify-content: center; /* background-color: var(--bg-dark); */ padding: 3rem; box-sizing: border-box; } .profile-picture { width: 30vh; height: 30vh; border-radius: 50%; margin-bottom: 3rem; } .home-lhs h1 { font-size: 2.5rem; text-align: center; } .home-lhs h2 { font-size: 1.5rem; text-align: center; } /* Deco */ .home-deco-wrapper { position: relative; z-index: 100; } .home-deco { position: absolute; display: flex; flex-direction: column; height: 100vh; left: -6.75vh; } .home-deco > div { width: 12.5vh; height: 12.5vh; border-radius: 50%; } .home-deco > div:nth-child(2n) { background-color: var(--bg-dark); } .home-deco > div:nth-child(2n + 1) { background-color: var(--white-surface); } /* RHS */ .home-rhs { flex-grow: 1; display: flex; flex-direction: column; padding-left: 5rem; padding-right: 2.5rem; box-sizing: border-box; background-color: var(--white-surface); } .home-section { height: 50%; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; padding: 2rem; box-sizing: border-box; border-radius: 1rem; box-shadow: 0 8px 12px rgba(0, 0, 0, .12); } .home-section > p { font-size: 1rem; } .home-section > h2 { font-size: 1.618rem; } .home-lhs > p, .home-lhs > h2, .home-lhs > h1, .home-code .top-section > p, .home-code .top-section > h2 { color: var(--white); } /* Code */ .home-code { margin-top: 2rem; margin-bottom: 1rem; background-color: var(--code-primary); } .home-quote { text-align: center; } .home-code .button { background-color: var(--white); } /* Sentience */ .home-button-link .button-sentience { background-color: #FF6E40; animation: transition-up 500ms ease; animation-fill-mode: backwards; } .button-sentience > p { color: var(--white); } /* Art */ .home-art { margin-top: 1rem; margin-bottom: 2rem; background-color: var(--art-primary-container); } .home-art p, .home-art h2 { color: var(--black); } .home-art .button { background-color: var(--art-primary); } .home-art .button p { color: var(--white); }