/* =========================================================
FAVOURITE THINGS
========================================================= */

/* Make all favourite list items bold */

.page-content ul li {
font-weight: bold;
}

/* Keep colour hex codes lighter */

.page-content .colour-list code {
font-weight: normal;
}

/* =========================================================
HTML COLOUR PALETTE
========================================================= */

.colour-list {
list-style: none;
margin: 10px 0 16px;
padding: 0;

display: grid;
grid-template-columns:
    repeat(2, minmax(0, 1fr));

gap: 5px 18px;

}

.colour-list li {
display: flex;
align-items: center;
gap: 7px;

margin: 0;
padding: 3px 0;


}

/* Little colour circle */

.colour-swatch {
width: 16px;
height: 16px;
display: inline-block;
flex: 0 0 16px;

border: 1px solid rgba(0,0,0,.25);
border-radius: 50%;

box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25);

}

/* Hex code */

.colour-list code {
margin-left: auto;
color: var(--moss);
font-family: monospace;
font-size: 9px;
font-weight: normal;

}

/* =========================================================
FAVOURITE IMAGES
========================================================= */

.page-content .favourite-image {
display: block;
max-width: 100%;
height: auto;
margin: 10px auto 12px;
}

/* ---------------------------------------------------------
GARDEN SMELLS / HONOURARY MENTIONS
--------------------------------------------------------- */

.page-content ul.garden-smells,
.page-content ul.honourary {
    list-style: none;
    padding-left: 22px;

    font-family: "Rainy Hearts", Verdana, Arial, Helvetica, sans-serif;
}


/* Custom flower marker */

.page-content ul.garden-smells li::before,
.page-content ul.honourary li::before {
    content: "K";

    position: absolute;
    left: -22px;
    top: .15em;

    color: var(--moss);

    font-family: "Go Around the Books";
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
}
/* ---------------------------------------------------------
FAVOURITE WEBSITES
--------------------------------------------------------- */

.favourite-websites {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
margin: 10px 0 22px;
}

.website-favourite {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
padding: 7px 9px;

color: var(--forest);
background: rgba(177, 189, 139, .13);

border: 1px dotted var(--moss-light);
border-radius: 4px;

font-family: "Alagard", Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 1.3;

text-decoration: none;

transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease,
    color .15s ease;

}

.website-favourite:hover {
color: var(--forest);
background: rgba(177, 189, 139, .30);
border-color: var(--moss);
transform: translateY(-1px);
}

.website-icon {
display: inline-block;
color: var(--gold);
font-family: "Go Around the Books";
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: 1;
}

.website-favourite:hover .website-icon {
color: var(--rust);
}

/* ---------------------------------------------------------
ARTISTS
--------------------------------------------------------- */

.artist-list {
list-style: none;
margin: 10px 0 20px;
padding: 0;
}

.artist-list li {
position: relative;
margin: 0;
padding: 4px 0 4px 17px;

color: var(--brown);
font-family: "Rainy Hearts", Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.45;

}

.artist-list li::before {
content: "j";
position: absolute;
left: 0;
top: 5px;

color: var(--moss);
font-family: "Go Around the Books";
font-size: 16px;
font-weight: normal;
font-style: normal;
}

.artist-list li span {
color: var(--moss);
font-family: "Rainy Hearts", Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
}

/* ---------------------------------------------------------
WORDS
--------------------------------------------------------- */

.word-favourites {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 8px;
margin: 10px 0 22px;
}

.word-favourite {
flex: 1 1 120px;
padding: 9px 12px;
background: rgba(177, 189, 139, .10);
border-top: 1px dashed var(--moss-light);
border-bottom: 1px dashed var(--moss-light);
text-align: center;
}

.word-japanese,
.word-english {
color: var(--brown);
font-family: "Rainy Hearts", Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}

.word-japanese {
letter-spacing: 1px;
}

.word-english {
font-style: normal;
}

/* ---------------------------------------------------------
TV SHOWS
--------------------------------------------------------- */

.tv-favourites {
margin: 10px 0 22px;
padding: 8px 11px;
background: rgba(177, 189, 139, .10);
border-left: 3px solid var(--moss);
}

.tv-favourite {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
color: var(--brown);
font-family: "Rainy Hearts", Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}

.tv-favourite + .tv-favourite {
border-top: 1px dotted rgba(97, 112, 76, .35);
}
.tv-favourite > span:first-child {
flex: 0 0 auto;
color: var(--gold);
font-family: "Go Around the Books";
font-size: 8px;
font-weight: normal;
font-style: normal;

}

/* ---------------------------------------------------------
CAT / DOG / RAT / HORSE LISTS
--------------------------------------------------------- */

.animal-list {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 14px;
margin: 10px 0 22px;
padding: 0;

}

.animal-list li {
position: relative;
min-width: 0;
margin: 0;
padding: 4px 4px 4px 15px;

color: var(--brown);
font-family: "Rainy Hearts", Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.35;
}

