/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
  /* removed font- based rules */
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2: Reference Individual Icons */
.login::before {
  /* using style CSS custom property */
  font: var(--fa-font-solid);
  content: "\f007";
}

/* Note: Make sure to include the correct weight and Unicode value for the icon */
.tps::before {
  /* using style CSS custom property */
  font: var(--fa-font-solid);
  content: "\f1ea";
}


body {
    background-image: url("../img/main_background.jpg");
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body i.fa:hover {
    cursor: pointer;
    height: 80%;
    background-color: lightgray;
    border-radius: .2rem;
    padding-bottom: .2rem;
    filter: drop-shadow(0px 0px 2px #000);
}
body i.fa-minus {
  padding-left: .5rem;
  padding-right: .5rem;
}
pre {
  overflow-x: auto;
	max-width: 60vw;
}

pre code {
    word-wrap: normal;
    white-space: pre;
}

.container {
  height: 100vh;
}

.card {
    opacity: 0.8;
    transition: opacity .2s ease;
}

.card:hover {
  opacity: 1;
}

.card-body {
  transition: all .5s ease;
}

.card-body table {
  margin-bottom: 1rem !important;
}

.card .section {
  margin-top: 1rem;
}

.expanded {
  max-height: 1000px;
}

.contracted {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  ;
}

h3.section-title {
  border-bottom: .2rem solid yellow;
}