body { width:90%;max-width: 1500px; min-width:800px;margin:0 auto}
body { background: url(../img/raven2.png) no-repeat fixed bottom right; background-size:cover;}
body * { opacity:90% }

.logo,div#header h1 { width:100%;margin:30px auto;text-align:center} 

.post {width:48%;height:600px;float:left;margin-right:10px; position:relative;object-fit:cover }
.post:nth-of-type(3n+2) {width:100%;margin:60px 0; object-fit: cover;height:600px}

a {color:#9c006b }


.post img { 
-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-moz-transition: 1s filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
transition: 1s filter linear, 1s -webkit-filter linear;
max-width:100%;
width:100%;
object-fit:cover;
height:600px;  
filter: sepia(100%) brightness(50%);
} 

img:hover { filter: sepia(0%) brightness(100%); }

.post h3 { margin:10px  50%;position:absolute; left:-30px; top:30px; font-size:80px;line-height:60px; mix-blend-mode:color-dodge;color:black;background-color:rgba(255,2555,255,0.7) }

.post a>h3 { margin:10px  50%;position:absolute; left:-30px; top:30px; font-size:80px;line-height:60px; mix-blend-mode:color-dodge;color:black;background-color:rgba(255,2555,255,0.7) }

.post h3:hover  {background-color:rgba(0,0,0,0);color:white}
.post a>h3:hover  {background-color:rgba(0,0,0,0);color:white}

.will a h3 { left:200px } 

@media screen and (max-width: 1000px) {
.will a h3 {left:0px }
.post h3 {font-size:8vw; line-height:9vw }
.post a h3 {font-size:8vw; line-height:9vw }
.post {width:90%;margin:20px;padding:0px}
.post:nth-of-type(3n+2) {width:90%;margin:20px; object-fit: cover;height:600px}
body { min-width:300px}
h1 { font-size: 7vw }
}

#writing .post {width:48%;float:left;margin-right:10px;}