/* FONTS */

@font-face {
    font-family: "Immortal";
	font-weight: normal;
	font-style: normal;
    src: 	local("Immortal"), 
			url(/assets/IMMORTAL.ttf);
}

@font-face {
    font-family: "Minion Pro";
	font-weight: normal;
    font-style: normal;
	src:    local("Minion Pro"), 
            url("/assets/Minion Pro Regular.ttf");
}
@font-face {
    font-family: "Minion Pro";
	font-weight: normal;
    font-style: italic;
    src:    local("Minion Pro Italic"), 
            url("/assets/Minion Pro Italic.ttf");
}

/* BASE */

:root {
    --body-padding: 2rem;
    --header-margin: 1rem;
    --h1-line-height: 1.25;
    --h1-size: 2.5rem;
    
    font: 20px "Minion Pro", serif;
    color: #E5DADA;
    scrollbar-gutter: stable;
}

body {
    max-width: calc(1400px + 2 * var(--body-padding));
    margin: 0 auto;
    padding: 0 var(--body-padding) var(--body-padding);
    box-sizing: border-box;
    background-image: url(/assets/background.webp);
    background-size: cover;
    background-color: #120100; /*approximate color at bottom of background-image*/
}

/* MAIN LAYOUT */

main {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--body-padding);
}

main > div {
    flex: 1 1 480px;
}

main > img {
    --img-outset: -0.75rem;
    
    height: min(
            calc((100vw - 2 * var(--body-padding) + 2 * var(--img-outset)) * 8 / 5),  /* 8:5 is the image's aspect ratio */
            calc(100vh - var(--h1-size) * var(--h1-line-height) - 2 * var(--header-margin) - 2 * var(--img-outset)));
    max-height: 1000px; /* keep it from getting too big on a large screen and crowding out the text */
    max-width: 100%;
    object-fit: contain;
    margin: var(--img-outset) 0;
    mask:   linear-gradient(to top,  transparent 0%, #fff 4% 96%, transparent 100%),
            linear-gradient(to left, transparent 0%, #fff 4% 96%, transparent 100%);
    mask-composite: intersect;
}

@media screen and (max-width: 540px) {
    main > img {
        height: auto;
        width: calc(100vw - 1rem);
        max-width: none;
    }
}

/* HEADER & NAV */

header {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 1rem;
    margin: var(--header-margin) 0;
}

nav {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

nav a {
    display: inline-flex;
    line-height: 1;
    padding: 0.25rem;
}

nav img, nav svg  {
    height: 2rem;
    transition: 0.3s;
}

nav a:hover > img {
    opacity: 0.6;
}


/* TEXT */

h1 {
    margin: 0;
    font: var(--h1-size) Immortal, serif;
    line-height: var(--h1-line-height);
}

h2 {
    margin-bottom: 0.5em;
    font: 2rem "Minion Pro", serif;
}

p {
    line-height: 1.7;
    margin-top: 0;
}

hr {
    height: 50px;
    width: 80px;
    border: none;
    margin: 1em auto;
    transform: translateY(-5px); /* because eyelashes create small apparent offset */
    
    background-image: url(/assets/eye.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-origin: content-box;
    
    filter: brightness(200%) drop-shadow(0 0 10px black);

}


/* COMPONENTS */

.similar-books {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
}

.similar-books h2 {
    flex: 0 0 100%;
    margin-bottom: 0;
}

.similar-books ul {
    flex: 0 1 fit-content;
    display: flex;
    flex-flow: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.similar-books li {
    flex: 0 1 fit-content;
}

/* OVERRIDES */

.icon-tumblr {
    transform: translateY(-2px); /* tumblr icon is aligned slightly differently from the others */
}