@use 'sass:color';

body {
    font-weight: 300;
}

table {
    border-collapse: collapse;
}

td {
    background-color: #{$grey-dk-300};
}
th {
    background-color: #{$grey-dk-200};
}
th:first-of-type, td:first-of-type,
tbody tr:last-of-type td,
thead th, td {
    border: 1px solid #{$grey-dk-200};
}

:not(pre, figure) > code {
    border: none;
    background-color: #{$grey-dk-200};
    padding: 0.1em 0.5em;
    font-size: #{$font-size-4};
}

:not(pre, figure) > code,
h4 {
    color: #{$red-000};
}

a:not(pre, figure) > code {
    color: #{$link-color};
}

pre {
    text-wrap: auto;
}

img {
    border: 1px solid #{$grey-dk-200};
}
img:hover {
    border-color: transparent;
}

@media (min-width: 31.25rem) {
    th, td {
      font-size: #{$font-size-5} !important;
    }
    h4 {
        font-size: #{$font-size-4} !important;
    }
    .nav-list .nav-list-item {
        font-size: #{$font-size-5} !important;
    }
}



.col-tag {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}



.site-nav > ul > li:nth-child(2) {
    border-bottom: 1px solid hsl(0, 0%, 22%);
}
.site-nav > ul > li:last-child {
    border-top: 1px solid hsl(0, 0%, 22%);
}


body:not(:has(> .side-bar)) .main:has(.masonry) {
    max-width: unset;
}

.masonry {
    position: relative;
}
.masonry-item {
    position: absolute;
    background-color: color.scale($grey-dk-300, $lightness: -5%);
    border: 2px solid #{$grey-dk-250};
    padding: 15px;
    border-radius: 15px;
}
.masonry-item:hover {
    border: 1px solid #{$grey-dk-100};
}
.masonry-item img {
    border: none;
    margin-inline: auto;
    display: block;
}