body {
    width:   100% !important;
    padding: 0rem !important;
    margin:  0rem !important;
}

body:has(.modal:is(:target)) { overflow: hidden; }

.outer-thumbs {
    width: calc(100% - 2rem);
    padding: 1rem;
}

.thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    justify-content: space-between;
    align-content: flex-start;
    align-items: stretch;
    
    width: 100%;
    resize: both;
}

.thumbs::after {
    content: "";
    flex: 100 0 auto;
}

.thumb-anchor {
    text-decoration: none;
    position: relative;
    display: block;
    flex: 1 0 auto;
    margin: 0.2rem;

    transition-property: transform, box-shadow, color;
    transition-duration: 125ms;
}

.thumb-anchor:hover {
    transform: scale(1.075, 1.075);
    color: #bbb;
    z-index: 1;
}

.thumb {
    display: block;
    height: 10rem;
    width: 100%;
}

img.thumb {
    object-fit: cover;
    object-position: 50% 50%;
}

.close {
    position: fixed;
    text-decoration: none;

    top: 1rem;
    right: 1rem;

    color: #f1f1f1;
    font-size: 2rem;
    font-weight: bold;
    transition: 0.3s;
    
    z-index: 100;
}

.close:hover, .close:focus {
    color: #bbb;
    cursor: pointer;
}

.next {
    position: fixed;
    text-decoration: none;
    top: 50%;
    right: 1rem;
    color: #f1f1f1;
    font-size: 2rem;
    font-weight: bold;
    transition: 0.3s;
    
    z-index: 100;
}

.next:hover, .next:focus {
    color: #bbb;
    cursor: pointer;
}

.prev {
    position: fixed;
    text-decoration: none;
    top: 50%;
    left: 1rem;
    color: #f1f1f1;
    font-size: 2rem;
    font-weight: bold;
    transition: 0.3s;
    
    z-index: 100;
}

.prev:hover, .prev:focus {
    color: #bbb;
    cursor: pointer;
}

/* The Modal (background) */
.modal {
  display: none;   /* Hidden by default */
  position: fixed; /* Stay in place */

  z-index: 100; /* Sit on top */

  left: 0;
  top: 0;

  width: 100%;  /* Full width */
  height: 100%; /* Full height */

  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    position: fixed;
    left: 50%;
    top: 50%;
    
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
    max-width:  100dvw;
    max-height: 100dvh;
}

.modal:is(:target)  { display: block; }
.modal:not(:target) { display: none; }

.modal-fill {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.goto-gallery {
    position: fixed;

    top: 1.5rem;
    left: 1rem;

    color: #f1f1f1;
    font-size: 1rem;
    font-weight: bold;
    transition: 0.3s;
    
    z-index: 100;
}

.goto-gallery:hover, .goto-gallery:focus {
    color: #bbb;
    cursor: pointer;
}