/*colors: light B8396C; bold 73193E; background C2B5D1, dark 341D24*/

html {
    font-family: "Raleway", Helvetica, Arial, sans-serif;
}

body, div#main {
    background-color: #FBFAFD;
    color: #341D24;
    font-family: "Raleway", Helvetica, Arial, sans-serif;
}

#main {
    background-color: #FBFAFD;
    color: #341D24;
}

div#menu {
    background-color: #341D24;
    color: #fff;
}
div#menu a {
    color: #fff;
}

#menu .pure-menu ul {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

#menu .pure-menu.social ul {
    border-top: none;
}

div.header {
    color: #341D24;
    border-bottom: 1px solid #B8396C;
}
.header h2 {
    color: #B8396C;
    font-style: italic;
    font-size: 1.1em;
}

h1, h2 {
    color: #B8396C;
}


h3 {
    color:  #73193E;
}

hr {
    background-color: #B8396C;
    height: 3px;
}

blockquote {
    border-left: 3px solid #B8396C;
    padding-left: 5px;
}

a, a:hover, a:focus, a:visited {
    color:#B8396C;
    font-family: "Raleway", Helvetica, Arial, sans-serif;
}


div.post-meta, .post-meta a {
    color: #B8396C;
    font-family: "Raleway", Helvetica, Arial, sans-serif;
}

#main pre, #main .highlight pre {
    font-family: "Courier New", monospace;
}

pre not(.chroma) {
    background-color: #fff;
    border: 1px solid #73193E;
    padding: 5px;
}

section#cover {
    background-image: url('../img/Cover.png');
    background-size: calc(100vw - 150px);
    height: calc(.389*(100vw - 150px));
}

#main img {
  width: 60%;
  height: auto;
  margin-left: 20%;
}

p.caption {
  text-align: center;
  font-style: italic;
  margin-top: -15px;
}

.menu-link {
  background-color: #341D24b3;
}
.menu-link:hover {
  background-color: #341D24;
}

img#portrait {
  width: 200px;
  height: 200px;
  object-fit:cover;
  border-radius: 100px;
  float: right;
  object-position: 30% 50%;
}

/*

Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {
}

@media (max-width: 48em) {
    section#cover {
        background-size: 100vw;
        background-repeat:no-repeat;
        height: calc(.389*(100vw));
    }
}

@media (min-width: 80em) {
    section#cover {
        background-size: 100vw;
        height: calc(35vh);
        object-fit:cover;
        background-position: center 50%;
    }
}

/*dark mode*/

.dark-mode body, .dark-mode div#main {
    color: #FBFAFD;
    background-color: #341D24;
}

.dark-mode #main {
    color: #FBFAFD;
    background-color: #341D24;
}

.dark-mode div#menu {
    background-color: #130A0D;
    color: #fff;
}

.dark-mode .menu-link {
  background-color: #130A0Db3;
}

.dark-mode .menu-link:hover {
  background-color: #130A0D;
}

.dark-mode div#menu a {
    color: #fff;
}

.dark-mode #menu .pure-menu ul {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.dark-mode div.header {
    color: ##fff;
    border-bottom: 1px solid #B8396C;
}

.dark-mode .header h2 {
    color: #EEA1D2;
    font-size: 1.1em;
}

.dark-mode h1, .dark-mode h2 {
    color: #EEA1D2;
}


.dark-mode a, .dark-mode a:hover, .dark-mode a:focus, .dark-mode a:visited {
    color:#F865AA;
}


.dark-mode div.post-meta, .dark-mode .post-meta a {
    color: #F865AA;
}

.dark-mode h3 {
    color:  #B199B1;
}


.dark-mode pre not(.chroma) {
    background-color: #130A0D;
    border: 1px solid #B8396C;
    padding: 5px;
}