:root{
 
    /* colors */
    --primary-color : #b20707;
    --secondary-color : #cd1919;
    --teritary-color : #fbdfb5;
    --quaternary-color : #fbdfb5c2;

    --text-color-wh : #ffffff;
    --text-color-bl : #000000;

    /* font-family */
    --topic-font-family : "Oswald", sans-serif;
    --logo-font-family : "DM Serif Display", serif;
    --para-font-family:  "Outfit", sans-serif;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: var(--para-font-family);
}

.topic{
    font-family: var(--topic-font-family);
    letter-spacing: 1.5px;
}


/* margin-top */
.mt-0{
    margin-top: 0;
}
.mt-5{
    margin-top: 5px;
}
.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.mt-20{
    margin-top: 20px;
}
.mt-25{
    margin-top: 25px;
}
.mt-30{
    margin-top: 30px;
}
.mt-35{
    margin-top: 35px;
}
.mt-40{
    margin-top: 40px;
}

/* margin-bottom */
.mb-0{
    margin-bottom: 0;
}
.mb-5{
    margin-bottom: 5px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-15{
    margin-bottom: 15px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-25{
    margin-bottom: 25px;
}
.mb-30{
    margin-bottom: 30px;
}
.mb-35{
    margin-bottom: 35px;
}
.mb-40{
    margin-bottom: 40px;
}

/* margin-right */
.mr-0{
    margin-right: 0px;
}
.mr-5{
    margin-right: 5px;
}
.mr-10{
    margin-right: 10px;
}
.mr-15{
    margin-right: 15px;
}
.mr-20{
    margin-right: 20px;
}
.mr-25{
    margin-right: 25px;
}
.mr-30{
    margin-right: 30px;
}
.mr-35{
    margin-right: 35px;
}
.mr-40{
    margin-right: 40px;
}

/* margin-left */
.ml-0{
    margin-left: 0px;
}
.ml-5{
    margin-left: 5px;
}
.ml-10{
    margin-left: 10px;
}
.ml-15{
    margin-left: 15px;
}
.ml-20{
    margin-left: 20px;
}
.ml-25{
    margin-left: 25px;
}
.ml-30{
    margin-left: 30px;
}
.ml-35{
    margin-left: 35px;
}
.ml-40{
    margin-left: 40px;
}

/* padding-top */
.pt-0{
    padding-top: 0px;
}
.pt-5{
    padding-top: 5px;
}
.pt-10{
    padding-top: 10px;
}
.pt-15{
    padding-top: 15px;
}
.pt-20{
    padding-top: 20px;
}
.pt-25{
    padding-top: 25px;
}
.pt-30{
    padding-top: 30px;
}
.pt-35{
    padding-top: 35px;
}
.pt-40{
    padding-top: 40px;
}

/* padding-bottom */
.pb-0{
    padding-bottom: 10px;
}
.pb-5{
    padding-bottom: 15px;
}
.pb-10{
    padding-bottom: 10px;
}
.pb-15{
    padding-bottom: 15px;
}
.pb-20{
    padding-bottom: 20px;
}
.pb-25{
    padding-bottom: 25px;
}
.pb-30{
    padding-bottom: 30px;
}
.pb-35{
    padding-bottom: 35px;
}
.pb-40{
    padding-bottom: 40px;
}

/* padding-right */
.pr-10{
    padding-right: 10px;
}
.pr-15{
    padding-right: 15px;
}
.pr-20{
    padding-right: 20px;
}
.pr-25{
    padding-right: 25px;
}
.pr-30{
    padding-right: 30px;
}
.pr-35{
    padding-right: 35px;
}
.pr-40{
    padding-right: 40px;
}

/* padding-left */
.pl-10{
    padding-left: 10px;
}
.pl-15{
    padding-left: 15px;
}
.pl-20{
    padding-left: 20px;
}
.pl-25{
    padding-left: 25px;
}
.pl-30{
    padding-left: 30px;
}
.pl-35{
    padding-left: 35px;
}
.pl-40{
    padding-left: 40px;
}

/* display-flex */
.display-flex{
    display: flex;
}

/* flex-direction */
.flex-direction-cl{
    flex-direction: column;
}
.flex-direction-cl-rev{
    flex-direction: column-reverse;
}
.flex-direction-rw{
    flex-direction: row;
}
.flex-direction-rw-rev{
    flex-direction: row-reverse;
}

/* justify=content */
.justify-center{
    justify-content: center;
}
.justify-space-bw{
    justify-content: space-between;
}
.justify-space-ar{
    justify-content: space-around;
}
.justify-space-eq{
    justify-content: space-evenly;
}

/* align-items */
.align-center{
    align-items: center;
}
.align-start{
    align-items: start;
}
.align-end{
    align-items: end;
}
.align-strech{
    align-items: stretch;
}