/*-----------------------------------*\ 
  #style.css
\*-----------------------------------*/

/**
 * copyright 2022 @codewithsadee 
 */





/*-----------------------------------*\ 
  #CUSTOM PROPERTY
\*-----------------------------------*/

.light-theme {

    /**
     * light theme colors 
     */
  
    --background-primary: hsl(0, 0%, 100%);
    --background-secondary: hsl(0, 0%, 97%);
  
    --action-primary: hsl(214, 32%, 91%);
    --action-secondary: hsl(210, 38%, 95%);
  
    --foreground-primary: hsl(218, 23%, 23%);
    --foreground-secondary: hsl(216, 15%, 52%);
    --foreground-tertiary: hsl(214, 20%, 69%);
  
    --accent: hsl(229, 76%, 66%);
  
  }
  
  .dark-theme {
  
    /**
     * dark theme colors 
     */
  
    --background-primary: hsl(218, 23%, 23%);
    --background-secondary: hsl(220, 26%, 14%);
  
    --action-primary: hsl(216, 15%, 52%);
    --action-secondary: hsl(218, 23%, 23%);
  
    --foreground-primary: hsl(210, 38%, 95%);
    --foreground-secondary: hsl(211, 25%, 84%);
    --foreground-tertiary: hsl(214, 20%, 69%);
  
    --accent: hsl(229, 76%, 66%);
  
  }
  
  :root {
  
    /**
     * color
     */
  
    --white: hsl(0, 0%, 100%);
  
    /**
     * typography 
     */
  
    --fs-base: 0.85rem;
    --fs-1: 1.875rem;
    --fs-2: 1.5rem;
    --fs-3: 1.25rem;
    --fs-4: 0.875rem;
    --fs-5: 0.75rem;
  
    /**
     * spacing 
     */
  
    --py: 5rem;
  
  }
  
  
  
  
  
  /*-----------------------------------*\ 
    #RESET
  \*-----------------------------------*/
  
  *, *::before, *::after {
    margin:  0;
    padding: 0;
    box-sizing: border-box;
  }
  
  a { text-decoration: none; }
  
  li { list-style: none; }
  
  img, button { display: block; }
  
  a, span { display: inline-block; }
  
  button {
    font: inherit;
    border: none;
    background: none;
    cursor: pointer;
  }
  
  html {
    font-family: "Inter", sans-serif;
    font-size: var(--fs-base); /* base font-size (0.85rem = 13.6px) */
    line-height: 1.8;
  }
  
  :focus { outline-offset: 4px; }
  
  
  /**
   * scrollbar style
   */
  
  ::-webkit-scrollbar { width: 16px; }
  
  
  ::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 20px;
    border: 4px solid;
  }
  
  .light-theme::-webkit-scrollbar-thumb { border-color: hsl(0, 0%, 90%); }
  
  .dark-theme::-webkit-scrollbar-thumb { border-color: hsl(219, 27%, 20%); }
  
  .light-theme::-webkit-scrollbar-track { background: hsl(0, 0%, 90%); }
  
  .dark-theme::-webkit-scrollbar-track { background: hsl(219, 27%, 20%); }
  
  
  
  
  
  /*-----------------------------------*\ 
    #BASE STYLE
  \*-----------------------------------*/
  
  .h1,
  .h2,
  .h3,
  .h4 {
    display: block;
    color: var(--foreground-primary);
  }
  
  .h1 {
    font-size: var(--fs-1);
    font-weight: 900;
  }
  
  .h2 {
    font-size: var(--fs-2);
    font-weight: 700;
  }
  
  .h3 {
    font-size: var(--fs-3);
    font-weight: 700;
  }
  
  .h4 {
    font-size: var(--fs-4);
    font-weight: 700;
  }
  
  .text-sm { font-size: var(--fs-4); }
  
  .text-tiny { font-size: var(--fs-5); }
  
  
  
  
  
  /*-----------------------------------*\ 
    #REUSED STYLE
  \*-----------------------------------*/
  
  .container {
    margin-inline: auto;
    margin: auto; /* fallback for margin-inline */
    padding: 0 15px;
  }
  
  .btn {
    min-width: 10rem;
    border-radius: 100px;
  }
  
  .btn-primary {
    background: var(--accent);
    color: var(--white);
    padding: 0.6875rem 1.1875rem;
  }
  
  .btn-primary:hover {
    background: var(--foreground-secondary);
    color: var(--action-primary);
  }
  
  .btn-secondary {
    background: var(--action-secondary);
    color: var(--foreground-secondary);
    padding: 0.5rem 1rem;
    border: 3px solid var(--foreground-tertiary);
  }
  
  .btn-secondary:hover { border-color: var(--accent); }
  
  
  
  
  
  /*-----------------------------------*\ 
    #Extra style for dark theme
  \*-----------------------------------*/
  
  .dark-theme .btn-primary:hover { color: var(--background-primary); }
  
  .dark-theme .blog-topic {
    background: var(--action-primary);
    color: var(--foreground-secondary);
  }
  
  .dark-theme .blog-topic:hover {
    background: var(--foreground-primary);
    color: var(--action-primary);
  }
  
  .dark-theme .load-more:hover { color: var(--white); }
  
  .dark-theme .aside .h2 { color: var(--foreground-primary); }
  
  .logo-text-redpoll.dark-theme{
    color:var(--foreground-primary);
  }
  
  .logo-text-redpoll.light-theme{
    color:var(--foreground-primary);
  }
  
  
  /*-----------------------------------*\ 
    #HEADER
  \*-----------------------------------*/
  
  header { background: var(--background-primary); }
  
  header .flex-wrapper { display: none; }
  
  .navbar {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap: 15px;
    padding: 15px 0;
  }
  
  .logo-light,
  .logo-dark { display: none; }
  
  .light-theme .logo-light,
  .dark-theme .logo-dark { display: block; }
  
  header .btn-group {
    display:     flex;
    align-items: center;
    gap: 15px;
  }
  
  .theme-btn-mobile,
  .nav-menu-btn,
  .nav-close-btn {
    background: var(--action-secondary);
    color: var(--foreground-tertiary);
    width:  40px;
    height: 40px;
    display:         flex;
    justify-content: center;
    align-items:     center;
    border-radius: 50%;
    font-size: 25px;
  }
  
  :is(.theme-btn-mobile,
  .nav-menu-btn,
  .nav-close-btn):hover {
    background: var(--accent);
    color: var(--white);
  }
  
  .theme-btn-mobile ion-icon { display: none; }
  
  .theme-btn-mobile.light .sun,
  .theme-btn-mobile.dark .moon { display: block; }
  
  .mobile-nav {
    position: fixed;
    inset: 0;
    background: var(--background-primary);
    padding: 70px 20px;
    overflow: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: 0.5s cubic-bezier(1, 0, 0.30, 0.70);
    z-index: 10;
  }
  
  .mobile-nav.active {
    transform: translateX(0);
    visibility: visible;
  }
  
  .nav-close-btn {
    position: absolute;
    top:   20px;
    right: 20px;
  }
  
  .mobile-nav .wrapper {
    padding-bottom: 1.25rem;
    margin-bottom:  1.25rem;
    border-bottom: 1px solid var(--action-primary);
  }
  
  .mobile-nav .nav-title { margin-bottom: 1rem; }
  
  .mobile-nav .nav-item { margin-bottom: 0.5rem; }
  
  .mobile-nav .nav-link {
    font-size: var(--fs-3);
    color: var(--foreground-secondary);
  }
  
  .mobile-nav .nav-link:hover { color: var(--accent); }
  
  
  
  
  
  /*-----------------------------------*\ 
    #HERO SECTION
  \*-----------------------------------*/
  
  .hero {
    background: var(--background-primary);
    padding-top:    2rem;
    padding-bottom: var(--py);
    text-align: center;
  }
  
  .hero .h1 {
    margin-bottom: 1rem;
    line-height: 1.6;
  }
  
  .hero b {
    color: var(--accent);
    font-weight: inherit;
  }
  
  .hero .h3 {
    color: var(--foreground-secondary);
    margin-bottom: 2rem;
  }
  
  .hero .btn-group {
    display:         flex;
    justify-content: center;
    flex-wrap:       wrap;
    gap: 15px;
    text-align: center;
  }
  
  .hero .right { display: none; }
  
  
  
  
  
  /*-----------------------------------*\ 
    #BLOG SECTION
  \*-----------------------------------*/
  
  .main {
    background: var(--background-secondary);
    padding: var(--py) 0;
  }
  
  .blog .h2 {
    line-height: 1.3;
    margin-bottom: 3rem;
    text-align: center;
  }
  
  
  .blog-card, .blog-card-reduced, .blog-card-tags {
    background: var(--background-primary);
    padding: 10px;
    margin-bottom: 1rem;
    border-radius: 10px;
    box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.05);
    transition: 0.25s ease;
  }
  
  .blog-card:hover, .blog-card-reduced:hover, .blog-card-tags:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.1);
  }
  
  .blog-card-banner { display: none; }
  
  .blog-content-wrapper { padding: 10px 5px; }
  
  .blog-topic {
    background: var(--action-secondary);
    color: var(--foreground-secondary);
    font-weight: 600;
    padding: 0.25rem 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
    float: left;
    margin-left: 0.5rem;
  }
  
  .blog-topic:hover {
    background: var(--foreground-secondary);
    color: var(--action-secondary);
  }
  
  .blog-card .h3, .blog-card-reduced .h3, .blog-card-tags .h3{
    line-height: 1.4;
    margin-bottom: 1rem;
  }
  
  .blog-card .h3:hover, .blog-card-reduced .h3:hover, .blog-card-tags .h3:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
  
  .blog-text,
  .profile-wrapper { display: none; }
  
  .blog .wrapper {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap: 15px;
  }
  
  .blog .h4 { color: var(--foreground-secondary); }
  
  .blog .h4:hover { color: var(--accent); }
  
  .blog .text-sm {
    display:     flex;
    align-items: center;
    gap: 5px;
    color: var(--foreground-tertiary);
  }
  
  .blog .separator {
    background: var(--foreground-tertiary);
    margin-inline: 3px;
    margin: 0 3px; /* fallback for margin-inline */
    width:  3px;
    height: 3px;
    border-radius: 3px;
  }
  
  .blog ion-icon { --ionicon-stroke-width: 50px; }
  
  .load-more {
    margin-inline: auto;
    margin: auto; /* fallback for margin-inline */
    background: var(--foreground-secondary);
    color: var(--background-secondary);
    padding: 0.6875rem 1.1875rem;
  }
  
  .load-more:hover { background: var(--accent); }
  
  
  
  
  
  /*-----------------------------------*\ 
    #ASIDE
  \*-----------------------------------*/
  
  .aside { display: none; }
  
  
  
  
  
  /*-----------------------------------*\ 
    #FOOTER
  \*-----------------------------------*/
  
  footer { background: var(--background-primary); }
  
  footer .container {
    padding: var(--py) 15px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  footer .wrapper { text-align: center; }
  
  .footer-logo { margin-bottom: 10px; }
  
  .footer-text {
    color: var(--foreground-secondary);
    max-width: 300px;
    margin-inline: auto;
    margin: auto; /* fallback for margin-inline */
  }
  
  .footer-title {
    color: var(--foreground-primary);
    font-weight: 700;
    margin-bottom: 0.4rem;
  }
  
  .footer-link { color: var(--foreground-secondary); }
  
  .footer-link:hover { color: var(--accent); }
  
  .copyright {
    color: var(--foreground-secondary);
    font-size: var(--fs-4);
    text-align: center;
    padding: 1rem;
    border-top: 1px solid var(--action-primary);
  }
  
  .copyright a {
    color: var(--accent);
    font-weight: 500;
  }
  
  .copyright a:hover { text-decoration: underline; }
  
  
  
  
  
  /*-----------------------------------*\ 
    #MEDIA QUERIES
  \*-----------------------------------*/
  
  /**
   * responsive for larger than 550px screen
   */
  
  @media (min-width: 550px) {
  
    :root {
  
      /**
       * typography 
       */
  
      --fs-base: 0.90rem;
  
    }
  
  
    /**
     * BLOG 
     */
  
    .blog-card {
      display: grid;
      grid-template-columns: 3fr 4fr;
      gap: 20px;
    }
    .blog-card-reduced {
      display: grid;
      grid-template-columns: 1fr 4fr;
      gap: 20px;
    }
    .blog-card-tags {
      display: grid;
      grid-template-columns: 1.75fr 4fr;
      gap: 20px;
    }
  
    .blog-card-banner {
      display: block;
      overflow: hidden;
      border-radius: 5px;
    }
  
    .blog-banner-img {
      width:  100%;
      height: 100%;
      object-fit: cover;
    }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 650px screen
   */
  
  @media (min-width: 650px) {
  
    :root {
  
      /**
       * typography 
       */
  
      --fs-1: 2.25rem;
  
    }
  
  
  
    /**
     * REUSED STYLE 
     */
  
    .container { padding: 0 30px; }
  
  
  
    /**
     * HEADER 
     */
  
    .navbar { padding: 30px 0; }
  
  
  
    /**
     * BLOG 
     */
  
    .blog .h2 {
      position: relative;
      text-align: left;
      padding-left: 2rem;
    }
  
    .blog .h2::before {
      content: '';
      position: absolute;
      top:  0;
      left: 0;
      background: var(--action-primary);
      width:  5px;
      height: 100%;
      border-radius: 5px;
    }
  
    .blog-text,
    .profile-wrapper { display: block; }
  
    .blog-text {
      color: var(--foreground-secondary);
      font-size: var(--fs-4);
      display: -webkit-box;
      line-clamp: 3;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 1rem;
    }
  
    .blog .wrapper-flex {
      display:         flex;
      justify-content: start;
      align-items:     center;
      gap: 10px;
    }
  
    .profile-wrapper {
      width:  56px;
      height: 56px;
      background: var(--action-primary);
      padding: 3px;
      border-radius: 50%;
    }
  
    .profile-wrapper img { border-radius: 50%; }
  
    .blog .wrapper {
      flex-direction: column;
      align-items: start;
      gap: 0;
    }
  
  
  
    /**
     * FOOTER 
     */
  
    footer .container {
      padding: var(--py) 30px;
      grid-template-columns: 2fr 1fr 1fr;
    }
  
    footer .wrapper { text-align: left; }
  
    .footer-text { margin: 0; }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 768px screen
   */
  
  @media (min-width: 768px) {
  
    /**
     * REUSED STYLE 
     */
  
    .container { max-width: 800px; }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 1024px screen
   */
  
  @media (min-width: 1024px) {
  
    :root {
  
      /**
       * typography 
       */
  
      --fs-base: 1rem;
      --fs-1: 3rem;
  
    }
  
  
  
    /**
     * REUSED STYLE 
     */
  
    .container { max-width: 1150px; }
  
  
  
    /**
     * HEADER 
     */
  
    header .btn-group { display: none; }
  
    header .flex-wrapper {
      display: flex;
      gap: 30px;
    }
  
    .desktop-nav {
      display:     flex;
      align-items: center;
      gap: 30px;
    }
  
    .desktop-nav .nav-link {
      color: var(--foreground-secondary);
      font-weight: 700;
    }
  
    .desktop-nav .nav-link:hover { color: var(--accent); }
  
    .theme-btn-desktop {
      position: relative;
      background: var(--background-secondary);
      color: var(--white);
      width:  52px;
      height: 26px;
      display:         flex;
      justify-content: center;
      align-items:     center;
      gap: 10px;
      border-radius: 100px;
    }
  
    .theme-btn-desktop.light {
      background: linear-gradient(45deg, hsl(7, 100%, 71%), hsl(46, 100%, 65%));
    }
  
    .theme-btn-desktop.dark {
      background: linear-gradient(45deg, hsl(225, 100%, 60%), hsl(296, 80%, 40%));
    }
  
    .theme-btn-desktop::before {
      content: '';
      position: absolute;
      background: var(--white);
      width:  21px;
      height: 21px;
      border-radius: 30px;
      top: 50%;
      left: 3px;
      transform: translateY(-50%);
      box-shadow: 0 2px 10px -2px hsla(0, 0%, 0%, 0.05);
      z-index: 2;
    }
  
    .theme-btn-desktop.dark::before { left: calc(100% - 24px); }
  
  
  
    /**
     * HERO 
     */
  
    .hero { text-align: left; }
  
    .hero .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 50px;
    }
  
    .hero .btn-group {
      justify-content: start;
      gap: 30px;
    }
  
    .hero .right {
      position: relative;
      display:         flex;
      justify-content: center;
      align-items:     center;
    }
  
    .hero .pattern-bg {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 200px;
      background: url(../images/pattern.png);
      background-size: contain;
      opacity: 0.2;
    }
  
    .hero .img-box {
      position: relative;
      z-index: 2;
    }
  
    .hero-img {
      width:  100%;
      height: 100%;
      object-fit: contain;
      border-radius: 0 0 280px 230px;
      transform: translate(10px, -10px);
    }
  
    .hero .shape {
      position: absolute;
      top:  50%;
      left: 50%;
      border-radius: 50%;
      transform: translate(-50%, -42%) rotate(-20deg);
    }
  
    .hero .shape-1 {
      background: var(--accent);
      width:  90%;
      height: 90%;
      z-index: -1;
    }
  
    .hero .shape-2 {
      width:  92%;
      height: 92%;
      box-shadow: inset 0 -30px 0 var(--action-primary);
      z-index: 2;
    }
  
  
  
    /**
     * MAIN 
     */
  
    .main .container {
      display: grid;
      grid-template-columns: 5fr 2fr;
      gap: 60px;
    }
  
  
  
    /**
     * ASIDE 
     */
  
    .aside {
      display: block;
      align-self: stretch;
    }
  
    .aside .h2 {
      color: var(--foreground-secondary);
      margin-bottom: 3rem;
      text-align: center;
      line-height: 1.3;
    }
  
    .aside .wrapper {
      background: var(--background-primary);
      border-radius: 10px;
      padding: 40px;
      box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);
    }
  
    .topics { margin-bottom: 3rem; }
  
    .topic-btn {
      display:     flex;
      align-items: stretch;
      background: var(--background-primary);
      border-radius: 10px;
      box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);
      overflow: hidden;
    }
  
    .topic-btn:not(:last-child) { margin-bottom: 1rem; }
  
    .topic-btn .icon-box {
      font-size: 22px;
      width: 70px;
      display:         flex;
      justify-content: center;
      align-items:     center;
      background: var(--action-primary);
      color: var(--foreground-secondary);
    }
  
    .topic-btn:hover .icon-box {
      background: var(--accent);
      color: var(--white);
    }
  
    .topic-btn ion-icon { --ionicon-stroke-width: 40px; }
  
    .topic-btn p {
      padding: 15px;
      color: var(--foreground-secondary);
      font-weight: 700;
    }
  
    .tags { margin-bottom: 3rem; }
  
    .tags .wrapper {
      display:   flex;
      flex-wrap: wrap;
      gap: 0.2rem;
    }
  
    .tags .hashtag {
      background: var(--action-primary);
      color: var(--foreground-secondary);
      padding: 5px 10px;
      font-size: var(--fs-5);
      font-weight: 700;
      border-radius: 5px;
    }
  
    .tags .hashtag:hover {
      background: var(--foreground-secondary);
      color: var(--action-primary);
    }
  
    .contact { margin-bottom: 3rem; }
  
    .contact p {
      color: var(--foreground-secondary);
      margin-bottom: 1rem;
    }
  
    .social-link {
      display:         flex;
      justify-content: center;
      align-items:     center;
      gap: 10px;
    }
  
    .social-link .icon-box {
      width:  45px;
      height: 45px;
      background: var(--action-secondary);
      border-radius: 50%;
      display:         flex;
      justify-content: center;
      align-items:     center;
      font-size: 22px;
    }
  
    .social-link .discord { color: hsl(235, 86%, 65%); }
  
    .social-link .twitter { color: hsl(203, 89%, 53%); }
  
    .social-link .facebook { color: hsl(220, 46%, 48%); }
    
    .social-link .icon-box:hover {
      background: var(--accent);
      color: var(--white);
    }
  
    .newsletter {
      position: sticky;
      top: 3rem;
      margin-bottom: 98px;
    }
  
    .newsletter p {
      color: var(--foreground-secondary);
      margin-bottom: 1rem;
    }
  
    .newsletter input {
      border: none;
      background: var(--action-primary);
      display: block;
      width: 100%;
      padding: 0.5rem 1rem;
      font: inherit;
      color: var(--foreground-secondary);
      border-radius: 5px;
      margin-bottom: 1rem;
    }
  
    .newsletter input::placeholder { color: inherit; }
  
    .newsletter input:focus {
      outline: 2px solid;
      outline-offset: 0;
    }
  
    .newsletter .btn-primary {
      margin-inline: auto;
      margin: auto; /* fallback for margin-inline */
    }
  
  
  
    /**
     * FOOTER 
     */
  
    .footer-title { font-size: 1.125rem; }
  
    .footer-link { margin-bottom: 0.3rem; }
  
  }