@font-face
{
font-family: 'Alte Haas Grotesk';
src: url('AlteHaasGroteskRegular.ttf') format('truetype');
font-weight: normal;
}

@font-face
{
font-family: 'Alte Haas Grotesk';
src: url('AlteHaasGroteskBold.ttf') format('truetype');
font-weight: bold;
}

@font-face
{
font-family: 'stairwell-icons';
src: url('stairwell-icons.ttf') format('truetype');
font-weight: normal;
}

body
{
margin: 0;
font: 21px/1.5 "Alte Haas Grotesk", Arial, sans-serif;
letter-spacing: -1px;
}

body#index
{
font-size: 52px;
letter-spacing: -3px;
line-height: 1.1;
}

a
{
text-decoration: none;
color: #fff;
}

#index-header
{
width: 90%;
font-weight: bold;
padding: 5%;
background: #000 url(header.png) no-repeat center;
background-size: 85%;
}

#index-header span
{
visibility: hidden;
}

#index #index-wrapper
{
padding: 0 5% 1em;
font-weight: bold;
}

p a, .pagination-wrapper a, ul#index-navlinks li a
{
display: inline-block;
background-color: #000;
padding: 0 .25em;
border-radius: 4px;
}



p a:hover, .pagination-wrapper a:hover, ul#index-navlinks li a:hover
{
background-color: #fff;
color: #f00;
-webkit-transition: all 0.15s ease-out; 
-moz-transition: all 0.15s ease-out; 
-o-transition: all 0.15s ease-out; 
transition: all 0.15s ease-out;
}

/* NEW NAV BUTTONS */

ul#index-navlinks
{
padding-left: 0;
list-style: none;
display: flex;
justify-content: center;
margin-bottom: 4rem;
}

ul#index-navlinks li a
{
margin: 0 1rem;
font-size: 2.7rem;
font-weight: bold;
letter-spacing: -.1rem;
padding: 0 1rem;
line-height: 1.3;
}

p + #index-navlinks {
  margin-top: -2rem;
}

/* ABOUT PAGE  */

.about
{
font: 21px/1.5 "Arial", sans-serif !important;
font-weight: normal;
letter-spacing: -1px;
padding: 2em 25% !important;
}

h2, h3
{
font-family: "Alte Haas Grotesk";
text-align: center;
}

h2
{
margin: 4em 0 1em;
background-color: #000;
color: #fff;
}

h3
{
margin-top: 3.5em;
}

.about p a
{
background-color: transparent;
color: #000;
font-weight: bold;
text-decoration: underline;
padding: 0;
}

.about p a:hover
{
color: #f00;
-webkit-transition: all 0.1s ease-out; 
-moz-transition: all 0.1s ease-out; 
-o-transition: all 0.1s ease-out; 
transition: all 0.1s ease-out;
}

.about figure
{
float: left;
margin: 0 1.5em 0 0;
}

.about figure img
{
width: 10vw;
border: 10px solid;
}

.about figcaption
{
font-size: .7em;
text-align: center;
}

.about ul.links
{
margin-top: 1.5em;
column-count: 2;
font-size: .75em;
list-style-type: none;
}


#back
{
float: right;
letter-spacing: -3px;
margin: 2em 0 1em;
padding: 0 1em;
font: bold 52px/1.5 "Alte Haas Grotesk", sans-serif;
}


/* TAG PAGE */


.text_tags
{
font: 21px/1.5 "Arial", sans-serif;
letter-spacing: -1px;
padding: 0 5% 1em;
}

.text_tags a
{
color: #000;
font-weight: bold;
text-decoration: underline;
}

.tag_header
{
font-size: .8em;
padding: .25em 0;
margin: 0;
background-color: #fff;
text-align: left;
}

.tag_header a
{
color: #000;
display: inline-block;
width: 100%;
padding: 0 .5em .15em;
}

.tag_header a:hover, .tag_header a:hover:before
{
color: red;
transition: linear .2s;
}

.tag_header a:before
{
display: inline-block;
content: '#';
font-family: "stairwell-icons";
color: #000;
font-weight: normal;
font-size: 1.3em;
line-height: .5;
position: relative;
top: .25em;
margin-right: .4em;
}

.tag_header a:after
{
content: '\25B6';
padding-left: .5em;
}

.tag_header a.active:after
{
content: '\25BC';
}

.tag_header a.active
{
background-color: #000;
color: #fff;
}

.tag_header a.active:before
{
color: #fff;
}

.tag_header_minor
{
font-size: .5em;
padding: .25em 0;
margin-top: 1em;
}

.minor_tag_links a
{
font-size: .8em;
color: blue;
text-decoration: underline;
}

/* Pagination */


.pagination-wrapper
{
display: flex;
justify-content: space-between;
width: 90%;
margin: 1.5em auto .5em;
text-align: center;
font-size: .9em;
}

#newer, #older
{
width: 35%;
}

#newer:before
{
content: '\25C0';
padding-right: .5em;
}

#older:after
{
content: '\25B6';
padding-left: .5em;
}

#pageofpageheading
{
font-size: .6em;
margin: 2.3em auto .5em;
letter-spacing: -1.5px;
font-family: "Arial", sans-serif;
width: 90%;
background-color: unset;
color: #000;
}


/* Mobile adaptations */

@media screen and (max-width: 1400px)
{
.pagination-wrapper
{
font-size: .6em !important;
letter-spacing: -.75px;
font-family: "Arial", sans-serif;
}

.pagination-wrapper *
{
padding: .25em !important;
}

}

@media screen and (max-width: 900px)
{
body#index
{
font-size: 45px;
}

body#index p
{
text-align: center;
}

.about
{
padding: 2em 10% !important;
}


}

@media screen and (max-width: 600px)
{
body#index
{
font-size: 40px;
}
}