[html]

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400i|Cormorant+Garamond:400i&display=swap&subset=cyrillic" rel="stylesheet">
<style>
.main-container {
    width: calc(100% - 20px);
    height: 980px;
    margin: 10px;
    border: 2px solid green;
    border-radius: 8px;
    background-image: url("https://d.wattpad.com/story_parts/716932023/images/159379b6d8a82421624358905183.jpg");
    background-position-x: -710px;
    background-position-y: -100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: inset 0 0 16px 2px green, 0 0 6px 2px green;
}

.header-container {
    display: flex;
    flex-direction: column;
    margin: 32px;
}

.players {
    margin-top: 32px;
}

.body-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.body-container .body {
    color: whitesmoke;
    background: #00000088;
    border-radius: 8px;
    padding: 12px;
    margin: 32px;
    font-size: 16px !important;
    font-family: 'PT Sans', sans-serif;
}

h1 {
    color: darkgreen;
    font-size: 64px !important;
    text-shadow: 1px -1px 4px lightgreen, -1px -1px 4px lightgreen, 1px 1px 4px lightgreen, -1px -1px 4px lightgreen;
    /*text-shadow:
        -1px -1px 0 #702822,
        1px -1px 0 #702822,
        -1px 1px 0 #702822,
        1px 1px 0 #702822;*/
    font-family: 'Cormorant Garamond', serif;
}

h2 {
    color: darkgreen;
    font-size: 32px !important;
    text-shadow: 1px -1px 4px lightgreen, -1px -1px 4px lightgreen, 1px 1px 4px lightgreen, -1px -1px 4px lightgreen;
    font-family: 'Cormorant Garamond', serif;
}

h3 {
    color: darkgreen;
    font-size: 24px !important;
    text-shadow: 1px -1px 4px lightgreen, -1px -1px 4px lightgreen, 1px 1px 4px lightgreen, -1px -1px 4px lightgreen;
    font-family: 'Cormorant Garamond', serif;
}

.punbb a, .punbb a:visited, .punbb a:link {
    color: darkgreen;
    font-size: 24px !important;
}

.punbb a:hover {
    text-shadow: 1px -1px 4px lightgreen, -1px -1px 4px lightgreen, 1px 1px 4px lightgreen, -1px -1px 4px lightgreen;
    text-decoration: underline !important;
}
</style>

<div class="main-container">
<div class="header-container">
    <div class="title">
    <h1>Во власти Леса</h1>
    </div>
    <div class="description">
    <h2>История о благих намерениях</h2>
    </div>
    <div class="players">
    <div class="title"><h3>В ролях:</h3></div>
    <div class="player"><h3>- <a href="http://almarein.spybb.ru/viewtopic.php?id=4787">Найриль</a></h3></div>
    <div class="player"><h3>- <a href="http://almarein.spybb.ru/viewtopic.php?id=5676">Малрик Ван Кроули</a></h3></div>
    </div>
</div>
<div class="body-container">
    <div class="body">
    <p>Небольшое поселение у восточной границы Арисфея<br>Конец лета 10605 года</p>
    <p>"Вот скажи мне кто пару декад назад что я всерьез буду вести какие-то дела с охотником, я бы рассмеялась ему в лицо. Теперь же мне придется извиниться за свое недальновидное поведение. Видимо, не только люди меняются со временем.</p>
    <p>Мы встретились с Малриком в деревушке далеко на востоке от моей родной рощи. Он путешественник, у него всегда найдется причина оказаться в любом забытом богами уголке мира, ну а я пришла туда с вполне конкретной целью - понять, почему Лес не мог оправиться от боли. Я чувствовала его горечь словно свою, но не могла понять, чем она была вызвана. Думаю, Лес просто хотел, чтобы я покинула это место, но когда же я слушалась чьих-то советов?</p>
    <p>История, развернувшаяся в этой деревне, оказалась весьма грустной, но нам еще только предстояло распутать этот клубок предубеждений, страхов и глупых поступков. Чрезмерно глупых поступков."</p>
    </div>
</div>
</div>

[/html]