* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
--base:#fffbf6;  /* offwhite */
--accent:#bf080a; /* cyan */
--contrast:#ea3326; /* red */
--shade:#2f748e; /* teal */
--link:#8eb3ce; /* pale blue */
--saturated:#3f8cc8; /* saturated blue */
--dark:#123955; /* even darker blue */
}

body {
font: 400 16px Lora, helvetica,sans-serif;
color: #000;
margin: 0;
padding: 0;
background: #000;
color:#eee;
background-image:url(bg.jpg);
}

header {
text-align: center;
padding: 50px 0 90px 0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}

#tartarus {
min-height:953px;
background-image:url(tartarus.jpg);
background-size:cover;
background-color:#000;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 84%) !important;
}

#tartarus:before {
background:#000;
/*transform-origin: right top;
transform: skewY(7deg);*/
}

#tartarus div {
width:50%;
margin:0 auto;
}

#tartarus p {
background:rgba(0,0,0,0.5);
border-radius:50px;
padding:20px;
}

#tartarus a {
color:var(--saturated);
text-decoration: none;
}

#tartarus a:hover {
color:var(--base);
border-bottom:3px solid var(--base);
}

#tartarus nav {
font-family:"Averia Serif Libre";
letter-spacing:-2px;
text-transform: uppercase;
break-after: always;
break-before:left;
}

#tartarus nav ul {
list-style: none;
}

#tartarus nav ul li {
display:inline;
}

#tartarus nav ul li:after {
content:' 💀 '
}

#tartarus nav ul li:last-child:after {
content:'';
}

#tartarus nav a {
color:var(--base);
text-decoration: none;
}

#tartarus nav a:hover {
color:var(--saturated);
border-bottom:3px solid var(--base);
}

#tartarus del { color:#aaa;}

#tartarus blockquote {

}


#asphodel {
background-image:url(asphodel.jpg);
}

#elysium {
background-image:url(elysium.jpg);
}


#asphodel:before {
background:#000;
}

/* angled div */
.slant {
position: relative;
padding: 200px 0;
overflow: visible;
z-index: 1;
text-align: center;
font-size: 1.5em;
line-height: 1.5;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}


.slant:nth-child(odd) {
clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}
.slant:nth-child(even) {
clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}



/* text styling */

h1 {
font-size: 2em;
font-weight: 400;
margin: 0;
font-family:"UnifrakturCook","times new roman", times, serif;
font-weight:700;
}  

h2 {
font-size: 1.5em;
font-weight: 400;
margin: 0;
font-family:"Abril Fatface", "times new roman", times, serif;
font-weight:700;
}

h3 {
font-size: 1.2em;
font-weight: 400;
margin: 0;
font-family:"Averia Serif Libre","times new roman", times, serif;
font-weight:700;
}

pre, code {
font-family:"Inconsolata","Courier New",monospace;
}


footer {
  color: #999;
  text-align: center;
  padding: 100px 0 50px 0;
  background: #080808;
}


/* responsive */

/* responsive */


@media (max-width:420px) {



    section {
    margin:0px auto;
    width:100%;
    }
    
    nav ul li a, h1 { font-size:30px !important; }

}

@media (min-width:420px) and (max-width:768px) {

    header {
    width:100%;
    height:auto;
    }
    

    div#container {
    margin:0px auto;
    width:100%;
    }

    section {
    margin:0px auto;
    width:100%;
    }
    
    nav ul li a, h1 { font-size:22px !important; }

    
}

@media (min-width:768px) and (max-width:1200px) {

    header {
    width:100%;
    height:auto;
    }
    
    
    div#container {
    width:80%;
    }

    section {
    float:none !important;
    margin:0px auto;
    clear:both;
    width:100%;
    }
    
}


@media (min-width:1200px) and (max-width:1450px) {


    div#container {
    width:80%;
    }

    section {
    float:none !important;
    margin:0px auto;
    clear:both;

    }
    

}

/*
@media only screen
and (max-width : 720px) {
  
  header {
    padding: 30px 30px 50px 30px;
  }

  .slant {
    padding: 100px 0;
  }
  
  footer {
    padding: 65px 0 50px 0;
  }
    
  h1 {
    font-size: 1.5em;
  }

}*/

/* where the magic happens 
.slant:before, .slant:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background:inherit;
  z-index: -1;
  top: 0;
  transform-origin: right top;
  transform: skewY(3deg);
}

.slant:after {
  bottom: 0;
  transform-origin: right bottom;
  transform: skewY(-3deg);
}*/