page five: all men are mortal ( light version )

<!DOCTYPE html>
<!------------------------------------------------------

nausea @ aureacor

- do not remove credit
- do not use as a base

- inspired by index47

-------------------------------------------------------->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="{Favicon}">
<title>{title}</title>
<link href='https://fonts.googleapis.com/css?family=Pinyon Script' rel='stylesheet'>

<style type="text/css">
.tmblr-iframe--unified-controls { height: 0px!important;}

/* EDIT COLORS, FONTS, AND SIZES HERE */

:root {
    --font-one: times;
    --font-two: arial;
    --size-main-title: 15px;
    --size-muse-title: 13px;
    --size-muse-subtitle: 9px;
    --size-muse-description: 9px;
    --bg: #fffefb;
    --text-color-character: #fff;
    --text-color-background: #000;
    --accent-color: #67735a;
    --border: #d1d1d1;
    --height: 375px;
    --width: 255px;
    --gs: grayscale(100%);
    --blend: difference;
    --textshadow: text-shadow: 0px 0px 4px rgba(0,0,0,0.0);
 }

.title {
padding: 0px 40px 0px 60px;
max-width: 20%;
min-width: 275px;
border-right: 1px solid var(--border);

-webkit-transition:all .26s ease-in-out;
-moz-transition:all .26s ease-in-out;
-ms-transition:all .26s ease-in-out;
-o-transition:all .26s ease-in-out;
transition:all .26s ease-in-out;
}

.title h1 {
color: var(--text-color-background);
font-size: var(--size-main-title);
font-family: var(--font-one);
word-break: break-word;
margin-bottom: 0px;
line-height: 120%;
font-weight: 400;
letter-spacing: 1.5px;
text-transform: uppercase;
}

.title p, .title a {
font-family: var(--font-two);
font-size: 7px;
letter-spacing: 1.2px;
text-transform: uppercase;
line-height: 18px;
color: var(--text-color-background);
margin-top: 15px;
}


.title-cont {
top: 90px;
position: sticky;
}

.septitle {
width: 50%;
padding-top: 25px;
}

.septitle h1 {
color: var(--text-color-background);
font-size: 10.5px;
font-family: var(--font-one);
word-break: break-word;
margin-bottom: 0px;
line-height: 110%;
font-weight: 400;
padding-left: 15px;
letter-spacing: 1px;
text-transform: lowercase;
font-style: italic;
}

.container {
width: 100%;
padding-left: 5%;
height: 100%;
overflow: scroll;
}

.grid {
margin-top: 45px;
position: relative;
margin-bottom: 50px;
}

.muse {
background: #0a0a0a;
max-height: var(--height);
display: inline-block;
margin: 15px 25px 30px 15px;
position: relative;
}

img {
height: var(--height);
width: var(--width);
opacity:0.9;
transition: .5s ease;
object-fit: cover;
}

.bottomtext {
color: var(--text-color-character);
display: flex;
justify-content: space-between;
transition: .5s ease;
height: var(--height);
position: absolute;
top: 0px;
width: var(--width);
}

.mtitle {
margin: 0px auto;
text-align: center;
width: 80%;
justify-content: end;
display: flex;
flex-direction: column;
padding-bottom: 15px;
}

.mtitle h1 {
font-family: var(--font-two);
font-size: var(--size-muse-title);
font-weight: 600;
line-height: 20px;
line-height: 110%;
text-transform: uppercase;
letter-spacing: 1.5px;
text-shadow: var(--textshadow);
}

.mtitle h2 {
font-family: var(--font-one);
text-transform: lowercase;
font-style: italic;
font-size: var(--size-muse-subtitle);
font-weight: 400;
letter-spacing: 1px;
margin-bottom: 10px;
}


.overlay {
background-color: rgba(26, 26, 26, 0.87);
opacity: 0;
transition: .5s ease;
mix-blend-mode: var(--blend);
height: var(--height);
width: var(--width);
position: absolute;
z-index: 99;
}

.text {
font-size: 20px;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
max-height: 50%;
overflow: scroll;
width: 65%;
scrollbar-width: none;
}


.text p, .bio a {
font-family: var(--font-one);
font-size: var(--size-muse-description);
color: var(--text-color-character);
letter-spacing: 1.2px;
text-transform: lowercase;
line-height: 17px;
transition: .5s ease;
}

.bio {
width: var(--width);
text-align: center;
opacity: 0;
transition: .5s ease;
position: absolute;
bottom: 20px;
display: none;
}

.bio a:hover {color: var(--accent-color);}
.bio a:not(:last-child):after {
content: "/";
margin: 0px 9px 0px 10px;
color: var(--text-color-character);
}


* a:hover{color:var(--accent-color)}* a,.c a,u{text-decoration:none}*{margin:0;padding:0;box-sizing:border-box}* a{color:var(--text-color-background);transition:.5s}body,html{height:100%}body{background:var(--bg);display:flex}body>iframe:first-child{display:none!important}::-webkit-scrollbar{display:none}.c{position:fixed;bottom:.7em;right:1em;color:red}.c a{font-size:17px;transition:.3s;color:var(--text-color-background)}b{text-transform:uppercase;font-size:calc(var(--size-muse-description) - 2px)}u{border-bottom:1px solid var(--accent-color)}li,ul{list-style:none;letter-spacing:1.2px}.muse:hover{cursor:crosshair}.muse:hover img{opacity:.2;transition:.5s;filter:var(--gs)}.muse:hover .bottomtext{opacity:0;transition:.5s}.muse:hover .bio,.muse:hover .overlay,.muse:hover .text{opacity:1}.muse:hover .bio{display:block}

