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

body {
  background-color: #18181B;
  color: white;
  font-family: sans-serif;
}


/***************** Nav Start *****************/
nav {
  background-color: #27272A;
  padding: 1rem;
  border-radius: 1rem;
  max-width: 50rem;
  margin: 1rem auto;
}

nav a {
  text-decoration: none;
}
/***************** Nav End *****************/


/***************** Header Start *****************/
header {
  background-color: #27272A;
  border-radius: 1rem;
  max-width: 50rem;
  margin: 1rem auto;
}

header img {
  border-radius: 1rem 1rem 0 0;
  max-width: 50rem;
}

header h1{
  padding: 1rem 1rem 0 1rem;
}

header p{
  padding: 0 1rem 1rem 1rem;
}

header p#author{
  font-size: .7rem;
  color: #8B8B8B;
}

header p#author a {
  color: #8B8B8B;
}

/***************** Header End *****************/

/***************** Main Start *****************/
main article section {
  background-color: #27272A;
  padding: 1rem;
  border-radius: 1rem;
  max-width: 50rem;
  margin: 1rem auto;
}

main article section img {
  max-width: 40rem;
  display: block;
  margin: auto;
  border-radius: .5rem;
}

main article section h2, main article section h3 {
  padding: 1rem 0;
}

main article section ul {
  padding: 1rem 0 1rem 2rem;
}

main article section li {
  padding: .3rem;
}

main article section a {
  color: #10B981;
}

main article section p {
  padding: .3rem 0;
}

main article section div#nav-buttons {
  text-align: center;
}

main article section a.nav-button {
  display: inline-block;
  padding: 1rem;
  margin: 1rem;
  border: .18rem dashed #10B981;
  border-radius: 1rem;
  background-color: #18181B;
  height: 9rem;
  width: 10rem;
  text-decoration: none;
  text-align: center;
  color: #a1a1aa;
}

main article section a.nav-button:hover {
  background-color: #3F3F46;
}

main article section a.social-button {
  background-color: #3F3F46;
  border-radius: .3rem;
  padding: .5rem;
  color: white;
  text-decoration: none;
}

main article section a.social-button:hover {
  background-color: #52525B;
}

main article section a.topic {
  color: white;
  background-color: #3730A3;
  font-size: .9rem;
  padding: .5rem .8rem;
  margin: .2rem;
  border-radius: 1rem;
  text-decoration: none;
  display: inline-block;
}

main article section a.topic:hover {
  background-color: #312E81;
}
/***************** Main End *****************/

/***************** Footer Start *****************/
footer {
  background-color: #27272A;
  padding: 1rem;
  border-radius: 1rem;
  max-width: 50rem;
  margin: 1rem auto;
  text-align: center;
}

footer a.topic {
  color: white;
  background-color: #3730A3;
  font-size: .9rem;
  padding: .5rem .8rem;
  margin: .2rem;
  border-radius: 1rem;
  text-decoration: none;
  display: inline-block;
}

footer a.topic:hover {
  background-color: #312E81;
}

footer hr{
  margin: 1rem;
  height: .2rem;
  background-color: #a1a1aa;
}

footer img {
  padding: 1rem 1rem 0 1rem;
}
/***************** Footer End *****************/