# Container with Classes
<style> 
    .para-justify { 
        text-align: justify; 
        font-size:13px;
        line-height: 1.4em;
    }
    .para-threecols { columns: 3;}
    
    .para-center {
        text-align: center;
        width: 100%;
        font-size: 13px;
    }
    .para-center > table {
        margin-left: auto;
        margin-right: auto;
    }
    
    .always-on {
        position: fixed;
        bottom:-182px;
        left: 2%;
        padding: 0px 0px;
        width: 94%;
        overflow: hidden;
        transition: .2s;
        height: 200px;
        box-shadow: 0px 0px 15px 0px #ddd;
        background-color: #fefefe;
        border-radius: 8px 8px 0px 0px;
    }
    .always-on:hover {
        bottom: 0;
        overflow-y: overlay;
        height: 200px;
    }
    .always-on h2 {
        padding-left: 8px;
        position: sticky;
        top: 0px;
        margin: 0;
        width: 120%;
        background-color: #fefefe;
    }
    .always-on-content {
        padding-left: 8px;
        font-size: 13px;
    }
    
    .blockquote {
        background: #aaf255;
        margin: 1.5em 10px;
        padding: 6px 16px;
        border-radius: 24px;
    }
    .quote-right {
        border-bottom-right-radius: 0px
    }
    .quote-left {
        border-bottom-left-radius: 0px
    }
    
    .japanese-r2l {
        writing-mode: vertical-rl;
    }
</style>


## 1. Multi-column Paragraph

::::: para-justify
Mauris eleifend massa elit, vitae bibendum diam consectetur non. In at facilisis odio. Pellentesque et eleifend augue, eu viverra lacus. Cras accumsan mauris a urna feugiat, a faucibus nibh consequat. Duis eget accumsan nisl. 

::: para-threecols

### heading 1
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Suspendisse sit amet magna nec augue iaculis tristique. Nunc gravida vehicula risus nec commodo. 

### heading 2
Nunc et sodales ipsum. Donec egestas tellus turpis, ac aliquet velit aliquet sit amet. Proin quis vulputate sapien. Nulla *sodales turpis lacus*, placerat ultricies sapien molestie eget. Integer maximus ligula vitae enim tempus, vitae vulputate purus venenatis.

| A | B | C |
|---|---|---|
| 1 | 2 | C |
:::

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et consequat enim, eu mattis leo. Ut vitae elementum mi. Phasellus euismod orci ut nibh ullamcorper iaculis. Mauris porttitor nec purus a egestas. Sed ullamcorper mi non justo accumsan aliquet. Nam suscipit mattis elit a porta. 
:::::

::: para-center 
## 2. Center-Aligned Paragraph 
<img src="https://octodex.github.com/images/minion.png" alt="Minion" width=150px >

In ac nunc ut nulla tempus rhoncus.
Vivamus **pellentesque** augue sit amet erat ornare tristique.
Maecenas posuere orci [id posuere](:/524d6874790f4e33a1dd2f5b2463c6cb) consequat.

| A | B | C |
|---|---|---|
| 1 | 2 | C |

Praesent sit amet purus ornare, hendrerit augue quis, congue est.
Vestibulum ac elit quis mi ==suscipit maximus== eu tempor nibh.

:::



:::::: always-on
## 3. Always-On Section

::: always-on-content
### Sed laoreet eros eget
- [ ] Nullam non purus finibus, elementum metus in, fermentum nunc.
- [ ] Duis in ex in purus imperdiet euismod.
- [ ] Vestibulum dignissim nulla sit amet imperdiet varius.
- [ ] Vivamus at massa vel nulla ornare euismod vitae a neque.

### Phasellus luctus orci 
- [ ] Sed eget ipsum iaculis, consectetur tortor sit amet, sodales sem.
- [ ] Nullam nec risus vitae nisi suscipit laoreet a at turpis.
- [ ] Nunc fermentum ex nec semper convallis.
:::
::::::



## 4. Vertical Right-to-Left paragraph

::: japanese-r2l
財リ毎社だかろン目英ラひんク規海どびてせ場購トほゅわ教競攻てドず応７２開的クロス問告フトヤカ対談るイー高日足今フ開紙とごも請者ぜぐドべ天観みうにな工民ムネヱ経乾凍刷往わうづ。高７９識のしけイ倍人もか快毎号いわむ意害剛うむにね疵推テカエヱ覧５２聞策ヌテタホ伝入レユ気9泉ぱゃ提更テトスチ始柏沼ても。属みきん遠話ソモエ容会体モヱムチ優君ひレだ求陣ツミコ法昇ス月理メコオ済目ゅそびら治開レ最無ハオカミ帯介勢ほ。

建タエヒフ政入チ長６図ン月涙校ト止4世コノカセ補健フ溝真マリ禁日イ童就スナハヱ海本検メヒチフ室鉄てぱ吸試康況いせぴゅ。供ケ者７天い関合ラ山社じぎフば倉隊は読初スヱオリ落生たー見弱トリロメ庫風ど英院変州仙ずクる界品かべるク。内虚ろーる舎過まば全際アリネ空外ドぞえに互生ほ争続くリをさ突及経にでざ衝闘７１画柏３２発ヌネヱ観対冬ルリサ彼尽るぐが安多ぱ歴女わきた教超年埋ー。

挙和４０要ぎゆ他地ま治今びらでぎ術申らじ著階ホヤ批惑でイー球１３社児ぼルらか管負喚宴じよき。強ハ応従ムハ点８２景さざおつ月能ネヒニ並戦ヨヲスレ申責ヲテノ仏分イせやゆ舞止よしも応９分経ケ権南ょりす邸国ワスモ副小植ヲ毎座テヌセエ味禁ヌネ原東跡ちーげく。敷ケモ行学じなで芸注ンイやを崎定初がほラぱ急神どもあぞ川広厳う鳥５暮しゆばさ状江質ソテメ新医そぴめど間面にッ動強リシ場景ナハシツ写最案わふぼ。
:::

## 5. Custom container

::: blockquote quote-right para-justify
Curabitur pulvinar lorem eu **nulla posuere blandit**. Curabitur non quam id lacus faucibus tincidunt non vel diam. Mauris vitae mauris eu ipsum eleifend tincidunt. Cras sit amet nunc eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce varius luctus metus, eu hendrerit ante tincidunt in.
:::

::: blockquote quote-left para-justify
Quisque sem sapien, eleifend bibendum fermentum eu, fringilla eu velit. Duis fermentum lectus mauris, nec aliquam tortor aliquet id. Aliquam consequat magna nec nisi fermentum dictum. **Donec** in convallis felis. Sed aliqua mauris odio, sed dapibus dui cursus rutrum. Maecenas pellentesque nibh ante, in sollicitudin est euismod id.
:::