/*-------------  DO NOT TOUCH | RESPONSIVE SCREEN-SIZE  -------------*/
@media only screen and (max-width:800px){.container,.title{text-align:center}.grid,.title,.title-cont{position:relative}body{flex-direction:column}.title{padding:0 40px 30px;border-right:1px solid var(--border);margin-top:0;max-width:none;min-width:none;width:100%;-webkit-transition:.26s ease-in-out;-moz-transition:.26s ease-in-out;-ms-transition:.26s ease-in-out;-o-transition:.26s ease-in-out;transition:.26s ease-in-out}.container,.septitle h1{padding-left:0}.title-cont{top:0;width:60%;margin:auto}.container{width:100%;overflow:visible;border-top:1px solid var(--border)}.grid{margin-top:0}.septitle{width:100%;margin-bottom:20px}}@media all and (min-width:100px) and (max-width:400px){.title{margin-top:0}body{flex-direction:column}.title h1{font-size:calc(var(--size-main-title) + 8pt);line-height:120%}.title a,.title p{font-size:9px}.bio a,.text p{font-size:calc(var(--size-muse-description) + 2px);line-height:170%}}
</style>


<body>
<div class="title">
<div class="title-cont">
<h1> title </h1>
<p>  description  </p> <br>

<ul>
<li>  <a href="/"> homepage </a> </li>
<li>  <a href="/"> navigation </a> </li>
<li>  <a href="/"> otherlinks </a> </li>
<li>  <a href="/ask"> ask </a> </li>
</ul>

</div></div>

<div class="container"><div class="grid">

<!-- CATEGORY | COPY THIS LINE TO SEPARATE --->
<br> <div class="septitle"> <h1>  CATEGORY ONE  </h1></div>


<div class="muse" tabindex="1"><div class="overlay"><div class="text">
	<p>  Description  </p>
</div> <div class="bio">
	<a href="/"> link one </a>
	<a href="/"> link one </a>
</div></div>
	<img src="https://placehold.co/255x375">
<div class="bottomtext"><div class="mtitle">
	<h2>   subtitle  </h2>
	<h1>   main title </h1>
</div></div></div>


<div class="muse" tabindex="1"><div class="overlay"><div class="text">
	<p>  Description  </p>
</div> <div class="bio">
	<a href="/"> link one </a>
	<a href="/"> link one </a>
</div></div>
	<img src="https://placehold.co/255x375">
<div class="bottomtext"><div class="mtitle">
	<h2>   subtitle  </h1>
	<h1>   main title </h1>
</div></div></div>

<div class="muse" tabindex="1"><div class="overlay"><div class="text">
	<p>  Description  </p>
</div> <div class="bio">
	<a href="/"> link one </a>
	<a href="/"> link one </a>
</div></div>
	<img src="https://placehold.co/255x375">
<div class="bottomtext"><div class="mtitle">
	<h2>   subtitle  </h2>
	<h1>   main title </h1>
</div></div></div>


<!-- CATEGORY | COPY THIS LINE TO SEPARATE --->
<br> <div class="septitle"> <h1>  CATEGORY TWO  </h1></div>


<div class="muse" tabindex="1"><div class="overlay"><div class="text">
	<p>  Description  </p>
</div> <div class="bio">
	<a href="/"> link one </a>
	<a href="/"> link one </a>
</div></div>
	<img src="https://placehold.co/255x375">
<div class="bottomtext"><div class="mtitle">
	<h2>   subtitle  </h2>
	<h1>   main title </h1>
</div></div></div>


<div class="muse" tabindex="1"><div class="overlay"><div class="text">
	<p>  Description  </p>
</div> <div class="bio">
	<a href="/"> link one </a>
	<a href="/"> link one </a>
</div></div>
	<img src="https://placehold.co/255x375">
<div class="bottomtext"><div class="mtitle">
	<h2>   subtitle  </h2>
	<h1>   main title </h1>
</div></div></div>



<div class="muse" tabindex="1"><div class="overlay"><div class="text">
	<p>  Description  </p>
</div> <div class="bio">
	<a href="/"> link one </a>
	<a href="/"> link one </a>
</div></div>
	<img src="https://placehold.co/255x375">
<div class="bottomtext"><div class="mtitle">
	<h2>   subtitle  </h2>
	<h1>   main title </h1>
</div></div></div>


<div class="muse" tabindex="1"><div class="overlay"><div class="text">
	<p>  Description  </p>
</div> <div class="bio">
	<a href="/"> link one </a>
	<a href="/"> link one </a>
</div></div>
	<img src="https://placehold.co/255x375">
<div class="bottomtext"><div class="mtitle">
	<h2>   subtitle  </h2>
	<h1>   main title </h1>
</div></div></div>



</div></div> <div class="c">
<a href="https://aureacor.tumblr.com" title="aureacor">♥</a></div>


</body> </html>