@import 'catpuccin';

// highlight transition speed
$hl-trn-spd: 0.2s;

$bg: $latte-base;
$nav-bg: $latte-crust;
$nav-color: $latte-text;
$nav-hover: $latte-surface2;
$nav-active-bg: $latte-mauve;
$nav-active-color: $latte-base;
$green: $latte-green;

@import 'mixins';

@import 'nav';

body {
    background-color: $latte-base;
}

body.dark-mode {
    $bg: $macchiato-base;
    $nav-bg: $macchiato-crust;
    $green: $macchiato-green;
}

div#below-header {
    display:flex;
}

div#left-col {
    width: 15vw;
    padding: 10px;
}

div#main-body-content {
    width: 70vw;
    padding: 10px;
    opacity: 1;
    transition: opacity 0.2s ease-out;
}
div#main-body-content.htmx-swapping {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
div#main-body-content.htmx-added {
    opacity: 0;
}

div#right-col {
    width: 15vw;
    padding: 10px;
}