:root {
    --color-main: #AE6173;
    --color-secondary:#B68EAD;
    --color-terciary: #E7E1C3;
    --color-quarty: #CBAE6B;
    --color-quinty: #969D68;

    --color-background-skew:#969D682B;
    --color-background-skew-reverse: #edeee5;


    --background-styled-1: linear-gradient(379deg,transparent 48%,hsla(0,0%,100%,.05) 0),linear-gradient(323deg,hsla(0,0%,100%,.1) 28%,transparent 0), var(--color-bg);
    --background-styled-2: linear-gradient(239deg,transparent 59%,hsla(0,0%,100%,.1) 0),linear-gradient(330deg,hsla(0,0%,100%,.2) 35%,transparent 0), var(--color-bg);

    --gradient-main: linear-gradient(to right top, var(--color-main), #b16c83, #b37792, #b583a0, var(--color-secondary));
    --gradient-reverse: linear-gradient(to left bottom, var(--color-main), #b16c83, #b37792, #b583a0, var(--color-secondary));


    --bs-link-color-rgb: 174,97,115;
    --bs-link-hover-color-rgb: 182,142,173;

    --bs-border-radius : 0;
    --bs-border-radius-lg : 0;

}

body {
    font-family: "Fira Sans Condensed", sans-serif;
    font-size:1.1rem;
}


.jockey-one-regular, h1, h2, h3, h4 {
    font-family: "Jockey One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--color-main);
}

.card .card-header {
   /* background: var(--background-styled-2)*/
}


.section-skew {
    background: linear-gradient(0deg, var(--color-background-skew), var(--bs-body-bg) 79%);
}

.section-skew-reverse {
    background: linear-gradient(0deg,var(--bs-body-bg), var(--color-background-skew) 79%);
    margin-top:6rem;
}


.section-skew .skew-transition {
    border-bottom : 65px solid var(--bs-body-bg);
    border-left : 100vw solid transparent;
    background : transparent;
    width : 0;
    height : 0;
    display : block;
}


.section-skew-reverse .skew-transition {
    border-top : 65px solid var(--bs-body-bg);
    border-left : 100vw solid transparent;
    background : transparent;
    width : 0;
    height : 0;
    display : block;
}

.ms-7 {
    margin-left:5rem;
}

.w-fit {
    width:fit-content;
}

.badge-skew {
    border-radius: 0;
    transform:skew(-18deg);
    margin:0 5px;
}

.text-bg-main {
    color:#fff!important;
    background-color:var(--color-main);
}

.text-bg-data, .text-bg-alternative {
    color:#fff!important;
    background-color:var(--color-secondary);
}


.text-bg-terciary {
    color:#fff!important;
    background-color:var(--color-terciary);
}

.text-bg-style, .text-bg-quarty {
    color:#fff!important;
    background-color:var(--color-quarty);
}


.text-bg-template, .text-bg-quinty {
    color:#fff!important;
    background-color:var(--color-quinty);
}

.main-container {
    max-width:1200px;
}

.btn-skew {
    border-radius: 0;
    transform:skew(-18deg);
    border:0;
}

.btn-gradient {

    --bs-gradient:var(--gradient-main);
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-main);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-main);
    --bs-btn-hover-border-color: var(--color-main);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-main);
    --bs-btn-active-border-color: var(--color-main);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-secondary);
    --bs-btn-disabled-border-color: var(--color-secondary);
    background:var(--bs-gradient);
}


.btn-gradient:hover {
    --bs-gradient: var(--gradient-reverse);
}

.btn-outline-main {
    --bs-btn-color: var(--color-main);
    --bs-btn-border-color: var(--color-main);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-main);
    --bs-btn-hover-border-color: var(--color-main);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-main);
    --bs-btn-active-border-color: var(--color-main);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-main);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-main);
    --bs-gradient: none;
}
/* Header */
nav .navbar-brand {
    font-family: "Jockey One", sans-serif;
    font-weight: 400;
    font-style: normal;
    --bs-navbar-brand-font-size : 2rem;
    line-height: 1;
}

nav h1 { margin:0; padding:0; font-size: unset; line-height: 1; }


.brand span {
    background:var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* PreContent */

#preContent {
    height:70vh;
    margin-bottom:6rem;
}

#preContent h2 {
    width:350px;
}

#preContentSecond {
    width:350px;
}


/* Features */
.title-feature { margin-left:0;}
.title-feature::before { position:absolute; content:""; transform:translateX(-1px); background:var(--bs-body-bg); width:35px; height:100%;}
.link-feature { margin-right: 5px; transform:translateY(50%);}
.link-feature::before { position:absolute; content:""; transform:translateX(8px); background:var(--bs-body-bg); width:35px; height:100%; right:0;}


.list-group.list-group-feature {
    flex-direction: row;
    --bs-list-group-border-radius: 0;
    --bs-list-group-border-width:0;
}

.list-group-feature .list-group-item:nth-child(2n +1) {
    background-color:var(--color-background-skew-reverse);
}

/* Doc */
.section-doc {
    margin: 5rem 0;
}

.section-doc p {
    margin-bottom:3px;
}

.section-doc h3 {margin-top:0.75rem; padding-left:1rem; position:relative;}
.section-doc h3::before { content:""; position:absolute; width:10px; height:10px;top: 55%; left:0; transform: translateY(-50%) skew(-18deg); background-color:currentColor;}

.section-doc h4 { font-size:1.2rem; margin-left:5px; margin-top:1rem;}

.section-doc p.listing { font-weight: 500; opacity: 0.7;}

.section-doc pre { padding:1rem; border: thin solid grey;}