:root{
  --content_width: 70%;
}

@media only screen and (max-width: 600px)
{
  :root
  {
    --content_width: 90%;
  }
}

body
{
  font-family: 'Quicksand', sans-serif;
  font-size:   0.972vw;
  text-align:  justify;
  hyphens:     auto;
  margin:      0;
  overflow-y:  scroll;
}

#banner_wrapper
{ 
  width:         100%;
  font-family:   'Montserrat', sans-serif;
  margin:        50px auto 0 auto;
  padding:       0;
  width:         var(--content_width);
}

#content_wrapper
{
  margin: 2em auto 5em auto;
  width:  var(--content_width);
}

#banner_mainline
{
  font-weight:         100;
  font-size:           4.8vw;
  letter-spacing:      2.1vw;       
  border-top-style:    solid;
  border-bottom-style: solid;
  border-width:        0.2vw;
}    

#banner_strikes
{
  border-top-style:    solid;
  border-bottom-style: solid;
  border-width:        0.1vw;
  text-align:          center;
  margin:              3px 0 3px 0.25%;
  width:               99.5%;
}

#banner_subline
{
  font-size:   1vw;
  font-weight: 300;
  text-align:  right;
  margin-top:  0.45em;
}

@media (max-width: 400px) 
{
  #banner_strikes
  {
    margin: 1px 0 1px 0.25%;
  }

  #banner_mainline
  {
    border-width:        0;
  } 
}

#teaser_wrapper
{
  display: grid;
  grid-template-columns: 10fr 1fr 10fr 1fr 10fr;
}
#btn_older
{
  text-align: right;
}
#btn_newer
{
  text-align: left;
}
.teaser_vsep
{
  grid-row-start: span 3;
}
.teaser_hsep
{
  grid-column-start: span 5;
  margin:            0.5em 0;
  width:             100%;
  height:            0px;
  border-style:      dotted;
  border-width:      0 0 1px 0;
}

.teaser_vseparation
{
  height:             100%;
  width:              0;
  border-style:       dotted;
  border-width:       0;
  border-right-width: 1px;
  padding-left:       50%;
}

.teaser_main
{
  grid-column-start: span 5;
}
.teaser_title
{
  text-transform: uppercase;
  border-style:   solid;
  border-width:   0 0 1px 0;
  padding:        0 0 0.5em 0;
  display:        inline-block;
}

.teaser_title a
{
  background:    white;
  color:         black;
  text-decoration: none;
}

.teaser_text
{
  text-align:   justify;
  padding:      0 0.5em 0 0.5em;
}

.teaser_margins
{
  margin:         0em 1em 0 1em;
  padding-left:   0.4em;
  padding-right:  0.4em;
}

#footer
{
  position:     fixed;
  width:        100%;
  bottom:       0;
  background:   white;
  border-style: solid;
  border-width: 2px 0 0 0;
  border-color: #4a4a4a;
  z-index:      100;
}

#footer ul
{
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  padding:         0.5em 2em 0 2em;
  margin:          0 auto 0.5em auto;
  width:           var(--content_width);
}

@media only screen and (max-width: 600px)
{
  #banner_wrapper
  {
    width: 90%;
  }

  #content_wrapper
  {
    width: 90%;
  }
}

.footer_element
{
  display: inline-block;
  margin:  0;
}

#link_home:visited,
#link_home:link
{
  color:           black;
  text-decoration: none;
}

.navbtn a:visited,
.navbtn a:link,
.navbtn_rev a:visited,
.navbtn_rev a:link
{
  color:           black;
  text-decoration: none;
  text-transform:  uppercase;
  display:         inline-block;
}

.navbtn a:hover,
.navbtn_rev a:hover
{
  background: black;
  color:      white;
}

.navbtn a::after
{
  content: " ❯";
}

.navbtn_rev a::before
{
  content: "❮ ";
}

.teaser_main .navbtn
{
  margin-top:    0.5em;
}


.teaser_main_title a
{
  background:    white;
  color:         black;
  text-decoration: none;
}
.article_main_img,
.teaser_img
{
  width:         100%;
  margin-bottom: 1em;
}

.teaser_main_title,
h1
{
  font-size:      2.43vw;
  padding-bottom: 0.2em;
  margin-bottom:  0.5em;
  margin-top:     0;
  text-align:     center;
  border-style:   solid;
  border-width:   0 0 1px 0;
  text-transform: uppercase;
  font-weight:    400;
}

