:root {
    --tblr-primary: var(--tblr-dark);
    --tblr-primary-rgb: var(--tblr-dark-rgb);
    --tblr-primary-text-emphasis: #002242;
    --tblr-primary-bg-subtle: #ccdded;
    --tblr-primary-border-subtle: #99bbdb;
    --card-shadow: 0 0 20px 15px rgba(0,0,0,0.5);
}

:root,
:host,
[data-bs-theme=light] {
    --tblr-primary: var(--tblr-dark);
    --tblr-primary-rgb: var(--tblr-dark-rgb);
    --tblr-primary-fg: var(--tblr-light);
    --tblr-primary-darken: #004c95;
    --tblr-primary-lt: #e6eef6;
    --tblr-primary-lt-rgb: 230, 238, 246;
}

@font-face {
    font-family: 'Caveat';
    src: url("../fonts/caveat-variable-font-weight-7msmQeo.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

.font-caveat {
    font-family: 'Caveat', sans-serif;
}

@font-face {
    font-family: 'IndieFlower';
    src: url("../fonts/indie-flower-regular-Ia7F7p-.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

.font-indie-flower {
    font-family: 'IndieFlower', sans-serif;
}

@font-face {
    font-family: 'NanumPenScript';
    src: url("../fonts/nanum-pen-script-regular-rfwdj49.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

.font-nanum-pen-script {
    font-family: 'NanumPenScript', sans-serif;
}

body {
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.bg-canvas-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.page {
    position: relative;
    z-index: 1;
}

.bg1 {
    background: url("../images/back-1-OZy3-vL.jpg");
}

.bg2 {
    background: url("../images/back-2-T2SOESg.jpg");
}

.bg3 {
    background: url("../images/back-3-AmoNGOi.jpg");
}

.h1-plus {
    font-size: 2rem;
}

.dropdown-hover {
    &:hover {
        color: gray;
    }
}

.custom-border-radius {
    border-radius: 1rem;

    @media (max-width:576px) {
        border-radius: 0;
    }
}

.max-width-sm-100 {
    @media (max-width:576px) {
        max-width: unset;
    }
}

.card-responsive {
    @media (max-width:576px) {
        margin-left: 0;
        margin-right: 0;
    }
}

.card-shadow {
    box-shadow: var(--card-shadow);
}

.glass-effect {
    background-color: rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
}

.glass-effect-light {
    background-color: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
}

.glass-effect-extra {
    background-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.glass-effect-ultra {
    background-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tblr-btn-icon-size);
    height: var(--tblr-btn-icon-size);
    border-radius: var(--tblr-border-radius);
    background-color: var(--tblr-dark);
}

.avatar img {
    object-fit: cover;
    border-radius: var(--tblr-border-radius);
}

.avatar-big {
    width: 11rem;
    height: 11rem;
}

@media (max-width: 349px) {
    .list-item-inline,
    .list-inline-item:not(:last-child) {
        -webkit-margin-end: 0;
        margin-inline-end: 0;
        margin-right: 0;
        display: block !important;
}
}

.d-xs-inline-block {
    display: none;

    @media (min-width: 349px) {
        display: inline-block !important;
        margin-right: .5rem;
    }
}

.d-xs-full {
    @media (max-width: 349px) {
        width: 100%;
        border-radius: 0;

        a {
            justify-content: center;
            white-space: wrap;
        }
    }
}

img {
    transition: transform 0.3s ease;
    max-height: 100%;
    max-width: 100%;
}

img.enlarged {
    transform: scale(2) translateY(35px);
    max-width: 100vw;
    max-height: 100vh;
}

.fade-in {
    opacity: 0;
    transform: scale(0);
    animation: fadeInScale 1s ease-in-out forwards;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}