/*!
Theme Name: W/r/i/gh/ting
Theme URI: http://underscores.me/
Author: Maggessi/Morusiewicz
Author URI: https://www.maggessi-morusiewicz.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wrighting
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

W/r/i/gh/ting is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wdth,wght@75..112.5,100..800&display=swap');


*{
    font-family: "Martian Mono", monospace;
    font-weight: 600;
    font-style: normal;
}

html{
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;}

body{
    display: flex;
    justify-content: space-around;
    
    padding:0;
    margin:0;
    background-color:#F4F4F4;
}

.w-100{width:100%;}

header{
    width:100%;
    top:0;
    left:0;
    position:fixed;
    z-index:6;
}

header h1{
    top: 0;
    right:0;
    
    position:relative;
    padding: 25px 60px 15px 15px;
    margin:0;
    
    z-index:6;
}

header h1 span.title{display: none;}
header h1:hover span.title{display: inline;}

/*header h1 span.page{
    color: #838383;
    margin-left: 15px;
}

header h1 span a.parent-page{
    color: blue;
    text-decoration: none;
    margin-left: 15px;
}

header h1 span.page a{
    color: magenta;
    text-decoration: none;
}*/

nav{
    width: 375px;
    height: 100%;
    
    position:fixed;
    top:0;
    right:0;
    transform:translateX(375px);
    
    z-index:1;
    
    transition:.3s ease-in;
}

nav.open{
    transform:translateX(0);
    z-index:1;
}

.menu-toggle{
    position: fixed;
    z-index:10;
    
    top: 30px;
    right:15px;
    padding: 0;
    
    width: 30px;
    height: 20px;
    
    cursor: pointer;
    
    /*border:2px solid black;*/
    
}

.menu-icon .dash:before{
    content:"";
    position:absolute;
    right: 0;
    width: 30px;
    height: 0;
    
    border-bottom: 2px solid black;
}

.top:before{top: 0px;}
.middle-1:before{top: 10px;}
.middle-2:before{top: 10px;}
.bottom:before{top: 20px;}


nav ul{
    padding: 145px 15px 15px 15px;
    list-style: none;
}

nav ul li{
    margin: 0 0 15px 0;
}

nav ul li h3{
    margin: 0
}

/* Correct main padding-top for pages x homepage */
main.home-page{
    max-width:1200px;
    
    position:relative;
    padding:179px 15px 15px 15px;
    margin:0;
    
    transition: .3s ease-in;
}

main.page{
    max-width:1200px;
    position:relative;
    padding:179px 15px 15px 15px;
    
    margin:0;
    
    transition: .3s ease-in;
}

main.open{
    transform: translateX(-375px);
    opacity: .3;
}

