:root{
    /**          Colors           */
    --cl-transparent : #ffffff00;
    --cl-white: #ffffff;
    --cl-black: #212122;
    --cl-gray:#818181;

    --cl-primary:    #532e14;
    --cl-primary_:    #eeea00;
    --cl-secondary:  #8f8b88;
    --cl-accent :    #c8d6d7;
    --cl-other :    #ea08ff;

/**    Website size per Screen Sizes           */
    --width-1:1400px;
    --width-2:1200px; /* 1600px */
    --width-3:90%; /* 1200px */
    --width-4:95%;
    --width-5:99%;
    --width-6:99%;

    --pad-1:10px;
    --pad-2:5px;
    --pad-3:30px;
    --pad-4:5%;
    --pad-5:2%;
    --pad-6:2px;

/**    Padding  Between Sections          */
    --sec-padF:50px;    /* Pading Full*/
    --sec-padH:20px;    /* Pading Half*/

/**    Fonts for heading           */
--fnt-h: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
--fnt-d: system-ui,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/**    Other           */
.btn_primary{
background-color: var(--cl-primary);
border: 2px solid #00000052;
color: var(--cl-black);
}

.btn_secondary{
background-color: var(--cl-secondary);
border: 2px solid var(--cl-primary);
color: var(--cl-black);
}
.btn_accent{
background-color: var(--cl-white);
border: 2px solid var(--cl-accent);
color: #000000 !important;
}

.btn_primary_outline{
background-color: var(--cl-white);
border: 2px solid var(--cl-primary);;
color: var(--cl-black);
}

.btn_secondary_outline{
    background-color: var(--cl-white);
    border: 2px solid var(--cl-secondary);;
    color: var(--cl-black);
}

/**    Custom           */
hr{
    height: 20px;
    border-top: 1px dotted #ffffff00;
    border: 0;
    padding: 1px;
}
hr::before{
    content: attr(comp-id);
    border: 1px solid #161616;
    border-radius: 5px 5px 0 0;
    text-align: center;
    padding: 0px 6px;
    margin-left: 30px;
    background-color: antiquewhite;
}