html {
    font-size:16px;
    line-height:1.5;

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1rem;
    }
}

/*-------------------------SPECIFIC--sTUFFF-----------------------------*/
.content-layout{
    margin:6rem auto;
    width:90%;
    display:flex;
    justify-content:space-between;
}
.blog-content{
    flex:auto;
    font-weight:500;
    color:black;
    user-select: text;
} 
.blog-content ::selection{
    background:#eb078f1b;
}
.blog-content ::-moz-selection{
    background:#eb078f1b;
}

.blog-content h1{
    text-align: center;
    font-weight: 700;
}

.headline-preview{
    text-align: left;
    font-weight: 600;
    margin-top: 2.6rem;
}
.blog-content a {
    text-decoration:none;
    color:black;
}

.blog-content li{
    padding:0.5rem;
}

.highlighted-text{
    color:#e84ba9;
    font-weight: 700;
}
.highlighted-text a{
    color:inherit;
    text-decoration: none;
}
.sidebar{
    width:100%;
}
.sidebar #facebook-banner{
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.fb-page{
    display:none !important;
}
.contact-link:hover{
    font-weight:900;
    text-shadow: 8px 0px 5px rgba(255, 23, 92, 1);
}
article h2{
    text-align: center;
    font-weight: 600;
}
article h3{
    font-style: italic;
    font-weight: 500;
}
article p{
    color:rgb(105, 105, 105);
}
article .link-more{
    font-weight: bold;
    text-decoration:none;
    color:black;
    padding:12px;
    background-color:transparent;
    border: 2px solid #be0674c7;
    border-radius:5px;
    float:right;
}
article .link-more:hover{
    font-weight: 900;
    color:white;
    border: 2px solid transparent;
    background-color: #be0674c7;
}
article{
    display:flex;
    flex-flow:column;
    padding:12px;
    gap:5%;
    line-height: normal;
    align-items: center;
}
.article-subtext{
    display:flex;
    gap:2%;
    align-items:center;
    font-size:0.8rem;
    color: rgb(159, 159, 159);
}
.article-border-bottom{
    left:50%;
    border-top:2.5px dashed #be067496;
    width:70%;
    transition:(0,-50%);
}
.article-image{
    width:100%;
    object-fit:cover;
    aspect-ratio: 1 / 1;
}

@media screen and (min-width:600px){
    .content-layout{
        flex-flow:row;
    }
    .blog-content{
        width:70%;
        margin-top:0;
    }
    .sidebar{
        width:30%;
        float:right;
    }
    .fb-page{
        display:block !important;
    }
    article{
        flex-flow:row;
        border-right: 2.5px dashed #be067496;
    }
    .article-image{
        width:30%;
        height:auto;
    }
}