header > div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; align-content: stretch; } header > div h1 { margin-block-start: 0em; margin-block-end: 0em; font-weight: normal; font-size: var(--font-size-main); line-height: var(--font-size-main); } header > div description { font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif; font-size: var(--font-size-description); line-height: var(--lineheight-description); color: var(--font-color-lighter); } header > div description > * { max-width: 32px; max-width: 32px; } header { display: inline-flex; align-items: flex-start; flex-direction: column; justify-content: center; backdrop-filter: blur(15px); background-color: rgba(255, 255, 255, 0.5); border-radius: 15px; border: 10px; padding: 20px 40px; } header > img { margin-right: 1rem; margin-bottom: 1rem; } @media screen and (min-width: 768px) { header > * { display: inline-block; } header { flex-direction: row; align-items: center; } } /* @media screen and (max-width: 480px) { } */ @media (prefers-color-scheme: dark) { header { background-color: rgba(0, 0, 0, 0.5); } }