/*
 * Box Sizing Reset
 * https://css-tricks.com/box-sizing/
*/
html {
   scroll-behavior: smooth;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
*, *:before, *:after {
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit;
}

/* Bootstrap */
section {
   scroll-margin-top: 90px;
}

/* Own styles */
*::-moz-selection,
*::selection { background: #369; }

section {
   background: rgba(255, 255, 255, .75);
   -webkit-backdrop-filter: blur(0.25rem);
           backdrop-filter: blur(0.25rem);
   padding: 1rem;
}
section + section {
   margin-top: 1rem;
}
body {
   font-family: "Merriweather", serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   line-height: 1.5;
   font-size: 1.25rem;
}
h1, h2, h3, h4, h5, h6 {
   font-family: "Roboto", sans-serif;
   font-optical-sizing: auto;
   font-weight: 900;
   font-style: normal;
}
h3 { font-size: 1.5rem;}

.btn {
   font-family: "Roboto", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
}
.navbar {
   background-color: white;
}
.navbar-nav .nav-link.active {
   text-decoration: underline;
}
.website-title {
   font-size: 1.25rem;
   border-bottom: 2px dashed #369;
   transition: all 0.5s ease-in-out;
}
.website-title:active,
.website-title:focus,
.website-title:hover {
   border-bottom-style: solid;
}
.image-wrapper {
   position: relative;
   margin:.375rem .5rem 0 0;
}
.image-wrapper:active .my-image,
.image-wrapper:focus .my-image,
.image-wrapper:hover .my-image {
   width:12rem;
}
@media (max-width: 523px) {
   .image-wrapper:active .my-image,
   .image-wrapper:focus .my-image,
   .image-wrapper:hover .my-image {
      width:100%;
      margin-bottom: .5rem;
   }
}
.image-wrapper:active .symbol,
.image-wrapper:focus .symbol,
.image-wrapper:hover .symbol {
   transition: all 0.5s ease-in-out;
   opacity: 0;
}
.image-wrapper .symbol {
   font-size: .875rem;
   right: 0;
   bottom: 0;
   position: absolute;
   background: rgba(255, 255, 255, .5);
}
.my-image {
   position: relative;
   width: 5rem;
   transition: all 0.5s ease-in-out;
}
.carousel-caption {
   padding-left: 1rem;
   padding-right: 1rem;
   bottom: auto;
   top: 1.25rem;
}
.carousel-caption a {
   font-weight: 700;
   color: white;
}
.carousel-caption h5 {
    margin-bottom: 0;
}
.carousel-caption p {
    margin-bottom: .25rem;
}
.carousel-indicators {
   bottom: 1rem;
}
.card-img-overlay {
   transform: translateY(calc(100% - 3.5rem));
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   color: var(--bs-body-color);
   transition: all 0.3s ease-in-out;
   background-color: rgba(255, 255, 255, .8);
}
.card-img-overlay:hover {
   color: #fff;
   background-color: rgba(0, 0, 0, .8);
}
.read-more:checked + .card-img-overlay {
   color: #fff;
   background-color: rgba(0, 0, 0, .8);
   transform: translateY(0);
}
input.read-more + .card-img-overlay .readmore .less,
input.read-more:checked + .card-img-overlay .readmore .more {
   display: none;
}
input.read-more:checked + .card-img-overlay .readmore .less{
   display: inline;
}
.card-img-overlay a {
   color: #fff;
}
.card-group .card {
   overflow: hidden;;
}
.card-img-overlay h5 {
   font-size: 1.5rem;
}
.card-img-overlay p {
   font-size: 1rem;
}
.readmore {
   font-size: .875rem;
}
@media (max-width: 1023px) {
   .carousel-caption,
   .carousel-indicators {
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      position: relative;
      background-color: rgba(0,0,0,0.7);
      margin: 0;
   }
   .carousel-caption {
      text-align: left;
      background: none;
      color: var(--bs-body-color);
      padding: 0;
   }
   .carousel-caption p {
      height: 4rem;
   }
   .carousel-caption a {
      color: var(--bs-body-color);
   }
}
@media (min-width: 1024px) {
   .carousel-caption {
      top: 0;
   }
}
footer .btn-outline-light.btn:hover,
footer .btn-outline-light.btn:focus,
footer .btn-outline-light.btn:active {
   color: #fff;
   background-color: rgba(0, 0, 0, .25);
}
footer svg {
   width: 20px;
   height: 20px;
   margin-top: -2px
}