:root {
    --coffee: #aa856e;
    --coffee-light: #caa188;
    --accent-blue:#6c67b3;
    --accent-blue-secondary:#938ecd;
    --accent-blue-dark:#54507c;
    --code-green:#6A9955;
    --code-green-secondary:#547345;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--bg-body);
    color: var(--text-secondary);
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}
a {
    color: var(--accent-blue);
    text-decoration: none;
}


/*Colors font*/
.text-primary {
    color: var(--text-primary);
}
.text-secondary {
    color: var(--text-secondary);
}
.text-coffee {
    color: var(--coffee);
}
.text-coffee-light {
    color: var(--coffee-light);
}
.text-code-green {
    color: var(--code-green);
}
.text-code-green-secondary {
    color: var(--code-green-secondary);
}

/*backgrounds*/
.bg-body {
    background-color: var(--bg-body);
}
.bg-container {
    background-color: var(--bg-container);
}
.bg-nav {
    background-color: var(--bg-nav);
}
.bg-primary {
    background-color: var(--text-primary);
}
.bg-secondary {
    background-color: var(--text-secondary);
}
.bg-coffee {
    background-color: var(--coffee);
}
.bg-coffee-light {
    background-color: var(--coffee-light);
}
.bg-code-green {
    background-color: var(--code-green);
}
.bg-code-green-secondary {
    background-color: var(--code-green-secondary);
}


/*containers*/
.l-cont, .m-cont, .s-cont {
    background-color: var(--bg-container);
    margin-block: 10px;
    padding: 15px;
    box-shadow: -1px 1px 2px 2px var(--shadow-gray);
}
.l-cont {
    width: 100%;
}
.m-cont {
    width: 50%;
}
.s-cont {
    width: 25%;
}


/*Margins*/
.mrg-i-5vw {
    margin-inline: 5vw;
}
.mrg-i-10vw {
    margin-inline: 10vw;
}
.mrg-i-5p {
    margin-inline: 5%;
}
.mrg-i-10p {
    margin-inline: 10%;
}
.mrg-i-15 {
    margin-inline: 15px;
}
.mrg-i-20 {
    margin-inline: 20px;
}
.mrg-i-25 {
    margin-inline: 25px;
}

.mrg-b-5vw {
    margin-block: 5vh;
}
.mrg-b-10vw {
    margin-block: 10vh;
}
.mrg-b-5p {
    margin-block: 5%;
}
.mrg-b-10p {
    margin-block: 10%;
}
.mrg-b-15 {
    margin-block: 15px;
}
.mrg-b-20 {
    margin-block: 20px;
}
.mrg-b-25 {
    margin-block: 25px;
}


/*paddings*/
.pd-i-5p {
    padding-inline: 5%;
}
.pd-i-10p {
    padding-inline: 10%;
}
.pd-i-5 {
    padding-inline: 5px;
}
.pd-i-10 {
    padding-inline: 10px;
}
.pd-i-15 {
    padding-inline: 15px;
}
.pd-i-20 {
    padding-inline: 20px;
}
.pd-i-25 {
    padding-inline: 25px;
}


.pd-b-5p {
    padding-block: 5%;
}
.pd-b-10p {
    padding-block: 10%;
}
.pd-b-5 {
    padding-block: 5px;
}
.pd-b-10 {
    padding-block: 10px;
}
.pd-b-15 {
    padding-block: 15px;
}
.pd-b-20 {
    padding-block: 20px;
}
.pd-b-25 {
    padding-block: 25px;
}


/*max widths for stuffs*/
.max-2400px, .max-xl {
    max-width: 2400px;
}
.max-1200px, .max-l {
    max-width: 1200px;
}
.max-800px, .max-m {
    max-width: 800px;
}
.max-600px .max-s {
    max-width: 600px;
}
.max-300px .max-xs {
    max-width: 300px;
}

/*border-radius*/
.brdrad-5, .brdrad-low {
    border-radius: 5px;
}
.brdrad-15, .brdrad-med {
    border-radius: 15px;
}
.brdrad-30, .brdrad-hi {
    border-radius: 30px;
}


/*Flex directions*/
.fl-row {
    display: flex;
    flex-direction: row;
}
.fl-col {
    display: flex;
    flex-direction: column;
}
.fl-row-rev {
    display: flex;
    flex-direction: row-reverse;
}
.fl-col-rev {
    display: flex;
    flex-direction: column-reverse;
}


/*Gaps for flexes*/
.gap-5 {
    gap: 5px;
    row-gap: 5px;
}
.gap-10 {
    gap: 10px;
    row-gap: 10px;
}
.gap-15 {
    gap: 15px;
    row-gap: 15px;
}
.gap-25 {
    gap: 25px;
    row-gap: 25px;
}
.gap-50 {
    gap: 50px;
    row-gap: 50px;
}


/*navs and their aligns*/
.t-nav, .nav-al-cent, .nav-al-l, .nav-al-r {
    display: flex;
    background-color: var(--bg-nav);
    box-shadow: -1px 1px 2px 2px var(--shadow-gray);
}
.nav-al-cent {
    justify-content: center;
}
.nav-al-l {
    justify-content: left;
}
.nav-al-r {
    justify-content: right;
}
.pos-top, .pos-bot, .pos-left, .pos-right {
    position: fixed;
}
.pos-top {
    top: 0;
}
.pos-bot {
    bottom: 0;
}
.pos-left {
    left: 0;
}
.pos-right {
    right: 0;
}

/*heights*/
.h-100p {
    height: 100%;
}
.h-80p {
    height: 80%;
}
.h-50p {
    height: 50%;
}
.h-25p {
    height: 25%;
}

/*widths*/
.w-100p {
    width: 100%;
}
.w-80p {
    width: 80%;
}
.w-50p {
    width: 50%;
}
.h-25p {
    width: 25%;
}

/*menus etc.*/
.default-sidenav {
    /*this is not static, 
    depending on your case you may need to make your css style do so*/
    width: 260px;
    height: 100vh;
}
.default-sidenav-t-part {
    /*top div for default sidenav*/
    display: flex;
    justify-content: right;
    width: calc(100vw - 260px);
}

/*Others*/
.scroll-div {
    overflow-y: auto;
}

/*icons*/
.ico-inverted-80p {
    filter: invert(80%);
}
.ico-inverted-60p {
    filter: invert(60%);
}
.ico-inverted-40p {
    filter: invert(40%);
}
.ico-inverted-20p {
    filter: invert(20%);
}

/*Medias*/
@media (min-width:1300px) {
    /*just in case so margin doesnt break*/
    .max-1200px {
        margin: auto;
    }
}
@media (max-width:1300px) {
    .default-sidenav {
        display: none;
    }
    .default-sidenav-t-part {
        /*top div for default sidenav*/
        justify-content: center;
        width: 100vw;
    }
}