body{
    font-size: 1.2rem;
}

.jersey-25-regular {
  font-family: "Jersey 25", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.title{
    font-size: 100px;
}

.title-blog{
    font-size: 70px;
}

.subtitle{
    font-size: 50px;
    margin-left: 150px;
}

.domine-25-regular {
  font-family: "Domine", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.domine-25-bold {
  font-family: "Domine", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.vertical-center{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.link{
    color: white;
    text-decoration: none;
}

.nav-link{
    font-family: "Jersey 25", sans-serif;
    font-size: 22px;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.nav-link:hover{
    color: #111;
}

.btn{
    border-radius: 50px;
}

.btn-group-xl>.btn, .btn-xl {
    --bs-btn-padding-y: 0.8rem;
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-font-size: 1.7rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.btn-outline {
    --bs-btn-color: white;
    --bs-btn-border-color: white;
    --bs-btn-hover-color: lime;
    --bs-btn-hover-bg: green;
    --bs-btn-hover-border-color: green;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: lime;
    --bs-btn-active-border-color: lime;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none;
    border: 2px solid white;
}

.btn-outline-dark {
    --bs-btn-color: #333;
    --bs-btn-border-color: #333;
    --bs-btn-hover-color: lime;
    --bs-btn-hover-bg: green;
    --bs-btn-hover-border-color: green;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: lime;
    --bs-btn-active-border-color: lime;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f9fa;
    --bs-gradient: none;
    border: 2px solid #333;
}

body{
    background-color: #222;
    color:white;
}

.header{
    background-image: url('/img/20231216_131451-min_compressed_darken.png');
    background-size: cover;
    height: 100vh;
}

@media (min-width: 1400px) {
    .header{
        background-position: 0px -1000px;
    }
}

#navbar{
    border-radius: 10px;
}

.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6{
    font-family: "Domine", sans-serif;
}

.blog-content h1{
    margin-top: 50px;
    margin-bottom: 20px;
}

.blog-content h2{
    margin-top: 50px;
    margin-bottom: 30px;
}

.blog-content h3{
    margin-top: 40px;
    margin-bottom: 30px;
}

.blog-content h4{
    margin-top: 30px;
    margin-bottom: 20px;
}

.blog-content h5{
    margin-top: 20px;
    margin-bottom: 20px;
}

.blog-content code{
    background-color: #333;
    color: white;
    border-radius: 5px;
    padding: 5px 3px;
}

.blog-content pre{
    background-color: #333;
    color: white;
    border-radius: 5px;
    padding: 10px;
}

.blog-content {
    /* Allow text to wrap to the next line */
    white-space: normal;

    /* Break long words/URLs if needed */
    overflow-wrap: break-word;   /* modern, preferred */
    word-wrap: break-word;       /* older, for compatibility */

    /* Optional: hide any remaining overflow just in case */
    overflow: hidden;

    font-family: "Inter" !important;
}

.blog-content p{
    margin-bottom: 30px;
}

.blog-content p, .blog-content li{
    color: rgb(108, 117, 125);
}

.blog-content ul{
    margin-bottom: 30px;
}

.blog-content b, .blog-content strong{
    color: rgb(62 67 70) !important;
}


.navbar-collapse{
    background-color: green !important;
    border-radius: 10px;
    margin-top: 10px;
}

.navbar-collapse .nav-link{
    color: lime !important;
}


@media (min-width: 992px) {
    .navbar-collapse{
        background-color: rgba(0, 0, 0, 0) !important;
        margin-top: 0px !important;
    }
    .navbar-dark .navbar-collapse .nav-link{
        color: white !important;
    }

    .navbar-light .navbar-collapse .nav-link{
        color: #111 !important;
    }
}

.blog-content img {
    max-width: 100%;
    vertical-align: middle;
    border-style: none;
    margin-bottom: 30px;
}

.navbar-brand{
    font-size: 30px;
}

.navbar-brand .dot{
    color: lime;
}

.blog-content .card{
    margin-top: 40px;
    margin-bottom: 40px;
}

.blog-content .card .card-body{
    padding: 0px !important;
}


.blog-content .card .gist-file{
    margin-bottom: 0px;
}

.img-card{
    width: 200px;
    height: 200px;
    background-size: cover;
    border-radius: 10px;
    margin-right: 10px;
    margin-top: 10px;
}

.bg-dark .form-control{
    background-color: #111;
    border: 1px solid #111;
    color: white;
}

.bg-dark .form-control::placeholder {
    color: #aaa;
}