/* FONTS */

.h1 {
    font-family: "La Belle Aurore", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 36px;
    color: #400d12;
}

.h2 {
    font-family: "La Belle Aurore", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    color: #400d12;
    padding-top: 36px;
}

.h3 {
    font-family: "La Belle Aurore", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    color: #400d12;
}

.h3_complete {
    font-family: "La Belle Aurore", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    color: #ac1b34;
}

.p {
    font-family: "La Belle Aurore", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    color: #400d12;
}

.p_faded {
    font-family: "La Belle Aurore", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    color: #8d775f;
}

.p_complete {
    font-family: "La Belle Aurore", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    color: #ac1b34;
}

/* BODY */

body {
    margin: 0;
    padding: 0;
    background-color: #d5bf86;
}

/* GRID */

.container {
    display: flex;
    padding-left: 48px;
    padding-right: 48px;
    flex-direction: column;
}

.collectionContainer {
    display: flex;
    padding: 12px 0px 12px 0px;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
}

/* NAVIGATION */

.navigation {
    grid-template-areas: navigation;
    padding-top: 24px;
    overflow: hidden;
}

.navigation a {
    float: left;
    text-align: center;
    text-decoration: none;
    padding-right: 24px;
    color: #8d775f;
}

.navigation a:hover {
    color: #ac1b34;
}

.navigation a.active {
    color: #400d12;
}

/* RECIPES */

.recipe {
    background-color: #f0f0cc;
    display: grid;
    grid: auto / auto auto;
    padding: 24px 48px 24px 0px;
    border-radius: 24px;
}

.recipeImage {
    width: 200px;
}

.recipeInfo {
    display: grid;
    grid: auto-flow / auto;
    grid-template-areas:
        "recipeName"
        "ingredientsList";
}

.recipeName {
    grid-area: recipeName;
}

.ingredientsList {
    grid-area: ingredientsList;
    display: grid;
    justify-content: start;
    grid: auto-flow / auto auto;
}

.ingredientName {
    padding-right: 36px;
}

.ingredientAmount {
    padding-right: 12px;
    justify-self: left;
}

/* MONSTER PARTS */

.underline {
    background-color: #400d12;
    height: 2px;
    width: 60%;
}

.monsterPart {
    display: flex;
    flex-direction: column;
    padding: 24px 24px 24px 0px;
    text-align: center;
}

.monsterPartImage {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    align-self: center;
    margin-bottom: 16px;
}

/* COLORS */

.lightTan {
    background-color: #d5bf86;
}

.cream {
    background-color: #f0f0cc;
}

.lightBrown {
    background-color: #8d775f;
}

.darkBrown {
    background-color: #400d12;
}

