style.css

* {
  /* Here, every single element gets this property.
  And unless otherwise specified, it will hold it.
  Every single element! Uncomment the line below,
  inspect the page, and you will see it!
  Yeah, do as recommended - a very insightful thing.*/

  /* background-color: green; */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  color: #444;

  border-top: 10px solid #1098ad;
}

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

  position: relative;
}

h1,
h2,
h3 {
  color: #1098ad;
}

.main-header {
  background-color: #dcdcdc;
  padding: 20px 40px;
  /* margin-bottom: 60px; */

  /* height: 80px;*/
}

.main-nav {
  font-size: 18px;
  text-align: center;
}

article {
  /* margin-bottom: 60px; */
}

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

/*This is a class selector*/
.author {
  font-size: 18px;
  font-style: italic;
}

.img-code {
  width: 100%;
  height: auto;
  /* We need this 'auto' because we made 
  specified height and width in HTML. If we
  don't apply this line, our height will
  always be as specified in the HTML.*/
}

h1 {
  font-size: 26px;
  text-transform: uppercase;
  font-style: italic;
}

/* Pseudo-element */
h1::first-letter {
  font-style: normal;
  margin-right: 5px;
}

h2 {
  font-size: 40px;
  margin-bottom: 30px;

  position: relative;
}

h2::after {
  content: "TOP";

  font-size: 16px;
  font-weight: bold;
  color: #444;
  background-color: #ffe70e;
  display: inline-block;
  padding: 5px 10px;
  position: absolute;
  right: -26px;
  top: -15px;
}

h3 {
  font-size: 30px;

  margin-top: 40px;
  margin-bottom: 20px;
}

h4 {
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}

p {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 15px;
}

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

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

  /* display: inline; */
}

li:last-child {
  margin-bottom: 0;
}

/* footer p {
  /*Descendant property: we want 'p'-s which are inside 'footer'.
  In this way, we style only these 'p'-s - other 'p'-s
  in the HTML are not changed.
  
  font-size: 16px;
} */

/*This is an ID selector*/
#copyright {
  font-size: 16px;
}

aside {
  background-color: #dcdcdc;
  border-top: 5px solid #1098ad;
  border-bottom: 5px solid #1098ad;
  padding: 50px 40px;
}

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

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

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

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

a:link,
a:visited {
  color: #1098ad;
  text-decoration: none;
}

a:hover {
  color: #1098ad;
  font-weight: bold;
  text-decoration: underline;
}

a:active {
  background-color: black;
  color: white;
  font-style: italic;
}

/* When styling hyperlinks, this exact sequence 
of 4 properties is held: LVHA */

.main-nav a:link {
  margin-right: 30px;
  /* margin-top: 10px; */

  display: inline-block;
}

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

button {
  font-size: 20px;
  padding: 10px;
  cursor: pointer;

  position: absolute;
  bottom: 0;
  right: 0;
}

/* Applying FLOAT

h1 {
  background-color: red;
  float: left;
}

nav {
  background-color: yellow;
  float: right;
}

.clearfix::after {
  clear: both;
  content: "";
  display: block;
}


article {
  width: 825px;
  float: left;
}

aside {
  width: 300px;
  float: right;
}

footer {
  clear: both;
} */

/* 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;
  display: block;
  margin-bottom: 5px;
}

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

/* FLEXBOX LAYOUT */
/* .row {
  display: flex;
  align-items: flex-start;
  gap: 75px;
  margin-bottom: 60px;
}

article {
  flex: 1;
  flex-grow: 1 kyldyk. demek bar bos jerdi alatyn bolady bul element

  margin-bottom: 0;
}

aside {
  DEFAULTS
     flex-grow: 0
     flex-shrink: 1
     flex-basis: auto
  

  flex: 0 0 300px;
} */

/* CSS GRID */

.container {
  display: grid;
  grid-template-columns: 1fr 300px;
  column-gap: 75px;
  row-gap: 60px;
  align-items: start;
}

.main-header {
  grid-column: 1 / -1;
}

aside {
}

footer {
  grid-column: 1 / -1;
}