@import url("https://fonts.googleapis.com/css?family=Ubuntu");
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");

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

body {
  background-color: #161e2d;
  color: white;
  font-family: Ubuntu, sans-serif !important;
  overflow-x: clip;
}

.logo {
  width: 230px;
  margin: 20px 0 0 0;
}

.hacker-green {
  color: #88cc14;
}

#quiz {
  text-align: center;
}

.job-moto {
  margin-top: 20px;
  color: #c4c6ca;
  font-size: 20px;
}

#quiz-questions {
  margin: auto;
  padding-bottom: 5rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#quiz-question {
  max-width: 800px;
}

.quiz-question {
  font-size: 25px;
  line-height: 25px;
  background: #454e60;
  width: 600px;
  margin: auto;
  margin-bottom: 15px;
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.quiz-question:hover {
  opacity: 0.8;
}

#redo-quiz {
  margin-top: 10px;
  margin-bottom: 20px;
  font-style: italic;
  cursor: pointer;
  border: 2px dashed #88cc14;
  color: #fff;
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
  font-size: 24px;
}

#redo-quiz:hover {
  background: #88cc1487;
}

#quiz-skip {
  margin-top: 10px;
  float: left;
  opacity: 0.5;
  font-style: italic;
  cursor: pointer;
  margin-left: 5px;
}

#quiz-progress {
  margin-top: 10px;
  float: right;
  opacity: 0.5;
  margin-right: 5px;
}

.quiz-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

#quiz-go-to {
  margin: auto;
  font-size: 18px;
  margin-top: 10px;
  opacity: 0.7;
}

#job-types {
  display: grid;
  grid-template-columns: 0.4fr 1.6fr;
  gap: 0px 0px;
  width: 100vw;
  height: 100%;
}

#job-types {
  display: none;
}

#job-list {
  height: calc(100vh - 230px);
  display: flex;
  flex-direction: column;
}

#job-list > div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  background: #323c4c;
  padding: 0px 10px;
  cursor: pointer;
  box-shadow: inset 0 -7px 9px -6px rgb(0 0 0 / 40%);
}

#job-list > div:hover {
  opacity: 0.7;
}

#job-list > div:first-child {
  border-top-right-radius: 10px;
}

.job-active {
  background: #7bb21bab !important;
  border-bottom: 5px solid #88cc14 !important;
  box-shadow: inset 0 -7px 9px -5px #88cc14 !important;
}

#job-info {
  height: calc(100vh - 230px);
  overflow-y: scroll;
}

#job-info {
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

#job-summary {
  font-size: 20px;
  color: #c4c6ca;
}

#job-description,
#job-responsibilities,
#job-paths {
  font-size: 18px;
}

#job-description,
#job-responsibilities,
#job-paths {
  text-align: left;
}

#job-responsibilities i,
#job-paths i {
  width: 25px;
}

.hacker-list {
  margin: 0;
}

.faded {
  opacity: 0.7;
}

#job-socials {
  font-size: 35px;
}

#job-socials i {
  margin: 0px 10px;
  opacity: 0.7;
  cursor: pointer;
}

#job-socials i:hover {
  opacity: 1;
}

/* PATH */

.path-options {
  text-align: center;
}

.path-options button {
  font-size: 18px;
}

.path-image-large {
  width: 100%;
  height: 270px;
  /* border-radius: 5px; */
  object-fit: cover;
  filter: brightness(55%);
}

.path-floating-label,
.path-floating-label-full {
  position: absolute;
  z-index: 8;
  bottom: 0;
  background: #2f82fb;
  /* e74c3c 689e0b */
  padding: 10px 15px;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Ubuntu Mono";
  border-top-right-radius: 5px;
  /* border-bottom-left-radius: 5px; */
  font-size: 20px;
  width: 100%;
}

.path-floating-label.large {
  font-size: 200%;
  border-top-left-radius: 5px;
}

.path-preview {
  margin-right: 10px;
  width: 20rem;
  height: 175px;
  display: inline-flex;
  border: 0;
}

@media only screen and (max-width: 884px) {
  .path-preview {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  .quiz-question {
    width: 500px;
  }
}

.path-preview,
.path-preview > .card-img-top,
.path-preview > .card-img-top > .card-img {
  border-radius: 5px;
}

.card-img-top {
  position: relative;
  display: inline-block;
  height: 200px;
  margin: auto;
  vertical-align: middle;
  text-align: center;
}

.card-img {
  width: 100%;
  height: 100%;
  background-position: center !important;
  background-size: cover !important;
}

.path-body > ul {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0;
}

.path-body > ul > li::before {
  content: "• ";
  color: var(--hacker-green);
  /* or whatever color you prefer */
  filter: brightness(90%);
  margin-right: 6px;
}

.path-body > ul > li {
  margin-top: 0.2em;
}

.card-img-top:hover .path-enroll-link {
  opacity: 1;
  filter: brightness(100%);
  z-index: 100;
}

.card-img-top:hover > .card-img,
.card-img-top:hover > .path-floating-label {
  animation: color_change 0.7s forwards;
}

.path-enroll-link {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

@keyframes color_change {
  from {
  }
  to {
    filter: brightness(55%);
  }
}

/* Scroll bar */

::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent; /* f1f1f1 */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #88cc14; /* 888 */
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(124, 124, 124); /* 555 */
}

.clear-link {
  color: inherit;
}

a.clear-link,
a.clear-link:hover {
  color: inherit;
  text-decoration: none !important;
}

.lottie {
  display: block;
  margin: auto;
}
#paths {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
}