/* 

UNCOLLECTED RECIPES


                    <!-- POISON ARROWS -->
                    <div class="recipe">
                        <!-- RECIPE IMAGE -->
                        <img
                            class="recipeImage"
                            src="images/arrowIcon_poison.png"
                            alt="potion"
                        />
                        <!-- RECIPE INFO -->
                        <div class="recipeInfo">
                            <!-- RECIPE NAME -->
                            <div class="recipeName h3">Poison Arrows</div>
                            <!-- INGREDIENTS -->
                            <div class="ingredientsList">
                                <!-- INGREDIENT 1 -->
                                <div class="ingredientName p">bone</div>
                                <!-- AMOUNT COLLECTED -->
                                <div class="ingredientAmount p_faded">2</div>
                                <div class="ingredientAmount p_faded">/</div>
                                <!-- AMOUNT NEEDED -->
                                <div class="ingredientAmount p_faded">4</div>
                                <!-- INGREDIENT 2 -->
                                <div class="ingredientName p">plant parts</div>
                                <!-- AMOUNT COLLECTED -->
                                <div class="ingredientAmount p_faded">0</div>
                                <div class="ingredientAmount p_faded">/</div>
                                <!-- AMOUNT NEEDED -->
                                <div class="ingredientAmount p_faded">4</div>
                                <!-- INGREDIENT 3 -->
                                <div class="ingredientName p">fibers</div>
                                <!-- AMOUNT COLLECTED -->
                                <div class="ingredientAmount p_faded">2</div>
                                <div class="ingredientAmount p_faded">/</div>
                                <!-- AMOUNT NEEDED -->
                                <div class="ingredientAmount p_faded">4</div>
                            </div>
                        </div>
                    </div>

<!-- HEALTH POTION -->
                    <div class="recipe">
                        <!-- RECIPE IMAGE -->
                        <img
                            class="recipeImage"
                            src="images/potionIcon_health.png"
                            alt="potion"
                        />
                        <!-- RECIPE INFO -->
                        <div class="recipeInfo">
                            <!-- RECIPE NAME -->
                            <div class="recipeName h3">Health Potion</div>
                            <!-- INGREDIENTS -->
                            <div class="ingredientsList">
                                <!-- INGREDIENT 1 -->
                                <div class="ingredientName p">fluid</div>
                                <!-- AMOUNT COLLECTED -->
                                <div class="ingredientAmount p_faded">2</div>
                                <div class="ingredientAmount p_faded">/</div>
                                <!-- AMOUNT NEEDED -->
                                <div class="ingredientAmount p_faded">4</div>
                                <!-- INGREDIENT 2 -->
                                <div class="ingredientName p">hearts</div>
                                <!-- AMOUNT COLLECTED -->
                                <div class="ingredientAmount p_faded">0</div>
                                <div class="ingredientAmount p_faded">/</div>
                                <!-- AMOUNT NEEDED -->
                                <div class="ingredientAmount p_faded">4</div>
                                <!-- INGREDIENT 3 -->
                                <div class="ingredientName p">fibers</div>
                                <!-- AMOUNT COLLECTED -->
                                <div class="ingredientAmount p_faded">2</div>
                                <div class="ingredientAmount p_faded">/</div>
                                <!-- AMOUNT NEEDED -->
                                <div class="ingredientAmount p_faded">4</div>
                            </div>
                        </div>
                    </div>

*/

/* 

NOTES:

MONSTER TYPES & SPECIAL ARROWS

Aberration          Psychic                  Mind Reading Arrows (detects thoughts)
Beast               Grappling                Soothing Arrows (creature is no longer hostile)
Celestial           Radiant                  Sanctifying Arrows (you heal for the amount of damage inflicted)
Construct           Force                    Time Anomaly Arrows (paralyzed for one turn)
Dragon              Slashing                 Swooping Arrows (carry to an unoccupied space within 30ft.)
Air Elemental       Lightning                Blowback Arrows (pushed 10ft. away from shooter)
Earth Elemental     Thunder                  Earthquake Arrows (knocked prone for one turn)
Fire Elemental      Fire                     Ignition Arrows (take 1d4 fire damage each turn until you're put out)
Water Elemental     Cold                     Freezing Arrows (stunned for one turn)
Fey                 Charming                 Totally Normal Not Chaotic At All Arrows (roll on d20 table for effect)               
Fiend               Piercing                 Cursed Arrows (roll twice on d20 table for curse)
Giant               Bludgeoning              Smash Arrows (incapacitated for one turn)
Monstrocity         Frightening              Abomination Arrows (disfigured and disadvantage on attack rolls)
Ooze                Acid                     Slippery Arrows (disarmed, must spend an action to re-arm)
Plant               Poison                   Stinging Arrows (poisoned for one turn)
Undead              Necrotic                 Plague Arrows (creatures within 5ft. take 1d4 necrotic damage)      

Totally Normal Not Chaotic At All Arrow Table

Turn into...

1   
2   
3   
4   
5   
6   
7   
8   
9   
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  a pile of gold worth 100gp

Cursed Arrow Table

1   
2   
3   
4   
5   
6   
7   
8   
9   
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  

*/