@media only screen and (min-device-width: 600px) {
.allie-title {
font-size: 5.4em;
font-family: 'Segoe UI';
color: #fff;
padding: 75px;
background-image: radial-gradient(circle at 100% 100%, transparent 2px, #AA00FF 2px, #AA00FF 4px, transparent 4px),
linear-gradient(to right, #AA00FF, #0091EA),
radial-gradient(circle at 0% 100%, transparent 2px, #0091EA 2px, #0091EA 4px, transparent 4px),
linear-gradient(to bottom, #0091EA, #64DD17),
radial-gradient(circle at 0% 0%, transparent 2px, #64DD17 2px, #64DD17 4px, transparent 4px),
linear-gradient(to left, #64DD17, #FF6D00),
radial-gradient(circle at 100% 0%, transparent 2px, #FF6D00 2px, #FF6D00 4px, transparent 4px),
linear-gradient(to top, #FF6D00, #AA00FF);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
}
@media only screen and (max-device-width: 600px) {
.allie-title {
font-size: 2.4em;
color: white;
font-family: 'Segoe UI';
background-color: #d32;
padding: 45px;
}
}
/* from https://stackoverflow.com/a/38352601 */
.allie-aw-title {
text-align: center;
font-weight: bold;
position: relative;
padding: 8px 8px 32px 8px;
background-color: #36c;
color: #fff;
font-size: 343%;
}
.allie-aw-title:after {
background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
background-repeat: repeat-x;
background-size: 32px 32px;
content: " ";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 32px;
}
/* atr https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l */
* {
font-family: Ubuntu;
border-radius: 2px;
}
.mw-editsection {
display: none;
}
.mw-collapsible-text {
color: #fff;
}
h2, h3 {
padding: .6rem;
color: #fff;
background:#2a4b8d;
font-weight: bold;
}
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav {
padding-top: 1em;
display: flex;
justify-content: center;
}
.nav ul {
list-style: none;
background-color: #262626;
text-align: center;
width: 50%;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
}
.nav a {
text-decoration: none;
color: #fff !important;
display: block;
}
.nav li:hover {
background-color: #3366CC;
transition: .3s background-color;
}
/*
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
*/
@media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}