*,
*::after,
*::before {
  box-sizing: border-box;
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f7ecde !important;
}
body::selection {
  background-color: #fec260;
}
ul {
  list-style: none;
  padding: 0;
}
h1 {
  font-family: "Pacifico";
  font-size: 50px !important;
  font-family: "Pacifico", cursive;
  transition: height 0.3s ease;
}
h1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background-color: #fec260;
  z-index: -1;
  transition: height 0.3s ease;
}
h1:hover::after {
  height: 70%;
}
h2 {
  font-family: "Righteous";
  font-size: 25px !important;
  background-image: linear-gradient(to right, #3ca55c, #b5ac49) !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content-box {
  border-style: dotted;
  border-width: 2px 0px;
  border-color: #000000;
}
#siteName,
div.main-cat,
div.list-cat {
  background: #f8f9fa !important;
}
#srchUrl::placeholder {
  color: #ffffff !important;
  font-weight: bold;
}
#srchUrl {
  background-image: linear-gradient(to right, #3ca55c, #d4d800) !important;
  font-weight: bold;
}

div.list-cat {
  border-top: 1px solid rgba(128, 128, 128, 0.336) !important;
}

#siteName:focus,
#siteURL:focus,
#srchUrl:focus {
  border-color: #d99c39 !important;
  box-shadow: 0 0 0 0.25rem #fec26055 !important;
}
#submitBtn {
  background: #cf5c3c !important;
}
#submitBtn:hover {
  background: white !important;
  border: 1px solid #000000 !important;
  color: #000000 !important;
}
button.btnCol:hover {
  background-color: white !important;
  color: black !important;
}
a:hover {
  color: inherit !important;
  background-color: #f8f9fa !important;
}