```metadata
title: ToA Style
description: ''
tags:
- meta:Theme
systems:
- 5e
renderer: V3
theme: 5ePHB
```
```css
/* FONT IMPORTS ____________________________________________________ */
/* _________________________________________________________________ */
@import url('https://rawcdn.githack.com/Kaiburr-kath-hound/HomebreweryStyles/be88dc909ce74e765dc546aed91b1499fa5d6e7b/FrostmaidenFonts.css');
@import url('https://rawcdn.githack.com/Kaiburr-kath-hound/HomebreweryStyles/6ade797a215521264f7a7aca9355489333d9caba/EberronFonts.css');
/* GENERAL CODE ____________________________________________________ */
/* _________________________________________________________________ */
/* PAGE TEXTURE */
.page {
background-image : url(https://i.imgur.com/aYSBMuF.jpg);
background-size : cover;
background-position : 0 -14px;
}
.page:nth-of-type(odd) {
background-image : url(https://i.imgur.com/LofkTZk.jpg);
}
/* HEADERS */
.page h1,
.page h2,
.page h3,
.page h4 {
letter-spacing : 1px;
font-weight : normal;
}
.page h5 {
font-weight : bold;
text-shadow : #000 0 0 0.1px;
letter-spacing : 1px;
}
.page h1+p {
margin-top : 5px;
}
/* NOTES */
.page .note {
background-color : #d9d9bf;
border-image : url(https://i.imgur.com/KtrHa62.png) 14 stretch;
border-image-outset : 6px 0;
border-image-width : 11px;
}
/* IMAGES */
.page img:not(.logo img):not(.frontcredit img) {
position : absolute;
z-index : -2;
user-select : none;
}
.page .emblem img {
z-index : 1!important;
}
/* DESCRIPTIVE NOTES */
.page .descriptive {
background-color : #dcddd9;
border-image-outset : 4px;
}
/* TABLES */
.page table:not(.monster table) tr:nth-child(odd) td {
background-color : #d2d4c9;
}
/* MONSTER STATBLOCKS */
.page .monster.frame {
background-color : #f7efb6;
}
/* ARTIST CREDITS */
.page .artist {
position : absolute !important;
bottom : 100px;
left : 60px;
transform : rotate(-90deg);
transform-origin : bottom left;
text-align : left;
font-family : ScalySansSmallCapsRemake;
font-size : 13px;
text-transform : lowercase;
color : #7c7b5f;
}
.page:nth-of-type(even):not(:has(.insideCover)) .artist {
left : unset;
right : 60px;
transform : rotate(90deg);
transform-origin : bottom right;
}
/* SMALL CAPS */
.page caps {
font-variant : small-caps;
}
.page .backcover caps {
font-size : 120%;
}
/* DROP CAP */
.page h1+p::first-letter,
.page h1+p::first-line {
all : unset;
}
/* FOOTER IMAGE */
.page:after {
height : 185px;
background-image : url(https://i.imgur.com/Y4giJX8.png);
mix-blend-mode : multiply;
opacity : 30%;
}
/* WATERCOLOR STAIN */
.page [class*="watercolor"] {
background-color : #405828;
z-index : -3;
}
/* FOOTER TEXT */
.page:not(:has(.frontCover),:has(.credits)) .footnote {
left : 75px;
bottom : 30px;
font-size : 10.5px;
color : #822317;
text-transform : uppercase;
text-align : left;
width : 400px;
letter-spacing : 0.5px;
z-index : -3;
}
.page:nth-child(even):not(:has(.frontCover),:has(.credits)) .footnote {
left : unset;
right : 75px;
text-align : right;
}
/* PAGE NUMBER */
.page .pageNumber{
left : 25px;
bottom : 20px;
font-size : 13px;
color : #822317;
text-align : left;
z-index : -3;
}
.page:nth-child(even) .pageNumber{
left : unset;
right : 25px;
text-align : right;
}
/* HYPERLINKS */
.page a {
color : inherit;
text-decoration : none;
font-weight : inherit;
}
.page a:hover{
text-decoration : underline;
}
/* QUOTE */
.page .quote {
font-family : Cormorant;
font-size : 15px;
line-height : 1em;
margin-top : 0px;
padding-bottom : 4px;
}
.page .quote.author p:last-child {
font-family : BookInsanityRemake;
font-size : 0.34cm;
margin-top : 4px;
text-align : right;
}
/* FRONT COVER _____________________________________________________ */
/* _________________________________________________________________ */
.page:has(.frontCover) .logo {
top : 24px;
}
.page:has(.frontCover) {
padding-top : 78px;
}
.page:has(.frontCover) h1 {
margin-top : 12px;
text-transform : none;
font-size : 98px;
}
.page:has(.frontCover) hr {
margin : 12px auto;
width : 10cm;
}
.page:has(.frontCover) h2,
.page:has(.frontCover) h3 {
filter : drop-shadow(0 0 0.2px black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black)
drop-shadow(0 0 0 black) drop-shadow(0 0 0 black);
font-family : 'Modesto Expanded';
font-size : 0.8cm;
letter-spacing : 0.1cm;
margin-top : 10px;
transform : ScaleX(0.9);
}
.page:has(.frontCover) h3 {
color : white;
border-bottom : none;
font-size : 0.64cm;
}
.page:has(.frontCover) .footnote {
font-family : VeraCruz;
letter-spacing : 1px;
z-index : 1;
width : fit-content;
}
.page small {
position : relative;
text-transform : lowercase;
bottom : 10px;
font-size : 90%;
}
.page:has(.frontCover) .emblem,
.page:has(.frontCover) .color {
position : absolute;
top : 0;
left : 0;
background-size : 100% 100%;
background-repeat : no-repeat;
}
.page:has(.frontCover) .color {
height : 19px;
width : 650px;
background-color : black;
opacity : 75%;
z-index : -1;
-webkit-mask-image : url(https://i.imgur.com/bURATrX.png);
-webkit-mask-size : 100% 100%;
}
.page:has(.frontCover) .emblem {
height : 80px;
width : 340px;
z-index : 0;
background-image : url(https://i.imgur.com/y2xctk4.png);
}
.page:has(.frontCover) .emblem img {
left : 20px;
top : 0;
min-width : unset;
max-width : 50%;
max-height : 100%;
z-index : 1;
}
/* INSIDE COVER ___________________________________________________ */
/* ________________________________________________________________ */
.page:has(.insideCover) h1 {
font-size : 88px;
}
.page:has(.insideCover) h2 {
font-family : Nodesto;
font-size : 3em;
letter-spacing : 0.8px;
}
.page:has(.insideCover) h3 {
font-family : 'Modesto Expanded';
font-weight : normal;
font-size : 31px;
letter-spacing : 1px;
border-bottom : unset;
margin : 10px -72px 20px;
width : 816px;
}
.page:has(.insideCover) hr {
margin : 12px auto;
}
/* CREDITS PAGE ____________________________________________________ */
/* _________________________________________________________________ */
.page .credits h1+p::first-letter,
.page .credits h1+p::first-line,
.page:has(.credits)::after {
all : unset;
}
.page .credits h1 {
font-size : 40px;
}
.page .credits h2,
.page .credits h5 {
margin-bottom :14px;
}
.page .credits p {
font-family : Martel_SansRegular;
font-style : normal;
font-size : 0.83em;
line-height : 1.5em;
text-indent : -1em;
margin-left : 1em;
}
.page .credits strong {
font-family : Martel_SansExtraBold;
}
.page .credits a {
color : #6f1511;
font-weight : 900;
}
.page .frontcredit {
position : relative;
right : 16px;
width : 340px;
height : 240px;
margin-top : 15px;
margin-bottom : 110px;
}
.page .frontcredit::before {
content : '';
position : absolute;
top : 4px;
left : -5.1mm;
height : 97.7%;
width : 105.7%;
background-image : url(https://i.imgur.com/dJQSJuT.png);
background-size : 100% 100%;
}
.page .frontcredit img {
position : relative;
top : 2.3mm;
left : -2.7mm;
width : 100.2%;
min-height : 6.02cm;
-webkit-mask-image : url(https://i.imgur.com/YVycsy8.png);
-webkit-mask-position : top;
-webkit-mask-size : 100% 6.02cm;
-webkit-mask-repeat : no-repeat;
z-index : -1;
}
.page .frontcredit h5 {
margin-top : 10px;
margin-bottom : -2px;
text-shadow : #000 0 0 0.1px;
}
.page .frontcredit p {
text-indent : 0;
margin-left : 0;
}
.page .credits .footnote {
padding : 30px;
bottom : 0;
left : 0;
width : 100%;
font-size : 1em;
text-transform : none;
text-align : left;
color : black;
}
.page .credits .footnote p {
padding : 2.0em;
text-indent : 0;
}
/* TABLE OF CONTENTS _______________________________________________ */
/* _________________________________________________________________ */
.page .toc h1 {
text-align : left;
font-size : 40px;
}
.page .toc h3 {
font-family : BookInsanityRemake;
font-size : 12.5px;
font-weight : 800;
letter-spacing : 0px;
border-bottom : unset;
}
.page .toc ul h3 span:first-child::after {
content : '';
bottom : 0.08cm;
flex : 1;
margin-left : 0.08cm;
margin-right : 0.16cm;
border-bottom : 0.05cm dotted #000;
margin-bottom : 0.08cm;
}
.page .toc h4 {
margin-top : 2px;
margin-bottom : 0px;
font-family : BookInsanityRemake;
font-weight : 100;
color : black;
font-size : 13px;
letter-spacing : 0px;
}
.page .toc ul li + li h3 {
margin-top : 8px;
}
.page .toc a {
font-weight : inherit;
}
.page .toc.wide {
columns : 3;
column-gap : 16px;
}
/* CHAPTER HEADING _________________________________________________ */
/* _________________________________________________________________ */
.page .chapter {
column-span : all;
display : block;
}
.page .chapter:not(.intro) {
padding-top : 11px;
padding-bottom : 542px;
text-align : center;
}
.page .chapter h1 {
font-weight : normal;
letter-spacing : 0;
font-size : 32px;
margin-bottom : 16px;
}
.page .chapter+p::first-letter,
.page .chapter+.quote::first-letter {
float : left;
font-family : SolberaImitationRemake;
line-height : 1em;
font-size : 13.9em;
margin-left : -20px;
margin-top : -58px;
margin-bottom : -24px;
padding-left : 20px;
padding-right : 2px;
color : black;
}
.page h1+.quote::first-letter,
.page .chapter+.quote::first-letter {
font-size : 88px;
margin-left : -4px;
}
.page .chapter+.quote::first-line,
.page .chapter+p:first-line {
font-variant : small-caps;
font-family : BookInsanityRemake;
font-size : 14px;
text-transform : lowercase;
line-height : 14px;
}
.page .chapter.intro::before {
content : '';
position : absolute;
top : 0px;
left : -35px;
height : 380px;
width : 230px;
background-image : url(https://i.imgur.com/TdFzZRS.png);
background-size : 100% 100%;
mix-blend-mode : multiply;
opacity : 25%;
z-index : -3;
}
.page:has(.chapter) .colors,
.page:has(.chapter):not(.page:has(.colors,.intro))::before {
content : '';
position : absolute;
top : 439px;
left : 0;
height : 490px;
width : 100%;
-webkit-mask-image : url(https://i.imgur.com/Y0iLMfi.png);
-webkit-mask-position : top;
-webkit-mask-size : 100% 100%;
-webkit-mask-repeat : no-repeat;
z-index : -3;
background : radial-gradient(
closest-side at 60px 340px,
var(--color1),
transparent),
radial-gradient(
closest-side at 300px 290px,
var(--color2) 40%,
var(--background) 100%);
--color1 : #000;
--color2 : #637750;
--background : #303e23;
mix-blend-mode : multiply;
opacity : 80%;
}
.page:has(.chapter) img {
top : 0;
left : 0;
min-width : 100%;
height : 671px;
-webkit-mask-image : url(https://i.imgur.com/Re87Msk.png);
-webkit-mask-position : left;
-webkit-mask-size : 816px 671px;
-webkit-mask-repeat : no-repeat;
z-index : -2;
}
.page:has(.chapter):nth-child(odd) .colors,
.page:has(.chapter):nth-child(odd):not(.page:has(.colors,.intro))::before {
top : 11.62cm;
}
.page:nth-child(odd):has(.chapter) img {
-webkit-mask-image : url(https://i.imgur.com/TZGTcc9.png);
}
.page:nth-child(odd) .colors,
.page:nth-child(odd):not(.page:has(.colors))::before {
transform : ScaleX(-1);
margin-top : 12px;
}
.page:not(.page:has(.colors))::before {
margin-top : 12px;
}
/* BACK COVER CODE__________________________________________________ */
/* _________________________________________________________________ */
/* If you change the last "0" in the line below to "0.75", the backcover will project a red shadow over the background image. Feel free to change the other three rgba values to whatever color you'd like (I recommend using https://www.hexcolortool.com/ to pick a color */
.page:has(.backCover) .backCover {
filter : drop-shadow(0 0 30px rgba(237, 31, 36, 0));
}
.page:has(.backCover) h1 {
font-size : 58px;
font-weight : normal;
}
.page:has(.backCover) p {
font-family : martel_sanssemibold;
font-size : 11.7px;
line-height : 1.6em;
text-indent : 0;
color : white;
}
.page:has(.backCover) caps {
font-size : 125%;
}
```
{{frontCover}}
{{logo }}
{{emblem
 {opacity:70%}
}}
{{color,background-color:#fff}}
# TOMB of HIBERNATION
## A Yawning Portal Indeed
___
{{banner HOMEBREW}}
{{footnote
Dare to defy this template made for
the world's greatest roleplaying game
}}
 {right:0px,top:0px,height:103%}
\page
{{insideCover}}
# TOMB of HIBERNATION
### A Yawning Portal Indeed