CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
:root{
    --font-family:"Poppins";
}
body{
    font-family: var(--font-family);
}
.navbar-item:focus{
    background-color: unset !important;
    color: unset !important;
   }
 .navbar-brand>.navbar-item{
     font-size: 22px;
     font-weight: 600;
 }
 .navbar-item:hover{
     background-color:unset !important;

    }
 .navbar-end>.navbar-item{
     padding: 0px 30px;
 }
 .buttons>.nav-cta-btn{
     color:white;
     background-color: black;
 }
 .nav-cta-btn:hover{
    background-color: black;
 }

.navbar-brand>.navbar-item{
    font-family: var(--font-family);
    font-size: 27px;
}
.bullet-navbar{
    box-shadow: none;
}
.navbar-brand>.navbar-item:hover{
   color: unset;
   background-color: unset;
}
.navbar-item:hover{
    color: unset !important;
}
body{
    font-family: var(--font-family);
}

.notion-page-scroller>.notion-page {
    --notion-max-width: calc(min(1920px, 100vw));
    padding: 3rem 10rem 3rem 18rem;
}
.blog_header_wrapper{
    background: white;
}

.header_wrapper{
    background:white;
}
.blog_main{
    gap: 3rem;
}


.categories-section .categoriezed-blogs{
    display: unset;
}
.blog{
    display: flex;
    gap: 40px;
    margin: 60px 0px;
}
.blog .blog-contents{
    padding: 0;
}
h3{
    font-size: 28px !important;
    font-weight: 600 !important;
    font-family: var(--font-family);
}
p{
    font-size: 17px;
    color: black;
    font-family: var(--font-family);
}
.blog-img-container{
    width: 250px !important;
    height: 200px !important;
}
.blog .blog-tags{
    background-color: black;
    color: white;
    padding: 5px 10px 3px 10px;
    font-size: 9px;
}
.blog .tags-container{
    position: absolute;
    top: 5px;
    right: 5px;

}
.active{
    border:1px solid #d7d7d7 !important;

}
.active:hover{
    border: 1px solid black !important;
}
.categories-container>a:hover{
 border: 1px solid black !important;
}
.blog-subtitle{
    display: none;
}
.blog-autor-details{
    color: black;
    font-size: 14px;
    font-weight: 300;
 }
 .notion-h1{
     font-size: 32px;
     font-weight: 800;
 }
 .notion-text{
     font-size: 18px;
     font-weight:400;
     font-family: var(--font-family);
 }
 .categories-section .categories-container a{
    border: 1px solid b!important;
    justify-content: center !important;
    border-radius: 5px;
    color: black;
   }
   .categories-section .categories-container a:hover{
       box-shadow: 0px 0px 0px 1px gray;
   }

   .active{
       box-shadow:0px 0px 0px 1px black;
       border-radius: 5px;
   }
   .categories-container{
       gap: 10px;
       padding: 10px;
       margin: 10px 0px;
   }
   .categories-section>.header{
      font-size: 40px;
      font-weight: 800;
   }
   .paginator-numbers>.active:hover{
       background-color: black;
       color: white !important;
   }
   .paginator-numbers>.active>a:hover{
      color: white !important;
      opacity: 1;
   }


   .header {
    display: none;
   }

   .blog .blog-img-container {
       height: 400px;
   }
   .divider hr{
       background: lightgray;
       height: 1px;
   }
   .blog-subtitle {
       display: none;
   }

   .hero_section {
    justify-content: unset;
   }
   .blog-section{
       margin: 50px auto 30px auto !important;
   }
   .header_wrapper {
    height: 10vh !important;
    padding-top: 10px;
   }
   .blog-img-container>a>img{
     width:  250px !important;
     max-width: unset;
   }


@media screen and (max-width:600px) {
    .blog{
        flex-wrap: wrap;
    }
    .blog-img-container{
     width: 100%  !important;
    }
    .blog-img-container>a>img{
        width:  100% !important;
        max-width: 100%;
      }
}