.bg-white{background-color: white;}
.bg-black{background-color:black;}
.bg-light-grey{background-color: #F4F4F4;}
.bg-grey{background-color: #d3d3d3;}
.bg-dark-grey{background-color: #838383;}

.white{color: white;}
.grey{color: #d3d3d3;}
.light-grey{color: #F4F4F4;}
.dark-grey{color: #838383;}
.black{color: black;}
.sticky{position:sticky;}

section{
    padding: 0 15px 15px 15px;
    scroll-margin-top: 147px;
    
    display: flex;
    flex-wrap: wrap; 
}

section.hero{
    padding: 0 15px 15px 15px;
    display: flex;
    flex-wrap: wrap;
}

.space-between{justify-content:space-between;}
.end{justify-content:end;}

section.tbc div{
    width:100%;
    padding: 10px 10px 0 0;
}

section.intro{
    
}

section.intro div.tags{
    padding: 0 0 30px 0;
    display: flex;
    flex-wrap: wrap;
}

section.intro div.intro-thumbnail{
    width:100%;
    height: 500px;
    background-color: black;
}

section.intro p.caption{
    width:100%;
}

section .section-title{
    width: 100%;
    margin: 0;
    padding: 0;
    top:174px;
}

.section-title h2{
    padding-top: 15px;
    padding-bottom: 30px;
    margin:0;
    display: inline-block;
}

section div.content{
    padding: 15px 0 0 0;
    margin-bottom:15px
}

section.feed{padding: 0 45px 15px 15px;}

a.post{
    text-decoration: none;
}

div.post{transition: .3s;}
a.post:hover div.post{background-color: blue;}

section div.content div.post{
    padding: 30px 45px 0 30px;
    margin-bottom:15px
}

section div.content div.post div.tags{
    padding: 15px 0 32px 0;
    display: flex;
    flex-wrap: wrap;
}

section div.content div.image{
    padding: 15px 0;
}

section div.content div.image img{
    width:100%;
    max-width:526px;
}

section div.content div.outcome-material{
    border: 4px solid black;
    border-radius: 25px;
}

/*section div.content div.interview{
    padding-top:0;
    margin-top:0;
    display: flex;
    flex-wrap:wrap;
}

section div.content div.interview p{padding-top:0;}
section div.content div.interview p.speaker{width:5%;}
section div.content div.interview p.spoken{
    width:90%;
    padding-left:10px;
}*/

section div.content div h3{
    margin:0;
}

.tags span.white{
    margin-right: 5px;
    margin-bottom: 5px;
    border: 2px solid white;
    border-radius: 100px;
    padding: 15px 20px;
}

.tags span{
    margin-right: 5px;
    margin-bottom: 5px;
    border: 2px solid black;
    border-radius: 100px;
    padding: 15px 20px;
    
    font-weight:400;
    font-variation-settings:"wdth" 100;
}

span.status{
    margin-right: 20px;
}

span.status:before{
    content:"";
    position:absolute;
    margin-top: 3.75px;
    margin-left: -2px;
    width: 15px;
    height: 15px;
    border-radius: 100px;
}

span.status.done:before{background-color: limegreen;}
span.status.doing:before{background-color: darkorange;}
span.status.to-do:before{background-color: yellow;}

li.footnote-block{
    display: flex;
    flex-wrap: nowrap;
}

li.footnote-block a{
    font-size: 14px;
    
    scroll-margin-top:120px!important;
}

span.footnote-text{
    font-size: 14px;
    padding-top:0;
    
    margin-left:10px;
    
    font-weight:400;
    font-variation-settings:"wdth" 100;
}

footer{
    padding: 30px 15px 30px 15px;
    scroll-margin-top: 147px;
    
    display: flex;
    flex-wrap: wrap;
}

footer h2{
    width: 100%;
    margin: 0;
    padding: 10px 0;
    top:174px;
}

footer div{
    padding: 10px 10px 0 10px;
    margin:0 15px 0 0;
    width: 100%;
}

footer div.text{
    padding: 10px 0;
    margin-bottom:15px
}

footer div h3{margin:0;}

footer img{
    margin: 15px;
    width: 285px;
}

/* TYPOGRAPHY */

.martian-mono-<uniquifier> {
  font-family: "Martian Mono", monospace;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" <width>;
}

h1,h2,h3,h4,h5,h6{
    font-weight: 600;
    font-variation-settings:"wdth" 112.5;
}

h1{font-size: 28px;line-height: 1.6;}

h1 a {
    text-decoration: none;
    color:black;
}
div.title h1{
    font-size: 28px;
    margin: 15px 0 0 0;
}
h2{font-size: 24px; 
    line-height: 1.6;
    margin:0;
}
h3{font-size: 20px;}

nav ul li{font-size: 20px;}

p{
    margin:0;
    padding: 15px 0;
    font-size: 18px;
    
    line-height: 1.8;
    
    font-weight:400;
    font-variation-settings:"wdth" 112.5;
}

p.small{font-size: 14px;}

.align-right {text-align: end;}

div.copy{padding: 0 0 15px 0;}
div.copy p{padding:0;}
p.caption{font-size: 12px; padding: 10px 0;}

.tbc p{
    font-size: 14px;
    text-decoration: underline 2px;
    align-self: flex-end;
}

.tbc p.date{padding-bottom: 5px;}

p.detail{font-size: 14px;}

a.link{
    position:relative;
    display: inline-block;
    
    text-decoration: none;
    font-size: 16px;
    font-weight:400;
    font-variation-settings:"wdth" 100;
    
    border: 2px solid blue;
    padding: 15px 20px;
    margin-top:30px;
    border-radius: 100px;
}

div.tags a.link{margin-top:15px;}

a.link.black{border: 2px solid black;}
a.link.grey{border: 2px solid #d3d3d3;}

a.footnote{
    position: relative;
    
    font-size: 8px;
    color: blue;
    text-decoration: none;
    border: 2px solid blue;
    border-radius: 100px;
    
    padding: 4px 6px;
    margin-left: 0;
    top: -8px;
    vertical-align: baseline;
    
    scroll-margin-top:150px;
}


ol{
    margin: 0;
    padding: 0 15px 5px 0;
    list-style:none;
    
    font-weight:400;
    font-variation-settings:"wdth" 100;
}

.no-list-style{
    list-style:none;
    margin:0;
    padding: 0 15px 5px 0;
}

.no-text-decoration{text-decoration: none!important;}

ul.references{ 
    list-style-type: disc;   
    list-style-position: outside;
    padding: 0px 20px
}

ul.references li{display: list-item;}

li{
    font-size: 14px;
    line-height: 1.8;
    
    font-weight:400;
    font-variation-settings:"wdth" 100;
}

li a{
    text-decoration: none;
    font-weight:400;
    font-variation-settings:"wdth" 100;
}

div.copy ul{
    list-style:square;
    padding: 0 0 0 20px;
}

div.copy ul li{font-size: 18px;}

footer p{font-size: 14px;}

div.hero-image{
    width:100%;
    padding: 30px 0 0 0;
    display: flex;
    flex-wrap: wrap;
}

div.hero-image img{height:450px;}

div.image{
    width:100%;
    padding: 30px 0 0 0;
}

div.image img{height:450px;}


/* RESPONSIVENESS */

@media only screen and (min-width: 396px) {
    section .section-title{top:219px;}
    footer h2{top:219px;}
    .menu-toggle{top: 30px}
  
}

@media only screen and (min-width: 550px){
    section .section-title{top:129px;}
    footer h2{top:129px;}
    footer img{margin: 15px 15px 0 15px;}
    
    .menu-toggle{top: 30px;}
}

@media only screen and (min-width: 982px){
    /* check header.php, idea to fade the long name out*/
    
    div.hero-image{flex-wrap: nowrap;}
    
    div.hero-image p{padding:0 0 0 15px;}
    
    main.page{
        padding:75px 15px 15px 15px;
    }
    
    section.hero{
        div.space{width:30%;}
        div.title{width:70%;}
    }
    
    section.space{width: 30%;}
    section .section-title{
        top: 73px;
        width: 30%;
    }
    section.hero{flex-wrap: nowrap;}
    
    section div.content{padding-top:15px;}
    
    h2.sticky{
        top: 84px;
        padding-right: 30px;}
    
    section div.content{width:70%;}
    
    section.tbc div{width:30%;}
    
    section div.tbc{width:30%;}
    
    section.intro{
        display:flex;
        flex-wrap:wrap;
    }
    section.intro span.w-30{width:30%;}
    section.intro div.w-70{width:70%;}
    section.intro div.w-70 p{padding:0 0 30px 0;}
    
    div.space{width:33%;}
    
    /*section.intro h1{
        width:100%;
        padding-left: 195px;
    }
    section.intro div.intro-thumbnail{margin-left: 195px;}
    section.intro p.caption{padding-left: 195px;}
    section.intro div.tags{padding: 0 0 30px 195px;}*/
}
@media only screen and (min-width: 1061px){
    header h1 span.title{display: inline;}
}