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. 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 {

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

background: #000000;

border-radius: 50px; border: solid 3px white; }

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: 90%; } } @media (min-width: 991px) { .box { width: 50%; } } .box { border: solid 1px #999999; text-align: left; padding: 30px; margin-bottom: 15px; }