@import url("color.css");
@import url("typography.css");
@import url("extensions.css");

a:link, a:visited {
    color: #495057;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 0.25em;
    text-decoration-skip-ink: none;
}

a:hover, a:active {
    color: #212529;
    text-decoration-thickness: 1px;
}

a.intro-text {
    text-decoration-color: #dee2e6;
}
a.intro-text:hover {
    text-decoration-color: #ced4da;
}

@media screen and (min-width: 75em) {
  .di-xl { display: inline; }
}
@media screen and (min-width: 75em) {
        .nav-current::after {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
            position: absolute;
            bottom: -1rem;
            left: 50%;
            transform: translateX(-50%);
        }
}

/* Index */

.omo-card-link {
    background-color: #51CF66;
    background-image:url('projects/omo/cover.png'); 
    background-size:cover; 
    background-position:center;
    text-decoration: none;
    position: relative;
}

.omo-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(43, 138, 62, 0.3);
  transition: background 0.1s ease;
  z-index: 0;
}
.omo-card-link * {
  position: relative;
  z-index: 1;
}

.omo-card-link .card-title {
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 0.25em;
    text-decoration-skip-ink: none;
}
.omo-card-link:hover .card-title {
    text-decoration-thickness: 1px;
}
a.omo-card-link, a.omo-card-link:active {
    color: #fff;
}
.omo-card-link:hover {
    /* background-size:101%; */
}
.omo-card-link:hover::after {
    background: rgba(43, 138, 62, 0.4);
}
.omo-card-link .br-pill {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.koro-card-link {
    background-color: #dee2e6;
    background-image:url('projects/koro/hero-bg.jpg'); 
    background-size:110%; 
    background-position:center;
    text-decoration: none;
    transition: background-size 0.1s ease;
}
@media (max-width: 1200px) {
    .koro-card-link, .koro-card-link:hover {
        background-size: cover !important;
    }
}
.koro-card-link .card-title {
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 0.25em;
    text-decoration-skip-ink: none;
}
.koro-card-link:hover .card-title {
    text-decoration-thickness: 1px;
}
a.koro-card-link, a.koro-card-link:active {
    color: #fff;
}
.koro-card-link:hover {
    background-size:111%;
}
.koro-card-link .br-pill {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}





.sb-card-link {
    background-color: #FFEC99;
    text-decoration: none;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.sb-card-link:hover {
    background-color: #FFE685;
}
.sb-card-link:hover .card-image-wrap {
    opacity: 0.92;
}
.sb-card-link .card-title {
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 0.25em;
    text-decoration-skip-ink: none;
}
.sb-card-link:hover .card-title {
    text-decoration-thickness: 1px;
}

.card-image-wrap {
    transition: opacity 0.2s ease;
}


/* 

  Slider
  https://github.com/ganlanyuan/tiny-slider

*/

.slider-wrapper {
  position: relative;
}

.prev, .next {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.5);
  color: #111;
  border: none;
  font-size: 2rem;
  border-radius: 80px;
  width: 80px;
  height: 80px;
  cursor: pointer;
 
  backdrop-filter: blur(20px);      /* adds blur behind */
  -webkit-backdrop-filter: blur(20px); /* Safari support */


}

.prev { left: -20px; }
.next { right: -20px; }

.prev:hover, .next:hover {
  background: rgba(255,255,255,0.7);
}