/*
BRAND COLORS:
Off-white: fbf9fc
ab5dea
6b1996
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*
html {
    margin: 0;
    padding: 0;
}
*/

/*PAGE SECTIONS*/
body {
    color: #444;
    font-family: sans-serif;

    border-top: 10px solid #862e9c;
    position: relative;
}

.container {
    /*width: 800px;*/
    width: 1200px;
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    margin: 0 auto;

    position: relative;
}

/*Boxes that contain multiple elements at the top:*/
.main-header {
    background-color: #f7f7f7;
    padding: 20px 40px;
    margin-bottom: 60px;
    /*height: 80px;*/
}

nav {
    font-size: 18px;
    /*text-align: center;*/
}

article {
    margin-bottom: 60px;
}

.post-header {
    margin-bottom: 40px;
}



aside {
    background-color: #f7f7f7;
    border-top: 5px solid #862e9c;
    border-bottom: 5px solid #862e9c;
  /*  padding-top: 50px;
    padding-bottom: 50px;*/
    padding: 50px 40px;
    /*width: 500px;*/
}


/*SMALLER ELEMENTS*/
h1, h2, h3 {
    color: #862e9c;
}

h1 {
    /*color: blue;*/
    /*font-size: 26px;*/
    /*text-transform: uppercase;*/
    /*font-style: italic;*/
    /*color: #ae3ec9;*/
    /*color: #7048e8;*/
    /*color: #5f3dc4;*/
    font-size: 44px;
    margin-bottom: 30px;

}

h2 {
    /*font-size: 40px;*/
    font-size: 36px;
    margin-bottom: 30px;
}

h3 {
    font-size: 30px;
    margin-bottom: 20px;
    margin-top: 40px;
}

/*I wont have H4 - just for SEO purposes and to make things simple*/
h4 {
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 30px;
}

p {
    /*font-size: 22px;*/
    font-size: 20px;
    /*line-height: 1.5;*/
    line-height: 1.6;
    /*margin-bottom: 15px;*/
    margin-bottom: 24px;
}

ul, ol {
    margin-left: 50px;
    margin-bottom: 20px;
}

li {
    font-size: 20px;
    margin-bottom: 10px;

}

li:last-child {
    margin: 0;
}
/*Descendant Selector*/
/*

footer p {
    font-size: 16px;
}
*/

/*Nested Descendant Selector*/
/*
article header p {
    font-style: italic;
}*/
#author {
    font-style: italic;
    font-size: 18px;
}

#copyright {
    font-size: 16px;
}

.related {
    list-style: none;
    margin-left: 0;
}

.related-author {
    font-size: 18px;
    font-weight: bold;
}

/*

.first-li {
    font-weight: bold;
}
*/

li:first-child {
    font-weight: bold;
}

li:last-child {
    font-style: italic;
}

li:nth-child(2) {
    /*color: tomato;*/
}

li:nth-child(even) {
    /*color: #862e9c;*/
}

/*if paragraph was the first element of the article*/
/*This wont work*/
article p:first-child {
    color: red;
}
/*p element inside article, and is last child of article*/
article p:last-child {
    color: rebeccapurple;
}

/*Styling Links*/
a {
    /*color: #862e9c;*/
}
/*LVHA*/
a:link,
a:visited {
    color: #862e9c;
    text-decoration: none;
}

a:hover,
a:active {
    color: orangered;
    font-weight: bold;
    /*text-decoration: underline dotted orangered;*/
    text-decoration: underline orangered;
}


.post-image {
    /*width: 300px;*/
    /*height: auto;*/
    width: 100%;
    height: auto;

    /*first post image is within a header with a margin of 40px -- may need to change this -- too much space after adding another margin*/
    margin-bottom: 24px;

}

nav a:link,
nav a:visited {
 /*   background-color: orangered;
    margin: 10px;
    padding: 20px;
    display: block;*/

    margin-right: 30px;
    /*margin-top: 10px;*/
    display: inline-block;
}

nav a:link:last-child {
    margin-right: 0;
}

button {
    font-size: 22px;
    padding: 20px;
    cursor: pointer;
    color: darkred;

    position: absolute;
 /*   top: 0;
    left: 0;*/
    bottom: 50px;
    right: 50px;
}

h1::first-letter {
/* font-style: normal;
    color: blue;*/
}

p::first-line {
    /*color: red;*/
}

/*Adject sibling selector*/
h3 + p::first-line {
    /*color: blue;*/
}

h1 {
    /*background-color: orangered;*/
    position: relative;
}

.heading-one::after {
    /*content: "TOP";*/
    /*content: "TOP ARTICLE";*/
    background-color: #ffe70e;
    color: #444;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    padding: 5px 10px;

    position: absolute;
    /*top: -10px;*/
    top: -30px;
    /*right: -25px;*/
    /*right: -20px;*/
    right: 0px;
}

/*FLEXBOX*/
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.author-box {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.author {
    margin-bottom: 0;
    /*margin-left: 15px;*/
}

.related-post {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-bottom: 30px;
}

.related-link:link {
    font-size: 17px;
    font-weight: bold;
    font-style: normal;

    margin-bottom: 5px;
    display: block;

}

.related-author {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
}

.row {
    /*display: flex;*/
    /*align-items: flex-start;*/
    /*gap: 75px;*/
    margin-bottom: 60px;
    max-width: 800px;
    margin: 0 auto;
}

article {
    /*flex: 0 0 825px;*/
    /*flex: 1; !*(grow as much as it can)*!*/
    margin-bottom: 0;

}

aside {
    /*flex-basis: 300px;
    flex-shrink: 0;*/
    /*flex: 0 0 300px;*/
}


/*
LOGO
*/
.logo-box {
    flex-basis: 80px;
}

.logo {
    width: 100%;
}