$prefix: pf;

@import "variables";

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

@import 'mixins';

@import 'nav';


body {
    background-color: var(--#{$prefix}-bg);
}

w-full {
    width: 100%;
}
.d-flex {
    display: flex;
}
.my-auto {
    margin-left: auto;
    margin-right: auto;
}
.m-0 {
    margin: 0px;
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    box-sizing: border-box;
}

div#left-col {
    width: 15vw;
    padding: 10px;
    background-color: var(--#{$prefix}-nav-bg);
}

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;
    background-color: var(--#{$prefix}-nav-bg);
}