@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
body,
button {
  font-family: "Inter", sans-serif;
}
:root {
  --offcanvas-width: 270px;
  --topNavbarHeight: 56px;
}
.sidebar-nav {
  width: var(--offcanvas-width);
}
.sidebar-link {
  display: flex;
  align-items: center;
}
.sidebar-link .right-icon {
  display: inline-flex;
}
.sidebar-link[aria-expanded="true"] .right-icon {
  transform: rotate(180deg);
}
@media (min-width: 992px) {
  body {
    overflow: auto !important;
  }
  main {
    margin-left: var(--offcanvas-width);
  }
  /* this is to remove the backdrop */
  .offcanvas-backdrop::before {
    display: none;
  }
  .sidebar-nav {
    -webkit-transform: none;
    transform: none;
    visibility: visible !important;
    height: calc(100% - var(--topNavbarHeight));
    top: var(--topNavbarHeight);
  }
}

.screen-container {
  display: flex;
  flex-direction: column;
}

.screen-title {
  background-color: #008FC2;
  color: #fff;
  padding: 15px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.4);
}

.screen-content {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: auto;
  align-items: center;
}

.content {
  width: 80%;
}

.content b {
  padding: 1px;
  border-bottom: 2px solid #008FC2;
  border-radius: 6px;
}

.screen-img {
  width: 100%;
  border-radius: 5px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.3);
}

img {
  cursor: zoom-in;
}

.screen-content > .content + .screen-img {
  width: 80%;
}

img:active {
  transition: 0.5s all;
  transform: scale(1.5);
  z-index: 9999;
  
}

.screen-circle {
  min-width: 35px;
  min-height: 35px;
  border: 2px solid #008FC2;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-size: 24px;
}

.screen-subtitle {
  display: flex;
  align-items: baseline;
}

.screen-subtitle h4 {
  text-wrap: nowrap;
}

.paragraph {
  font-size: 15px;
  line-height: 23px;
  margin: 0;
}

.first-letter {
  color: #008FC2;
  font-size: 80px;
  float: left;
  line-height: 69px;
}

.content-top {
  padding: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 2px solid #008FC2;
  border-radius: 5px;
  background-color: #eeeeee7f;
}