html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
:root {
    --light-white: #f2f4f7;
    --white-medium: #f0eeed;
    --medium-orange: #f27e2c;
    --warm-grey: #EBE5E3;
    --light-grey: #B2B6BA;
    --strong-red: #8f0801;
    --medium-red: #c40e04;
    --light-red: #e81005;
    --medium-green: #02b013;
    /*--medium-orange: #f25a18;*/ /* origin */
    --bg-bootstrap-dark: #212529;
    --bg-medium-dark: #161819;
    --bg-dark-black: #0c0d0d;
}
/* Font family*/
.michroma-regular {
    font-family: "Michroma", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.michroma-basic {
    font-family: "Michroma", sans-serif;
    font-style: normal;
}
/* Font color Variables */
.light-grey {
    color: var(--light-grey);
}

.warm-grey {
    color: var(--warm-grey);
}

.light-white {
    color: var(--light-white);
}

.medium-orange {
    color: var(--medium-orange);
}

.strong-red {
    color: var(--strong-red);
}

.medium-red {
    color: var(--medium-red);
}

.light-red {
    color: var(--light-red);
}

.medium-green {
    color: var(--medium-green);
}
/* Background color Varibales */
.bg-dark-black {
    background-color: var(--bg-dark-black);
}

.bg-medium-orange {
    background-color: var(--medium-orange);
}

.bg-medium-dark {
    background-color: var(--bg-medium-dark);
}

.bg-linear-dark {
    background: linear-gradient( to bottom, var(--bg-bootstrap-dark), var(--bg-medium-dark), var(--bg-dark-black) );
}

/* Border colour */
.border-medium-orange {
    border-color: var(--medium-orange);
}
.btnOrange {
    border: 0.5px solid var(--medium-orange);
    color: var(--medium-orange);
}

.btnOrange:hover {
    border: 1px solid var(--medium-orange);
    color: var(--medium-orange);
    box-shadow: 1px 1px 15px var(--medium-orange);
}