* {
  margin: 0;
  padding: 0;
}

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Roboto', sans-serif;
}

body {
  nav {
    position: fixed;
    z-index: 3;
    background: #ffffff;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #aaaaaa4f;
    font-family: "Roboto Mono", monospace;

    .nav-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: inherit;
        padding: 12px 8px;

        .prof-pic {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          margin-right: 12px;
        }

        h1 {
          margin: 0;
          font-size: 18px;
        }
      }

      .desktop-nav-content {
        display: none;
      }
    }

    svg, h1 {
      margin: 12px 24px;
    }

    h1 {
      font-size: 24px;
    }
  }

  .content-container {
    max-height: 100vh;
    overflow-y: auto;
    padding-top: 92px;

    .home-page-articles-list {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .hero-article {
        a {
          .desktop-hero-gradient {
            display: none;
          }
        }
      }

      .desktop-divider {
        display: none;
        width: 100%;
        height: 2px;
        background-color: #00000024;
        margin: 32px 0;
      }

      .home-page-article {
        width: 87%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

        a {
          text-decoration: none;
          color: black;

          .article-cover-image {
            width: 100%;
            height: 200px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 8px;
          }

          .home-page-article-title {
            margin-bottom: 8px;
          }

          .home-page-article-subtitle {
            margin-bottom: 8px;
            color: #555555;
            font-weight: normal;
          }

          .home-page-article-text {
            margin: 12px 0;
          }
        }
      }

      .non-hero-articles {
        .home-page-article {
          border-top: 1px solid rgba(0, 0, 0, 0.169);
          padding-top: 16px;
          margin-top: 16px;
        }
      }
    }
  }
}

@media (min-width: 1000px) {
  body {
    .content-container {
      display: flex;
      justify-content: center;
      padding-top: 86px;
      max-height: none;
      overflow-y: visible;

      .home-page-articles-list {
        max-width: 1200px;
        margin: 0 32px;

        .hero-article {
          width: 100%;
          height: 400px;

          a {
            position: relative;
            width: 100%;
            height: 400px;
            color: white;
            text-decoration: none;

            .article-cover-image {
              width: 100%;
              height: 100%;
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              border-radius: 8px;
            }

            .desktop-hero-gradient {
              display: flex;
              position: absolute;
              z-index: 1;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: #000000;
              background: linear-gradient(90deg,rgba(0, 0, 0, 0.788) 0%, rgba(255, 255, 255, 0.17) 100%);
              border-radius: 8px;
            }

            .home-page-article-text {
              width: 500px;
              position: absolute;
              z-index: 2;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              padding: 32px;
              box-sizing: border-box;
            }

            .home-page-article-subtitle {
              color: #dcdcdc;
            }
          }

          &:hover {
            a {
              .home-page-article-text {
                text-decoration: underline;
              }
            }
          }
        }

        .desktop-divider {
          display: block;
        }

        .non-hero-articles {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .home-page-article {
            width: 31%;
            margin: unset;
            margin-bottom: 40px;
            border: none;
            padding: unset;

            &:hover {
              a {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}