.bg-light {
    --bs-bg-opacity: 0
}

.card a {
    text-decoration: none;
    color: inherit;
}

.card-header {
border: 0px;
}


.card-img {
    object-fit: cover !important;
}

svg {
    transform: scale(0.85);
    margin-top: -0.1rem;
}

a.button, button {
    align-items: flex-start;
    line-height: 1.1;
    gap: 0.18rem;
}

.card body{
    padding-bottom: .6rem;
    padding-top: .7rem;
}

.card-body{
    padding-bottom: 0rem;
    padding-top: 0.8rem;
}

.card-title {
    /* opacity: .9; */
    font-weight: 500;
    /* font-size: .8rem; */
    padding: .5rem 1.2rem;
    padding-bottom: 0rem ;
    margin-bottom: 0rem;
	font-weight: 450;
	font-size: 0.92rem;
    /* border-bottom-color: #ddd;
    border-bottom-width: 1px;
    border-bottom-style: solid; */
}

/* TOP Margin */
/* #quarto-document-content {
    margin-top: -0.5rem;
} */

/* @media (max-width: 991px){
    #quarto-document-content {
        margin-top: 0rem;
    }
} */


/* Changes the width of contents
This is the guys that does the trick: calc( 950px - 3em )) <-- 950px increases width 
This is the guys that does the trick: calc( 750px - 3em )) <-- 750px increases width DEFAULT
This is the guys that does the trick: calc( 1250px - 3em )) <-- 1250px increases width LARGE Laptop
Start of the Sidebar-margin: [body-end-outset] minmax(10px, 30px) <-- 30px makes the sidebar larger*/   
@media (min-width: 992px) {
    body.floating .page-columns {
        display: grid;
        gap: 0;
        grid-template-columns: [screen-start] 1.5em [screen-start-inset] 5fr [page-start] minmax(5px, 10px) [page-start-inset] minmax(10px, 30px) [body-start-outset] minmax(5px, 10px) [body-start] 1.5em [body-content-start] minmax(500px, calc( 1050px - 3em )) [body-content-end] 1.5em [body-end] minmax(5px, 10px) [body-end-outset] minmax(10px, 30px) [page-end-inset] minmax(5px, 10px) [page-end] 5fr [screen-end-inset] 1.5em [screen-end];
    }
}


/* Hides the sidebar and margin bar when it reaches 991px window width */
@media (max-width: 991.98px){
    body .page-columns, body.fullcontent:not(.floating):not(.docked) .page-columns, body.slimcontent:not(.floating):not(.docked) .page-columns, body.docked .page-columns, body.docked.slimcontent .page-columns, body.docked.fullcontent .page-columns, body.floating .page-columns, body.floating.slimcontent .page-columns, body.floating.fullcontent .page-columns {
        display: grid;
        gap: 0;
        grid-template-columns: [screen-start] 1.5em [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(0px, 1fr) [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] 1.5em [screen-end];
    }
}

.listing-category-inactive {
    /* border: white; */
    border-radius: .25rem;
    text-transform: uppercase;
    padding-top: .15em;
    padding-bottom: .15em;

    padding-right: 0.25rem;
    padding-left: .25rem;
    margin-right: 1px;
    margin-left: 1px;

    font-size: 0.57em; 
    /* font-size: .55em; */
    padding-left: .3em;
    padding-right: .3em;
    margin-right: 4px;

    margin-bottom: 4px;
}


div#tags:hover{
    background-color: transparent;
}


/* Makes to display main in one column */
@media (max-width: 991px){
    body.floating .page-columns {
        display: block !important;
        padding: 0em 1.5em !important;
    }

    #quarto-sidebar {
        display: none;
    }
}

/* Make navbar items to get centered */
.collapse:not(.show) {
    display: -webkit-flex;
    -webkit-flex-basis: auto;
}


/* OJO remove and place it in 'light.theme' or 'dark.theme' 
to apply different colors when 'Dark mode' */

/* This makes across ALL cards from Projects
to hover with the Red color */
.hoverBg {
    background-color: rgba(232, 41, 41, 0.757);
}

.hoverBg:hover {
    background-color: rgba(232, 41, 41, 0.757);
}

div#tags{
    padding-right: 2px;
}

div#tags:hover{
    border: solid 1px transparent;
}

/* Changes how much image I can show */
img.thumbnail-image.card-img {
    height: 128px !important;
}


@media (min-width: 992px){
    /* Gives padding to all main body content */
    #quarto-content>* {
        padding-top: 16px;
    }
}


.modal-header {
    padding: 6px 1rem;
}
.modal-content {
    border: transparent;
}

button.close.custom-modal-button{
    background-color: #ffffff00;
    border: transparent;
    border-radius: 0px;
    margin-right: 0px;
    padding: 3px;
    font-size: 1.4rem;
} 

/* Width of the modal card */
@media (min-width: 576px){
    .modal-dialog {
        max-width: 800px;
        /* max-width: max-content; */
    }

    .img-center{
        height: 400px !important;
    }
    
}

.img-center{
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 480px; */
    width: fit-content;
    height: 225px;
    object-fit: contain;
    overflow: hidden;
    padding: 1em;
}

.modal-body{
    padding: 0px;
}

.modal-header {
    border-bottom: none;
}

.card-body.post-contents.links-handler a{
    text-decoration: none;
}

.grid.modal-content-grid{
    column-gap: 0px;
}

.p-description{
    font-size: 16px;
}


.github-icon-projects{
    font-size: 13px;
    padding-left: 2px;
}


.listing-category {
    font-size: 10.3px;
}

a.button, button {
    font-size: 13.8px;
}

.tag-icon-projects{
    /* color:#5f656ba1; */
    color: #6c757dc9;
    display: none !important;
}

.archive-icon-projects{
    color: #6d757d;
    font-size: 9.3px !important;
}

/* Disables the anchor from modal */
a.anchorjs-link {
    display: none;
}

/* Disable author name */
#title-block-header{
    display: none !important;
}

/* Gives some padding before the footer */
main {
    margin-bottom: 3em;
}