:root {
   --success-color: #198754;
   --danger-color: #dc3545;
   --info-color: #1b6ec2;
   --warning-color: #ff9800;
   --boring-color: #607d8b;
}

body {
   padding: 0 0.5rem;
}

a {
   cursor: pointer;
}

.top-header {
   box-shadow: var(--pico-card-box-shadow);
   border-bottom: 1px solid #121;
   padding-block: 0;
   margin-bottom: 0.75rem;

   & nav {
      & ul {
         & li {
            padding-top: 0.75rem;
            padding-bottom: 0.25rem;
         }
      }
   }
}

.outer-photo-content {
   grid-template-columns: 1fr 3fr !important;
}

article {
   max-width: 25rem;
}

.paging-container {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.photo-cards {
   display: flex;
   gap: 2rem;
   flex-wrap: wrap;

   & article {
      display: flex;
      flex-direction: column;
      min-width: 500px;

      & div.content {
         flex: auto;
      }

      & footer {
         margin-top: auto;
         margin-bottom: 0;
         gap: 1rem;
      }
   }
}

.pill {
   padding: 0.3rem 0.5rem;
   border-radius: 1.3rem;
   font-size: 0.7rem;
   font-weight: bold;
   background-color: var(--pico-secondary-background);
   max-width: 8.5rem;

   &.success {
      background-color: var(--success-color);
      color: white;
   }

   &.danger {
      background-color: var(--danger-color);
      color: white;
   }

   &.info {
      background-color: var(--info-color);
      color: white;
   }

   &.warning {
      background-color: var(--warning-color);
      color: black;
   }

   &.default {
      background-color: var(--boring-color);
      color: white;
   }

}

#selectedKeywords {
   display: flex;
   gap: 0.5rem;
   margin-bottom: 1rem;
}

#selectedPeople {
   display: flex;
   gap: 0.5rem;
   margin-bottom: 1rem;
}

dialog {
   display: flex !important;
}

details.dropdown[open] summary+ul {
   max-height: 15rem;
   overflow-y: scroll;
}

.about-photos {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;

   & img {
      max-width: 18rem;
   }
}

.login-page-center {
   display: flex;
   flex-direction: column;
   align-items: center;

   & article {
      min-width: 30rem;
   }
}

.password-container {
   display: flex;
   align-items: center;
   position: relative;

   & input {
      flex: 1;
   }

   & .password-toggle {
      position: absolute;
      right: 0px;
      cursor: pointer;
      border: none;
   }
}

@media screen and (max-width: 1325px) {
   .outer-photo-content {
      grid-template-columns: 1fr !important;
   }
}

@media screen and (max-width: 775px) {
   .top-header {
      & nav {
         flex-direction: column;
      }
   }

   .photo-cards {
      & article {
         min-width: auto;
      }
   }

   .login-page-center {
      & article {
         min-width: auto;
      }
   }
}