@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
 display: block;
 overflow-x: hidden;
 font-family: 'Montserrat', sans-serif;
 background-color: #495057;
}
a {
  text-decoration: none;
}
.card-title {
  font-size: 2.5rem;
}
p {
  font-size: 1.2rem;
}
/**** NAVBAR ****/
nav {
 background-color: #0a0a0a;
}
.navbar-brand img {
 max-height: 50px; 
}
.navbar-brand {
 font-size: 24px;
 text-transform: uppercase;
 font-weight: 900;
 color: #683aa4;
}
nav ul li a {
 color:#f8f9fa;
 font-size: 22px;
 margin: auto 10px;
}
nav ul li a:hover {
 color: #ced4da;
}
/**** END OF NAVBAR ****/
pre {
  font-size: 1.2rem;
}

/*** HERO MAIN PAGE TEST ***/
.hero-div {
  display: grid;
  grid-template-columns: 50% 50%
}
.hero-title-div {
  margin-top: 20%;
  grid-column-starts: 1
}
.hero-title-div .btn-red {
  margin-top: 1rem;
}
.hero-img-div {
  grid-column-starts: 2
}
h1 {
  font-size: 4rem;
}
h2 {
  font-size: 2.5rem;
}
h4 {
  color: #ffc31f;
  margin-bottom: 1rem;
}
section {
 padding-top: 50px;
 padding-bottom: 50px;
}
section h1 {
 text-transform: uppercase;
 font-weight: 1000;
 color: #f55e00;
 text-align: left;
 margin-bottom: 20px;
}
section h2 {
  color: #ffc31f
}
section p {
 font-size: 16px;
 font-weight: 300;
 color: #ffc31f
}
.btn-red {
 color: #f8f9fa;
 background-color: #0a0a0a;
}
.btn-red:hover {
  color:#adb5bd;
}
.btn-red:focus {
  outline: 0 !important;
  box-shadow: none;
}

/**** END OF HERO MAIN PAGE SECTION ****/

.card {
  background-color: #343a40;
  color: white;
  margin-bottom: 2rem;
}
/* hide the blue outline */
.form-control:focus {
    outline: 0 !important;
    border-color: initial;
    box-shadow: none;
}
.filter-main {
  width: 50%;
}
.btn-filter {
  background-color: #30638e;
  color: white;
}
.btn-filter:hover {
  color: red;
}
.btn-filter:focus {
  outline: 0 !important;
  box-shadow: none;
}
.btn-category {
  background-color: #d1495b;
  color: white;
}
.btn-category:hover {
  color: black;
}
.btn-category:focus {
  outline: 0 !important;
  box-shadow: none;
}
/*******************************************************************************************************************************************/

@media (max-width: 767px) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}