.animal-list li::before {
content: "m";
position: absolute;
left: 0;
top: 4px;
color: var(--moss);
font-family: "Go Around the Books";
font-size: 16px;
font-weight: normal;
font-style: normal;

}

.animal-list li:hover {
color: var(--rust);
}

.animal-list li:hover::before {
color: var(--gold);
}

.animal-list-small {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------------------------------------------------------
MISC THINGS
--------------------------------------------------------- */

.misc-favourites {
display: flex;
flex-wrap: wrap;
gap: 6px;


margin: 10px 0 18px;
padding: 10px;

background: rgba(197, 164, 93, .06);

border-top: 1px dashed var(--gold);
border-bottom: 1px dashed var(--gold);


}

.misc-favourites span {
display: inline-block;

padding: 4px 8px;

color: var(--brown);
background: rgba(177, 189, 139, .15);

border: 1px solid rgba(97, 112, 76, .30);
border-radius: 3px;

font-family: "Rainy Hearts", Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.3;

transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;

}

.misc-favourites span:hover {
color: var(--forest);
background: rgba(177, 189, 139, .30);
border-color: var(--moss);
}

/* ---------------------------------------------------------
PERFUME FAVOURITES
--------------------------------------------------------- */

.perfume-favourites {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;


margin: 12px 0 24px;


}

/* ---------------------------------------------------------
INDIVIDUAL PERFUME
--------------------------------------------------------- */

.perfume-favourite {
min-width: 0;
padding: 10px;


background: rgba(177, 189, 139, .10);

border: 1px solid rgba(97, 112, 76, .30);
border-radius: 4px;

text-align: center;

transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;


}

.perfume-favourite:hover {
background: rgba(177, 189, 139, .18);
border-color: var(--moss);
transform: translateY(-2px);
}

/* ---------------------------------------------------------
PERFUME IMAGE AREA
--------------------------------------------------------- */

.perfume-image {
position: relative;


width: 100%;
height: 190px;

display: flex;
align-items: center;
justify-content: center;

overflow: hidden;

margin-bottom: 8px;


}

/* Actual perfume bottle */

.perfume-image img {
display: block;


max-width: 100%;
max-height: 190px;

width: auto;
height: auto;

object-fit: contain;

transition:
    opacity .2s ease,
    transform .2s ease;


}

/* ---------------------------------------------------------
SCENT NOTES OVERLAY
--------------------------------------------------------- */

.perfume-notes {
position: absolute;
inset: 0;


display: flex;
flex-direction: column;
justify-content: center;

gap: 7px;

padding: 12px;

box-sizing: border-box;

background: rgba(17, 26, 18, .91);

color: var(--cream);

opacity: 0;

transition:
    opacity .2s ease;

pointer-events: none;


}

/* Reveal notes */

.perfume-favourite:hover .perfume-notes {
opacity: 1;
}

/* Slightly fade the bottle underneath */

.perfume-favourite:hover .perfume-image img {
opacity: .12;
transform: scale(1.03);
}

/* Individual note groups */

.note-group {
display: flex;
flex-direction: column;

gap: 2px;

font-family:
    Verdana,
    Arial,
    Helvetica,
    sans-serif;

font-size: 10px;
line-height: 1.3;

}

/* TOP / MIDDLE / BASE */

.note-group strong {
color: var(--gold);


font-family:
    "Rainy Hearts",
    Verdana,
    Arial,
    Helvetica,
    sans-serif;

font-size: 11px;
font-weight: bold;

text-transform: uppercase;
letter-spacing: .5px;

}

/* Actual notes */

.note-group span {
color: var(--cream);


font-family:
    Verdana,
    Arial,
    Helvetica,
    sans-serif;

font-size: 10px;
font-weight: normal;


}

/* ---------------------------------------------------------
PERFUME NAME
--------------------------------------------------------- */

.perfume-name {
padding: 7px 5px 3px;

color: var(--brown);

font-family:
    "Rainy Hearts",
    Verdana,
    Arial,
    Helvetica,
    sans-serif;

font-size: 14px;
font-weight: bold;
line-height: 1.35;

}

/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */

@media (max-width: 500px) {
.perfume-favourites {
    grid-template-columns: 1fr;
    gap: 12px;
}

.perfume-image {
    height: 210px;
}

.perfume-image img {
    max-height: 210px;
}

}


/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */

@media (max-width: 500px) {


.perfume-favourites {
    grid-template-columns: 1fr;
    gap: 12px;
}

.perfume-image {
    height: 210px;
}

.perfume-image img {
    max-height: 210px;
}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 500px) {

.favourite-websites {
    grid-template-columns: 1fr;
}

.animal-list {
    grid-template-columns: 1fr;
}

.animal-list-small {
    grid-template-columns: 1fr;
}

.word-favourite {
    flex-basis: 100%;
}

}