a {
    color: #b58463;
    text-decoration: none;
    font-weight:400;
    font-family: 'PT Serif', serif;
}

a:hover{
    color:#bbd0ff !important;
}

/* width */
::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #b58463;
border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #9A7054;
}

#mk-link{
    border:2px solid #b58463;
    padding:3px;
    line-height:20px;
    border-radius:6px;
}

#mk-link:hover{
    color:#bbd0ff !important;
    border:2px solid #bbd0ff;
}

p{
    color: #454545;
    font-weight:500;
}

body{
    background-color: #fafafa;
    margin:0;
    font-family: 'PT Serif', serif;
    font-weight:300;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    overflow-x:hidden;
    line-height: 1.5rem;
}

h1{
    color: #454545; 
    font-family: 'PT Serif', serif;
    font-size:2.5rem;
    font-weight:700;
    line-height:50px;
    margin:0;
}

h2, h3{
    color: #454545; 
    font-family: 'PT Serif', serif;
    font-size:24px;
    font-weight:700;
    /* font-style:italic; */
}

li{
    color: #454545; 
    font-family: 'PT Serif', serif;
    font-size:16px;
}

#author{
    color:#b58463;
}

#timestamp{
    float:right;
}

#sidebar-sep{
    font-size:11px;
    text-align: center;
    margin-bottom: 20px;
    color: #454545;
}

.outer-line-sidebar {
    width: 35%;
    border-bottom: 1px solid #454545;
}

.ow-code{
    color:#b58463; 
    font-family: 'Source Code Pro', monospace;
    font-size: 13px;
    background-color:#ededed;
    font-weight:500;
    border-radius: 2px;
    padding:0px 3px;
    line-height: 20px;
}

footer{
    position: absolute;
    left:0;
    background-color: #b58463;
    color:white;
    text-align: center;
    width:100vw;
}

#footer{
    padding:40px;
}

.footer-h2, .footer-p, .footer-a{
    color:white;
}

.footer-h2{
    font-weight: 700;
    font-style:italic;
    text-decoration: none;
    font-family: 'PT Serif', serif;
}

#title {
    font-size:3.2rem;
    font-weight: 700;
    color: #454545;
    font-style:italic;
    text-decoration: none;
}

#h2-subtitle{
    font-size:1.8rem;
    display:none;
}

#h3-subtitle{
    font-size:1.4rem;
    margin-top:0.5rem;
}

#header {
    padding:3rem 0rem 3rem 0rem;
}

#container {
    /* width:100vw; */
    text-align: center;
    padding-bottom:2rem;
    /* border:1px solid blue; */
}

#links {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.1rem;
}

#content {
    width:65vw;
    margin:auto;
    /* border:1px solid pink; */
}

#siderail{
    /* border:1px solid red; */
    float:right;
    width:19vw;
    max-width: 19vw;
    margin-left:2rem;
    /* min-height: 100vh; */
    min-height:160vh;
    overflow:visible;
}

#convo-title-container{
    display:flex;
    align-items:baseline;
    line-height: 1.5rem;
    color:gray;
    font-style: italic;
}

#liveblog-container{
    padding-top:1rem;
}

#notion{
    margin-bottom:-0.8rem;
}

.notion-link{
    font-weight:600;
    letter-spacing: 0rem;
}

#counter{
    padding:0.5rem;
}

#img-container{
    max-width: 100%;
}

#topic-tracker-small{
    display:none;
}

#comment-counter{
    border:none;
    border-radius: 20px;
    font-size: 1rem;
    color:white;
    padding:8px 15px;
    background-color: #b58463;
    font-family: 'PT Serif', serif;
    font-weight:600;

    float:right;
    align-self: baseline;
}

#comment-counter:hover{
    background-color: #9A7054;
    cursor: pointer;
}
#mockup {
    text-align: center;
    width:330px;
    margin-right:11px;
    margin-bottom:11px;
    border:1px solid #b58463;
    transition: transform .2s ease-in-out;
    color:#454545;
  }

  #mockup:hover{
    border: 1px solid #bbd0ff;
  }

  svg g{
    transition: transform .2s ease-in-out;
  }

  #mockup:hover svg g{
    fill:#253141 !important;
    stroke: #253141 !important;
    transform: translate3d(6px, 0px, 0px);
  }

  #mockup-img {
    width:100%;
    align-self: center;
    max-height: 100%;
    overflow:hidden;
  }

  #mockup-img-bg {
    height:230px;
    background-color: white;
    overflow:hidden;
  }

  #mockup-subtext{
    text-align:left;
    font-style: italic;
    margin-left:15px;
    padding-top:15px;
  }

  #mockup-body{
    padding-bottom: 10px;
  }

  #mockup-btn{
    text-align: right;
    font-style: italic;
    padding-right:17px;
    padding-top:15px;
    z-index: 999;
  }

  .mockups{
    position:relative;
    left:0;
    margin: auto;
    width:100vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .only-show-mobile{
    display:none;
    }

    .only-show-desktop{
        display:inline;
    }

#olivias-box{
    padding:10px; position:fixed; height:100vh; width:40vw; background-color:white; left:100vw; z-index:9999; transition: left 500ms ease-in-out; overflow-y:scroll;
}

#olivias-close{
    float:right; font-size:25px; background-color:transparent; border:none;z-index:9999999;color:black;margin-right:12px;
}

#olivias-box-convo{
    width:95%;margin:auto;margin-top:40px;
}

#pitc{
    width:48vw;
}

h4{
    font-weight: 400;
    color:#454545;
    font-size:22px;
    margin:0;
}
  
span {
    display: inline-block;
    vertical-align: middle;
}



@media screen and (max-width:1100px){

     #siderail{
        display:none;
    }

    #topic-tracker-small{
        display:contents;
    }

    #content{
        width:90vw;
        margin:auto;
    }

    p{
        font-size: 1.1rem;

    }

    
    #header{
        width:90vw;
        padding:0;
        margin:auto;
        margin-bottom:2vh;
    }

    #links{
        letter-spacing: 1px;
        font-size:18px;
        line-height:35px;
    }

    .only-show-mobile{
        display:inline;
    }
    .only-show-desktop{
        display:none;
    }

    .footer-p, .footer-a{
        font-size:16px;
    }

    #pitc{
        width:90vw;
        margin:auto;
    }

    #mk-link{
        border:2px solid #b58463;
        padding:3px;
        line-height:20px;
        border-radius:6px;
    }
}