* {
  margin: 0;
  padding: 0;
  --oreoDark: #272425;
  --oreoMid: #6c6463;
  --oreoLight: #bbbcbc;
  --oreoBlue: #003087;
  --oreoLightBlue: #7cc6f2;
  /* modal variables go here */
  --smokeDark: rgba(0, 0, 0, 0.6);
  --smoke: rgba(0, 0, 0, 0.5);
  --smokeLight: rgba(0, 0, 0, 0.4)

}

body {
  font-family: "Exo 2", sans-serif;
}

/* header styling starts here */
#header {
  font-family: "Mr Dafoe", sans-serif;
  display: flex;
  height: calc(3vh + 4rem);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
}

#header button {
  font-family: "Exo 2", sans-serif;
}

#header nav {
  font-family: "Exo 2", sans-serif;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* header styling ends here */

/* footer style start */
#footer {
  font-family: "Exo 2", sans-serif;
}

#footerimg {
  height: calc(1vh + 2rem);
}
/* footer style end */

/* results form styling start */
#pairing-results article {
  border: 3px solid var(--oreoMid);
}

/* search form style start*/
.bg-gray-400 {
  padding: 1px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* background colors section start */
.bg-oreoDark {
  background-color: var(--oreoDark);
}

.bg-oreoMid {
  background-color: var(--oreoMid);
}

.bg-oreoLight {
  background-color: var(--oreoLight);
}

.bg-oreoBlue {
  background-color: var(--oreoBlue);
}

.bg-oreoLightBlue {
  background-color: var(--oreoLightBlue);
}
/* background colors section end */

/* font color  sections start */
.text-oreoDark {
  color: var(--oreoDark);
}

.text-oreoMid {
  color: var(--oreoMid);
}

.text-oreoLight {
  color: var(--oreoLight);
}

.text-oreoBlue {
  color: var(--oreoBlue);
}

.text-oreoLightBlue {
  color: var(--oreoLightBlue);
}
/* font color section end  */

/* nav links style start*/
#randomlink:hover {
  background-color: var(--oreoLightBlue);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: #6c6463;
}

#aboutlink:hover {
  background-color: var(--oreoLightBlue);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: #6c6463;
}

#contactlink:hover {
  background-color: var(--oreoLightBlue);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: #6c6463;
}
/*nav links style end*/

/* list of recent searches style start */

li {
font-family: "Exo 2", sans-serif;
}
/* list of recent searches style end */

/* modal window styling starts here */
.bg-smokeDark {
  background-color: var(--smokeDark);
}

.bg-smoke {
  background-color: var(--smoke);
}

.bg-smokeLight {
  background-color: var(--smokeLight);
}

/* modal window styling ends here */