body { padding: 7.5rem; padding-top: 5rem; height: calc(100vh - 5rem); } .logo-container { flex-direction: row; align-items: center; justify-content: flex-start; } .logo { width: 7.5rem; height: 7.5rem; } .logo-text-container { margin-top: 0; margin-left: 1.5rem; border-left: 1px solid var(--color-secondary); padding-left: 1.5rem; } .intro .overline { font-size: 3rem; } .intro .subheader { font-size: 4rem; } .header { font-size: 15rem; letter-spacing: 1.5rem; } .overline[data-button] { display: inline-block; } .overline[data-button]:not(:first-of-type) { margin-left: 1.5rem; } .symptom { width: 100%; max-width: 20rem; height: 20rem; display: inline-flex; margin-bottom: 0.75rem; } .symptom-emoji { font-size: 3.5rem; padding: 0.75rem; } .symptom-name { font-size: 2.5rem; text-align: center; } .symptom-chance { font-size: 2.4rem; text-align: center; } .symptom-chance:before { font-size: 1.5rem; } .symptom-chance:after { font-size: 1.5rem; } .symptom.at-site:first-of-type { border-radius: 0; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; } .symptom.at-site:nth-of-type(3) { border-radius: 0; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; } footer { padding: 5rem 7.5rem; width: calc(100vw - 15rem); margin-left: -7.5rem; } .link-container { font-size: 1.7rem; flex-direction: row; } .link-container > div { flex-direction: column; flex: 1; } .link-container > div:not(:first-of-type) { margin-left: 3rem; margin-top: 0; } .input-popup { height: 10rem; } .input-popup.expanded { height: 55vh; } .loading-bar-container { max-width: 50%; } .tip-container { width: fit-content; max-width: 45rem; } .result-header-container { flex-direction: row; } .result-header-container .symptom-container { width: fit-content; } .result-header-select { margin-top: 0rem; width: fit-content; padding-left: 3rem; border-left: 1px solid var(--color-secondary); } .result-header-select select { width: fit-content; }