David/Style.css

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap'); .head { font-weight: bolder; font-size: 2em; }

.subhead { font-weight: bold; font-size: 1.5em; }

1. mainpage {

position: relative; width: calc(100% - 20px); padding: 10px; background: #ffffff; text: #000000;

font-family: Sora, Helvetica, Arial, sans; }

1. mainpage .mw-headline {

font-family: Sora, Helvetica, Arial, sans; }

1. header {

position: relative; top: 0; height: 300px; width: 100%; background-color: hsl(2, 57%, 40%); background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px); filter: grayscale(50%); }

1. avatar-wrapper {

position: relative; height: 110px; width: 110px; left: 50%; top: -70px; transform: translate(-50%, 0); }

1. avatar {

height: 100px; width: 100px; border-radius: 50px; border: solid 3px white; }

1. avatar-wrapper img {

position: absolute; top: 0; left: 0; z-index: -1; transform: translate(-2px, -5px) scale(.95); clip-path: circle(50% at 50% 50%); }

1. name {

position: relative; top: -60px; left: 50%; transform: translate(-50%, 0); width: 100%; background: #ffffff; text: #000000;

text-align: center; }

1. name .main {

font-weight: bold; font-size: 1.6em; }

1. name .sub {

color: #666666; font-weight: lighter; }

1. body {

display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; margin-top: -40px; }

@media (min-width: 991px) { #membership { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: space-evenly; } #membership .box { max-width: 25%; margin-right: 0; } }

@media (max-width: 990px) { #membership { display: flex; flex-direction: column; align-items: center; }} }

1. membership {

width: 100%; }

1. membership .box {

text-align: center; }

1. membership .box .icon {

height: 100px; width: 100px; margin: 0 auto; background-color: #999999; }

1. membership .box ul {

margin: 0; }

1. membership .box ul li {

list-style-type: none; list-style-image: none; }

@media (max-width: 990px) { .box { width: 75%; } } @media (min-width: 991px) { .box { width: 50%; } } .box { border: solid 1px #999999; text-align: left; padding: 30px; margin-bottom: 15px; }