/* Import google font family */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap");

/* Apply small screen style */
@import "small-screen_blog_style.css" screen and (max-width: 320px);

/* Apply medium screen style */
@import "medium-screen_blog_style.css" screen and (min-width: 321px) and
  (max-width: 700px);

/* Apply larg screen style */
@media (min-width: 701px) {
  /* Whole body */
  body {
    background-color: #0f2b3d;
    margin: 0;
    font-family: "Merriweather", serif;
  }

  /* Main container */
  .container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "gnb gnb gnb gnb gnb gnb gnb gnb"
      "hd hd hd hd hd hd hd hd"
      "cont cont cont cont cont cont rs rs"
      "fot fot fot fot fot fot fot fot";
    grid-gap: 10px;
  }

  /* Gloabal navbar */
  .global-nav {
    display: flex;
    align-items: center;
    grid-area: gnb;
    background-image: radial-gradient(#33b5e5, #1d8bcf, #33b5e5);
  }

  .ul-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .ul-nav li {
    display: flex;
    justify-content: space-around;
  }

  .ul-nav li:hover {
    background-color: #205d85;
    border-radius: 15px;
  }

  .ul-nav li a {
    color: black;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #1d8bcf;
  }

  .ul-nav i {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #fff5e2;
    margin-bottom: 8px;
  }

  /* Main header */
  .heading {
    grid-area: hd;
    color: #b2cee0;
    text-align: center;
  }

  /* Main Content */
  .content {
    grid-area: cont;
  }

  .content-heading {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    color: #e5eff5;
    background-image: linear-gradient(to right, #6ea3c5, #1d5174);
  }

  .blog-date {
    display: flex;
    align-items: flex-end;
  }

  /* Main content / Author-info */
  .author-info {
    display: flex;
    align-items: center;
    background-image: linear-gradient(to left, #6ea3c5, #1d5174);
    padding: 10px;
  }

  .placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
  }

  .placeholder figcaption {
    font-weight: bold;
    text-align: center;
  }

  .placeholder a {
    text-decoration: none;
    color: #02b3e4;
  }

  .placeholder a:hover {
    text-decoration: underline;
  }

  .placeholder-title {
    color: #0f2b3d;
    font-style: italic;
  }

  .placeholder img {
    height: 100px;
    width: 90px;
    border-radius: 20%;
    border: 1px solid black;
  }

  .author-desc {
    font-size: 130%;
  }

  /* Main content / Blog article */
  .blog-article {
    display: flex;
    flex-direction: column;
  }

  .blog-article p {
    color: #fff;
    font-size: 130%;
    padding: 15px;
  }

  .blog-article span {
    text-decoration: underline;
  }

  .blog-article figure {
    background-color: #1d5174;
    border: 1px solid #c8ccd1;
    padding: 10px;
  }

  .blog-article img {
    width: 100%;
    height: 500px;
  }

  .blog-article figcaption {
    color: #e5eff5;
  }

  /* Main content / Listed items article */
  .listed-items {
    color: #fff;
    font-size: 130%;
    padding: 15px;
    border-top: 3px solid #1d5174;
  }

  .listed-items h3 {
    color: #b2cee0;
  }

  .listed-items ol li {
    font-weight: bold;
    color: #53cbed;
    padding: 5px;
  }

  .listed-items ol li ol li {
    font-weight: normal;
    color: #b2cee0;
  }

  .listed-items ol li ul li {
    font-weight: normal;
    list-style-type: square;
    color: #b2cee0;
  }

  /* Main content / Gallery heaher */
  .gallery-heading {
    padding: 10px;
    color: #e5eff5;
    background-image: linear-gradient(to left, #6ea3c5, #1d5174);
  }

  /* Blog gallery */
  .blog-gallery {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: 50% 50%;
    justify-content: center;
  }

  .blog-gallery > * {
    border: 3px solid #c8ccd1;
  }

  .blog-gallery div {
    display: flex;
    justify-content: center;
    margin: 10px;
    padding: 10px;
    background-color: #657482;
  }

  .blog-gallery img {
    width: 100%;
    height: 100%;
  }

  .blog-gallery div:hover {
    border: 2px solid #02b3e4;
    transform: scale(1.03);
  }

  /* Main content / Buttons for older and newer post */
  .older-newer-post {
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-top: 3px solid #1d5174;
    margin: 10px;
    padding: 10px;
  }

  .older-newer-post button {
    background-color: #0f2b3d;
    color: #1d8bcf;
    font-weight: bold;
    padding: 10px 30px;
    margin: 8px;
    border: 3px solid #1d8bcf;
    border-radius: 10px;
    cursor: pointer;
  }

  .older-newer-post button:hover {
    background-color: #02b3e4;
    color: #0f2b3d;
    border-radius: 10px;
    border: 3px solid #0f2b3d;
  }

  /* Aside */
  .right-side {
    grid-area: rs;
    background-image: linear-gradient(
      to bottom,
      #014052,
      #0f2b3d,
      #0f2b3d,
      #0f2b3d
    );
  }

  /* Aside / Blog content list */
  .right-side h5 {
    padding-left: 15px;
    color: #fff;
  }

  .blog-content-list li {
    color: #02b3e4;
  }

  .blog-content-list a {
    text-decoration: none;
    color: #02b3e4;
  }

  .blog-content-list a:hover {
    text-decoration: underline;
  }

  /* Aside / Blog archives */
  .blog-archives li {
    color: #02b3e4;
  }

  .blog-archives a {
    text-decoration: none;
    color: #02b3e4;
  }

  .blog-archives a:hover {
    text-decoration: underline;
  }

  /* Footer */
  .footer {
    grid-area: fot;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #454f58;
    padding: 10px;
  }

  .copyright {
    padding: 20px;
    color: #fff;
  }

  .subscribe {
    background-color: #fff;
    color: #1d8bcf;
    font-weight: bold;
    padding: 10px 30px;
    margin: 8px;
    border: 3px solid #1d8bcf;
    border-radius: 10px;
    cursor: pointer;
  }

  .subscribe:hover {
    background-color: #0f2b3d;
    border-radius: 10px;
  }

  /* Footer / Social links */
  .social img {
    width: 70px;
    height: 70px;
  }

  .social img:hover {
    transform: scale(1.02);
    box-shadow: 0 0 50px #33b5e5 inset;
    border-radius: 40px;
  }
}