117 lines
1.6 KiB
HTML
117 lines
1.6 KiB
HTML
|
<style>
|
||
|
:root {
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
|
||
|
body {
|
||
|
max-width: min(60ch, 100%);
|
||
|
margin: 0 auto;
|
||
|
font-size: 20pt;
|
||
|
line-height: 1.2;
|
||
|
padding: 3rem 0;
|
||
|
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
|
||
|
}
|
||
|
|
||
|
h1, h2 {
|
||
|
font-family: system-ui, sans-serif;
|
||
|
}
|
||
|
header h1 {
|
||
|
text-align: center;
|
||
|
margin-bottom: 3em;
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
margin-top: 3em;
|
||
|
}
|
||
|
|
||
|
.date {
|
||
|
text-align: center;
|
||
|
margin: 8rem 0;
|
||
|
font-size: small;
|
||
|
color: initial;
|
||
|
}
|
||
|
|
||
|
.pc, .dm {
|
||
|
width: 69%;
|
||
|
border: solid 1px wheat;
|
||
|
border-radius: 13px;
|
||
|
padding: 1rem 2rem;
|
||
|
margin-left: 4rem;
|
||
|
position: relative;
|
||
|
background: wheat;
|
||
|
color: black;
|
||
|
margin-top: 5rem;
|
||
|
}
|
||
|
.pc::after {
|
||
|
content: '🤣';
|
||
|
position: absolute;
|
||
|
bottom: 0;
|
||
|
left: -3rem;
|
||
|
/*background: wheat;*/
|
||
|
border-radius: 50%;
|
||
|
width: 2rem;
|
||
|
height: 2rem;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
.pc::before, .dm::before {
|
||
|
content: 'player character';
|
||
|
font-size: smaller;
|
||
|
position: absolute;
|
||
|
top: -2rem;
|
||
|
left: 1rem;
|
||
|
color: gray;
|
||
|
}
|
||
|
.dm {
|
||
|
background: lightgreen;
|
||
|
margin-left: auto;
|
||
|
}
|
||
|
|
||
|
.mhj::before {
|
||
|
content: 'mhj';
|
||
|
}
|
||
|
.stux::before {
|
||
|
content: 'Stux';
|
||
|
}
|
||
|
.stux {
|
||
|
background: pink;
|
||
|
}
|
||
|
.stux::after {
|
||
|
content: '🎉';
|
||
|
}
|
||
|
.dm::before {
|
||
|
content: 'The World';
|
||
|
right: 0;
|
||
|
text-align: right;
|
||
|
}
|
||
|
.krunn::before {
|
||
|
content: 'Krunn';
|
||
|
}
|
||
|
.krunn {
|
||
|
background: lightblue;
|
||
|
}
|
||
|
.krunn::after {
|
||
|
content: '🍖';
|
||
|
}
|
||
|
.glarg::before {
|
||
|
content: 'Glarg';
|
||
|
}
|
||
|
.glarg {
|
||
|
background: whitesmoke;
|
||
|
}
|
||
|
.glarg::after {
|
||
|
content: '🪨';
|
||
|
}
|
||
|
.cremini::before {
|
||
|
content: 'Cremini';
|
||
|
}
|
||
|
.cremini {
|
||
|
background: #FF9;
|
||
|
}
|
||
|
.cremini::after {
|
||
|
content: '🍄';
|
||
|
}
|
||
|
</style>
|
||
|
|