@media (max-width: 767px) {
  .navbar-collapse {
    display: inherit;
  }

  .nav-item {
    margin-left: 1rem;
  }

  .navbar-nav {
    flex-direction: row;
  }

  .navbar .smicon {
    width: 2rem;
    margin-left: 5px;
    margin-right: -25px;
  }

  .navbar li a {
    font-size: 0.8rem;
  }

  .card-body {
    flex: none;
  }

  .refdiv,
  .container .smbtncarto {
    width: 50%;
  }

  .container .display-3 {
    font-size: 2.2rem;
  }

  .container .h2sm {
    font-size: 1.8rem;
  }

  .container .h3sm {
    font-size: 1.4rem;
  }
}

@media (max-width: 990px) {
  /* About, Contact page images */
  .im-c {
    margin-top: 5%;
    max-width: 80%;
  }
}

/* Common styles */
.float-right {
  float: right;
}

.navbar {
  padding-bottom: 0px;
  padding-top: 0px;
}

body {
  padding-top: 3.5rem;
  min-height: 100%;
  background-attachment: fixed;
}

/* Homepage */
body.bg-home {
  background: repeating-linear-gradient(
      -135deg,
      rgba(210, 210, 220, 0.2) 0,
      rgba(210, 210, 220, 0.2) 1px,
      transparent 1px,
      transparent 6px
    ),
    #f6f7f8;
}

/* Navbar icon */
.mdicon {
  width: 3.1rem;
  margin-left: 10px;
}

.borderbtm {
  border-bottom: solid;
}

.projcont,
.projdiv {
  display: flex;
}

.projcont {
  flex-wrap: wrap;
  justify-content: center;
}

.projdiv {
  align-items: center;
  flex-direction: column;
  margin-bottom: 5%;
  margin-top: 1%;
}

.card {
  height: 210px;
  width: 95%;
  max-width: 18rem;
}

.card .card-header {
  text-align: center;
}

.status-badge {
  position: absolute;
  top: 7px;
  left: 2px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: default;
}

.status-badge.active {
  background-color: #05f33d;
}

.status-badge.archived {
  background-color: #6c757d;
}

/* Status Tooltip */
.status-badge:hover::after {
  content: attr(data-status);
  position: absolute;
  right: 120%;
  top: 50%;
  transform: translateY(-50%);
  background: #1b1b1be1;
  color: #dbdbdb;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.85rem;
}

.margbtmthin {
  margin-bottom: 14px;
}

.bg-customgray {
  background-color: #e9ecef;
}

.bg-customaqua {
  background-color: #17a2b8;
}

#reposh3 {
  padding-left: 0px;
}

.tooltip-cpb {
  visibility: hidden;
  background-color: #fff;
  color: #555;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  left: 50%;
}

/* Footer */
footer {
  border-top: solid;
  border-width: 0.2vw;
  margin-top: 5%;
}

footer a:not(#maila) {
  float: right;
}

#maila:any-link {
  color: inherit;
}

/* Graphics page */
body.bg-graphics {
  background: repeating-linear-gradient(
      135deg,
      rgba(150, 180, 220, 0.12) 0px,
      rgba(150, 180, 220, 0.12) 2px,
      rgba(0, 0, 0, 0.02) 2px,
      rgba(0, 0, 0, 0.02) 4px
    ),
    #fafdff;
}

.wallthumb {
  border-color: DarkGray;
  width: 75%;
  margin-bottom: 30px;
}

/* About page */
body.bg-about {
  background: repeating-linear-gradient(
      135deg,
      rgba(210, 210, 220, 0.2) 0,
      rgba(210, 210, 220, 0.2) 1px,
      transparent 1px,
      transparent 6px
    ),
    #f6f7f8;
}

/* Contact page */
body.bg-contact {
  background: repeating-linear-gradient(
      -135deg,
      rgba(150, 180, 220, 0.12) 0px,
      rgba(150, 180, 220, 0.12) 2px,
      rgba(0, 0, 0, 0.02) 2px,
      rgba(0, 0, 0, 0.02) 4px
    ),
    #fafdff;
}

.contactli {
  width: 270px;
}

.copy-btn {
  padding: 5px;
}

.tooltip-cpa {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  top: 100%;
  left: 50%;
}