Wikipedia:Education program/styles.css

/* * color palette used * orange: #E57E3F; blue: #44aaFF, gray: #646464 */ .wep-wrapper { font-family: sans-serif; background-color: #f4f3f0; color: #646464; margin: 24px auto 0 auto; /* leave 24px top space for the img sticking out */ padding-bottom: 4rem; }

.wep-header img { float: left; margin-top: -24px; }

.wep-banner { padding-top: 90px; }

.wep-welcome { box-sizing: border-box; background-color: #0028a0; border-right: 1px dotted #0028a0; border-left: 1px dotted #0028a0; border-bottom: 1px dotted #0028a0; color: white; font-family: serif; padding: 1rem; } .wep-welcome > div { /* This is for vertical centering the text */ display: flex; justify-content: center; align-items: center; height: 100%; padding: 0 1rem; }

.wep-tagline { margin-top: 2rem; max-width: 250px; text-align: left; } .wep-linkholder { display: flex; }

.wep-linkholder > div { display: flex; flex-direction: column; font-size: 22px; }

.wep-linkholder a > span { color: #646464; /* this gray on gray prolly doesn't pass accesibility criteria */ border-bottom: 1px dotted #e57e3f; font-style: italic; }

.wep-linkholder, .wep-tagline { padding: 0 1rem; }

@media screen and (min-width:720px) { .wep-wrapper { max-width: 1000px; }	.wep-linkholder, .wep-welcome, .wep-tagline { padding: 0 50px; }	.wep-banner { padding-top: 55px; }	.wep-header img { padding-left: 50px; }	.wep-welcome { height: 150px; font-size: 50px; padding-left: 250px; }	.wep-linkholder { justify-content: flex-end; } } @media screen and (max-width:719px) { .wep-header img { width: 100px; }	.wep-welcome > div { font-size: 3rem; text-align: center; } }