body { width: min(95vw, 52rem); } header > img { height: 15vh; margin: .5rem auto; box-shadow: none; } header > h1, header > p { margin-top: 0; font-family: 'Manrope XLight'; color: var(--text); } header > h1 > span { font: inherit; } nav { display: flex; justify-content: center; flex-wrap: wrap; padding: .5rem; width: 100%; } nav > a { color: var(--text); border-bottom: .05rem solid var(--text); padding: .3rem 1rem; margin: .5rem; font-size: .65rem; text-decoration: none; transition: color .3s, border-bottom .3s, padding .3s; } nav > a:hover { color: var(--primary); border-bottom: .05rem solid var(--primary); } .box { background-color: var(--grey3); border-radius: 1rem; box-shadow: 0 .75rem 1.5rem -0.5rem var(--grey1); font-size: .75rem; padding: 1rem .5rem 1.5rem .5rem; margin: 2rem auto; width: min(180ch, 90%); display: flex; flex-wrap: wrap; justify-content: center; } .box > h1 { text-align: center; width: 100%; font-size: 1.25rem; font-family: 'Manrope Medium', sans-serif; } .box > p, .box > p > a { width: 100%; font-size: .75rem; text-align: center; } .box > p { margin-left: 1rem; margin-right: 1rem; } .card { background-color: var(--grey4); border-radius: 1rem; box-shadow: 0 .5rem 1rem var(--grey2); margin: 1rem; padding: 1rem 1rem 1.25rem 1rem; display: flex; flex-flow: column; align-items: center; font-size: .75rem; width: min(40ch, 90%); } .card > *:first-child { margin-top: 0; } .card > *:last-child { margin-bottom: 0; } .card > h2 { font-size: 1rem; font-family: 'Manrope Light'; } .card > p { font-size: .75rem; margin-bottom: auto; } .card > a { color: var(--primary); background-color: transparent; border: .1rem solid var(--primary); border-radius: .5rem; /* box-shadow: 0 -5rem 20rem transparent; */ margin: 1rem 0 .5rem 0; padding: .5rem 1.5rem; display: block; font-size: .65rem; text-decoration: none transparent; text-align: center; transition: color .3s, background-color .3s, box-shadow .3s; } .card > a:hover, .card > a:focus { color: var(--surface); background-color: var(--primary); /* box-shadow: 0 .25rem 2rem var(--primary); */ } .text-box { margin: 1rem; } .text-box > * { font-size: .75rem; } .separator { height: .1rem; margin: 1rem auto; width: min(35%, 15ch); background-color: var(--primary); } .maintainer { width: min(max-content, 90%); } .contact-options { display: grid; width: 100%; grid-template-columns: max-content auto; align-self: flex-start; } .contact-options > p { font-size: .75rem; margin: .25rem; } .contact-options > p.contact-type { font-size: .75rem; color: var(--accent); } footer { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 15vh auto; padding: 1rem auto; width: min(85vw, 48rem); border-top: .1rem solid var(--accent); } footer > p, footer > p > a { font-size: .65rem; } .love { font-size: .85rem; margin-top: 2rem; } .heart { color: var(--accent2); font-size: 1.15rem; } .footer-header { margin-top: 1.5rem; font-size: .7rem; color: var(--accent); }