h2
{
  text-transform:  uppercase;
  text-decoration: underline;
  font-weight:     400;
  font-size:       1.457vw;
}

.article_columns h2
{
  text-align: center;
}

.infobox
{
  border:       dotted;
  border-width: 1px 0 1px 0;
  padding:      2%;
  margin:       5em 3em;
}

.infobox h1
{
  text-align:      left;
  text-transform:  uppercase;
  font-weight:     400;
  font-size:       1.057vw;
  border-style:    none;
  text-decoration: underline;
}

.inline_reference .inline_reference_details
{
  visibility: hidden;
  z-index:       1;
  background:    #111111;
  color:         white;
  padding:       0.5%;
  border-radius: 5px;
  position: absolute;
}

.inline_reference:hover .inline_reference_details
{
  visibility: visible;
  transition: ease-in;
  transition-delay: 500ms;
}

.article_intro
{
  font-style: italic;
}

.article_columns
{
  columns:     2;
  column-fill: balance;
  column-rule: 1px dotted;
  column-gap:  3.5em;
  margin:      1em 0;
}

.article_columns > p:first-child
{
  break-inside: avoid;
  margin: 0;
}

.article_img
{
  width: 100%;
}

#articles_wrapper
{
  display: grid;
  grid-template-columns: 7fr 1fr 50fr 7fr;
}

#articles_wrapper .vsep
{
  border-left-style: dotted;
  width:             0;
  height:            100%;
  margin:            0;
  border-width:      1px;
}

#articles_wrapper .hsep
{
  grid-column-start: span 4;
  margin:            1em 0;
  border-top-style: dotted;
  width:            100%;
  height:           0;
  border-width:     1px;
}

.alist_title
{
  text-transform: uppercase;
  padding:        0 0 0.5em 0;
  display:        inline-block;
}

.alist_title a
{
  background:    white;
  color:         black;
  text-decoration: none;
}

.alist_text
{
  text-align:    justify;
}

#articles_wrapper .navbtn
{
  margin: auto;
}

.code
{
    border:     1px solid black;
    background: gainsboro;
    overflow-x: scroll;
    font-size:  0.772vw;
}

.listing_container
{
  display: inline-block;
  width:   100%;    
}

figure > img
{
  max-width: 100%;
}

figure
{
  break-inside: avoid;
}

#bibtex_bibliography
{
  display:               grid;
  grid-template-columns: 0.1fr 1fr;
}

.bibtex_bibliography_label
{
  text-align: left;
  margin:     0.2em;
}

.bibtex_bibliography_text
{
  margin: 0.2em;
}

#content_wrapper p > a:link,
#content_wrapper p > a:visited,
#content_wrapper div > a:link,
#content_wrapper div > a:visited,
.reflink a:link,
.reflink a:visited,
.bibtex_bibliography_link:link,
.bibtex_bibliography_link:visited
{
  background:      white;
  color:           black;
  text-decoration: none;
  
}

#content_wrapper p > a:hover,
#content_wrapper div > a:hover,
.reflink a:hover,
.bibtex_bibliography_link:hover
{
  background:      black;
  color:           white;
}

#content_wrapper p > a::after,
#content_wrapper div > a::after,
.reflink a::after,
.bibtex_bibliography_link::after
{
  content: "\00a0❯";
}

.bibtex_quick_info
{
  background:    #111111;
  color:         white;
  padding:       0.5em;
  border-radius: 0.5em;
  z-index:       100;
  position:      absolute;
  visibility:    hidden;
}

.bibtex_citation:hover .bibtex_quick_info
{
  visibility:       visible;
  transition:       ease-in;
  transition-delay: 500ms;
}

.bibtex_citation
{
  cursor: pointer;
}

.bibtex_quick_info a
{
  background:       #111111;
  color:            white;
  text-decoration:  underline;
  font-style:       italic;
}

.bibtex_quick_link:after
{
  content: ""
}

.infobox
{
  border:       dotted;
  border-width: 1px 0 1px 0;
  padding:      2%;
  margin:       5em 3em;
}

.infobox h1
{
  text-align:      left;
  text-transform:  uppercase;
  font-weight:     400;
  font-size:       1.057vw;
  border-style:    none;
  text-decoration: underline;
}