:root {
  --carousel-transition-duration: 0.6s;
}

.light-theme {
  #search, #sort {
    color: var(--accent-color);
    background-color: var(--light-gray);
  }

  #searchBackground {
    background-color: var(--accent-color);
    -webkit-mask: url('/other_assets/search.svg') 15px no-repeat;
    mask: url('/other_assets/search.svg') 15px center no-repeat;
    width: 100%;
    height: 100%;
    mask-size: 30px;
    position: absolute;
    pointer-events: none;
  }

  #shuffle {
    background-color: var(--accent-color);
    -webkit-mask: url('../other_assets/shuffle.svg');
    mask: url('../other_assets/shuffle.svg');

    mask-size: 100%;
  }

  #closesearch {
    color: var(--accent-color);
  }

  #sort option {
    color: var(--accent-color);
  }

  .pageList>button.current, .pageList>.pagePaddle {
    color: var(--accent-color);
  }

  .pageList>button:hover, .pageList>button:focus-visible {
    background-color: var(--light-gray);
  }

  .pageList>button:active{
    background: var(--light-gray-darker);
  }

  .star {
    color: var(--accent-color);
  }

  .specialBg {
    background-color: var(--accent-color);
  }

  .imgBorder:focus-visible {
    outline: 3px solid var(--accent-color);
  }

  #shuffleContainer:has(:focus-visible) {
    outline: 1px solid var(--accent-color);
  }

  .loadContainerCircle {fill: var(--accent-color);}
}

.dark-theme {
  #search, #sort {
    color: var(--accent-color-dark);
    background-color: var(--dark-gray);
  }

  #searchBackground {
    background-color: var(--accent-color-dark);
    -webkit-mask: url('../other_assets/search.svg') 15px no-repeat;
    mask: url('../other_assets/search.svg') 15px center no-repeat;
    width: 100%;
    border: 1px solid blue;
    height: 100%;
    mask-size: 30px;
    position: absolute;
    pointer-events: none;
  }

  #shuffle {
    background-color: var(--accent-color-dark);
    -webkit-mask: url('../other_assets/shuffle.svg');
    mask: url('../other_assets/shuffle.svg');

    mask-size: 100%;
  }

  #closesearch {
    color: var(--accent-color-dark);
  }


  #sort option {
    color: var(--accent-color-dark);
  }

  .pageList>button.current, .pageList>.pagePaddle {
    color: var(--accent-color-dark);
  }

  .pageList>button:hover, .pageList>button:focus-visible {
    background-color: var(--dark-gray);
  }

  .pageList>button:active{
    background: var(--dark-gray-lighter);
  }

  .star {
    color: var(--accent-color-dark);
  }

  .specialBg {
    background-color: var(--accent-color-dark);
  }

  .imgBorder:focus-visible {
    outline: 3px solid var(--accent-color-dark);
  }
  #shuffleContainer:has(:focus-visible) {
    outline: 1px solid var(--accent-color-dark);
  }

  .loadContainerCircle {fill: var(--accent-color-dark);}

  /*#search::placeholder, #search::-webkit-input-placeholder {
    color: red;
  }

  #search:-ms-input-placeholder, #search::-ms-input-placeholder {
    color: red;
  }*/
}


/*general stuff*/

  #photoGallery img, .paddle {
    cursor: pointer;
  }

  #photoGallery .blurry {
    filter: blur(min(10px, 1vw));
  }

  /*table*/

#photoGallery {
  max-width: 95%;
  margin: 15px auto 30px;

  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(0,min(400px, 40vw)));
  grid-column-gap: min(10vw,150px);
  grid-row-gap: 2rem;

  justify-content: center;
  align-items: center;
  align-content: center;
}

#photoGallery * {
  text-align: center;
}

#photoGallery>div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgDataContainer {
  width: 100%;
}

.imgContainer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.imgBorder{
  overflow: hidden;
  position: relative;
}

.imgContainer .imgBorder {
  width: 100%;
}

.imgContainer:not(.v) .imgBorder {max-width: 90%; height: 90%;}

.imgContainer.v .imgBorder {height: 90%; max-height: 54vw; max-width: calc(min(400px, 40vw)*0.9*3/4);}

.imgBorder>img.blurry {
  width: 105%;
  height: 105%;
  margin: -2.38%;
}

.h img {
  width: 100%;
}

.v img {
  height: 100%;
}

  .imgContainer {
    --height: min(300px, 30vw);
    min-height: var(--height);
  }

  .imgContainer.h {
    height: var(--height);
  }

  .imgContainer.v {
    height: min(400px, 40vw);
  }

  .name {
    font-size: 20px;
    font-weight: bold;
    margin-top: 0.5rem;
    vertical-align: bottom !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .sci {
    font-size: 14px;
    font-style: italic;
    vertical-align: top;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .specialBg {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    mask: url('../other_assets/specialbg.svg') center no-repeat;
    -webkit-mask: url('../other_assets/specialbg.svg') center no-repeat;
  }

  .special:not(.v) > .specialBg {
    mask-size: calc(90% + var(--height)*0.1) min(300px,30vw);
    -webkit-mask-size: calc(90% + var(--height)*0.1) min(300px,30vw);
  }

  .special.v > .specialBg {
    mask-size: var(--height) calc(90% + var(--height)*0.1);
    -webkit-mask-size: var(--height) calc(90% + var(--height)*0.1);
  }

  .star {
    position: absolute;
    font-size: min(70px, 6vw);
    width: min(70px, 6vw);
    height: min(70px, 6vw);
    line-height: min(70px, 6vw);
    pointer-events: none;
  }

  .imgContainer:not(.v)>.star {
    top: calc(50% - var(--height)*0.45 - min(70px, 6vw)/2);
    left: calc(5% - min(70px, 6vw)/2); 
  }

.imgContainer.v>.star {
    top: calc(5% - min(70px, 6vw)/2);
    left: calc(16.25% - min(70px, 6vw)/2); 
  }

  /*loader*/

  @keyframes circleAnimation {
    35% {transform: scale(var(--circle-scale))}

    0%, 70%, 100% {transform: scale(1)}
  }

  #loadcontainer {
    width: min-content;
    margin-inline: auto;
	margin-top: 40px;
    margin-bottom: 40px;
    z-index: 1;
    display: flex;
    flex-flow: row nowrap;

    --circle-size: 30px;
    --circle-scale: 1.4;

    >:nth-child(1) {animation-delay: 0ms;}
    >:nth-child(2) {animation-delay: 250ms;}
    >:nth-child(3) {animation-delay: 500ms;}

    gap: var(--circle-size);
    svg {
      width: var(--circle-size); height: var(--circle-size);
      animation: circleAnimation 1s linear infinite;
    }
    .loadContainerCircle {
      r: calc(var(--circle-size)/2);
      cx: calc(var(--circle-size)/2);
      cy: calc(var(--circle-size)/2);
    }


    height: 30px;
    opacity: 1;

    transition-property: opacity, height, margin;
    transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.25s, 0s, 0s;

    &.closed {
      transition-delay: 0s, 0.25s, 0.25s;

      pointer-events: none;

      opacity: 0;
      height: 0;
      margin-block: 0;

      svg {
        animation: none;
      }
    }


  }


  /*carousel*/


  #carousel {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(0,0,0,0.85);
    z-index: 3;
    backdrop-filter: blur(5px);
  }

  #carouselContents {
    pointer-events: none;
    & div {pointer-events: none}
  }

  #centerPhotoContainer .imgBorder, #leftPhotoContainer .imgBorder, #rightPhotoContainer .imgBorder, #carousel .paddle {
    pointer-events: auto;
  }

#photoinfo #namecontainer, #photoinfo #scicontainer {
    pointer-events: auto;
  }

  #carouselContents {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 5vw;
  }

  #carouselLeftSide, #carouselRightSide {
    align-items: center;
    display: flex;
  }

  #carouselLeftSide.hidden, #carouselRightSide.hidden {
    display: none;
  }

  #centerPhotoData {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5;
  }

  #rightPhotoContainer, #leftPhotoContainer {
    height: 10vw;
    width: calc(10vw*4/3);
    opacity: 0.6;
    z-index: 4;
  }



  #centerPhotoContainer, #rightPhotoContainer, #leftPhotoContainer, .hiddenPhotoContainer {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sidePhotosContainer {
    position: relative;
  }

  .hiddenPhotoContainer {
    opacity: 0;
    display: flex;
    height: 10vw;
    width: calc(10vw*4/3);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  #carousel .imgBorder.h {
    height: 100%;
    width: 100%;
  }

  #carousel .imgBorder.v {
    height: 100%;
    width: fit-content;
  }
  
  /* Carousel styles depending on screen aspect ratio*/


/*#centerPhotoContainer {
  translate: calc(5vw + 10vw*4/3) 40px;
  transform-origin: right center;
}*/


  @media (min-aspect-ratio: 4/3) {
    :fullscreen, :-webkit-full-screen {
      #centerPhotoContainer, #carouselLeftSide, #carouselRightSide {
        position: absolute;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
      }



      .sidephotos .blurry, .carphoto .blurry {
        filter: blur(calc(10vh / 3));
      }

      #leftPhotoContainer, #rightPhotoContainer {
        opacity: 0;
      }

      #leftPhotoContainer, #rightPhotoContainer, #centerPhotoContainer {
        height: 100vh;
        width: calc(100vh * 4/3);
      }

      .sidePhotosContainer.right, .sidePhotosContainer.left {
        right: unset;
        left: unset;
      }

      #rightPhotoContainer .imgBorder, #leftPhotoContainer .imgBorder {
        pointer-events: none;

        img:not(.blurry) {
          filter: blur(calc(10vh / 3));
        }
      }

      #carouselContents {
        width: 100%;
        position: absolute;
        right: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px;

        #centerPhotoData {
          height: 100%;

          #photoinfo {
            display: none
          }
        }

        #paddleleft {
          position: absolute;
          left: 5vw;
        }

        #paddleright {
          position: absolute;
          right: 5vw;
        }
      }

      #centerPhotoContainer {
        &.nextPhoto, &.previousPhoto {
          .imgBorder img:not(.blurry) {
            filter: blur(calc(100vh / 30));
            transition: var(--carousel-transition-duration) filter linear;
          }

          opacity: 0;
          transition-timing-function: linear;
          transform: none;
          translate: none;
          top: 0;
        }
      }

      #rightPhotoContainer.nextPhoto, #leftPhotoContainer.previousPhoto {
        .imgBorder img:not(.blurry) {
          filter: blur(0);
          transition: var(--carousel-transition-duration) filter linear;
        }

        opacity: 1;
        transition-timing-function: linear;
        transform: none;
        translate: none;
        z-index: 6;
        top: 0;

        & .imgBorder {
          pointer-events: auto;
        }
      }

      .hiddenPhotoContainer {
        &.nextPhoto, &.previousPhoto {
          opacity: 0
        }
      }
    }
  }


  @media (min-aspect-ratio: 2.1) {

    #carouselLeftSide {
      flex-direction: row-reverse;
    }

    #carouselRightSide {
      flex-direction: row;
    }

    #carouselLeftSide, #carouselRightSide {
      gap: 2.5vw;
    }

    #leftPhotoContainer.previousPhoto {
      translate: calc(10vw*4/3 * 0.5 + 5vw + 85vh * 0.8 * 4 / 3 * 0.5);
      top: -40px;
    }

    #centerPhotoContainer.previousPhoto {
      translate: calc(10vw*4/3 * 0.5 + 5vw + 85vh * 0.8 * 4 / 3 * 0.5);
      top: 40px;
    }

    #rightPhotoContainer.nextPhoto {
      translate: calc(-10vw*4/3 * 0.5 - 5vw - 85vh * 0.8 * 4 / 3 * 0.5);
      top: -40px;
    }

    #centerPhotoContainer.nextPhoto {
      translate: calc(-10vw*4/3 * 0.5 - 5vw - 85vh * 0.8 * 4 / 3 * 0.5);
      top: 40px;
    }
  }

  @media (min-aspect-ratio: 1.55) and (max-aspect-ratio: 2.1) {
    #carouselLeftSide, #carouselRightSide {
      flex-direction: column;
      gap: 1.5vw;
    }

    #leftPhotoContainer.previousPhoto {
      translate: calc(10vw*4/3 * 0.5 + 5vw + 85vh * 0.8 * 4 / 3 * 0.5);
      top: calc(-40px + 3.25vw);
    }

    #centerPhotoContainer.previousPhoto {
      translate: calc(10vw*4/3 * 0.5 + 5vw + 85vh * 0.8 * 4 / 3 * 0.5);
      top: calc(40px - 3.25vw);
    }

    #rightPhotoContainer.nextPhoto {
      translate: calc(-10vw*4/3 * 0.5 - 5vw - 85vh * 0.8 * 4 / 3 * 0.5);
      top: calc(-40px + 3.25vw);
    }

    #centerPhotoContainer.nextPhoto {
      translate: calc(-10vw*4/3 * 0.5 - 5vw - 85vh * 0.8 * 4 / 3 * 0.5);
      top: calc(40px - 3.25vw);
    }
  }

  @media (max-aspect-ratio: 1.55) {

    .sidePhotosContainer.left {
      position: absolute;
      left: calc(-10vw*4/3);
    }

    .sidePhotosContainer.right {
      position: absolute;
      right: calc(-10vw*4/3);
    }

    #leftPhotoContainer.previousPhoto {
      translate: calc(10vw*4/3 * 0.5 + 50vw);
      top: -40px;
    }

    #centerPhotoContainer.previousPhoto {
      translate: calc(10vw*4/3 * 0.5 + 50vw);
      top: 40px;
    }

    #rightPhotoContainer.nextPhoto {
      translate: calc(-10vw*4/3 * 0.5 - 50vw);
      top: -40px;
    }

    #centerPhotoContainer.nextPhoto {
      translate: calc(-10vw*4/3 * 0.5 - 50vw);
      top: 40px;
    }
  }

  @media (min-aspect-ratio: 1.2)  {
    .paddle {
      font-size: 3vw;
      height: 5vw;
      width: 5vw;
    }

    .sidephotos .blurry {
      filter: blur(calc(10vw/30));
    }

    #leftPhotoContainer.previousPhoto, #rightPhotoContainer.nextPhoto, .hiddenPhotoContainer.previousPhoto {
      transition-timing-function: cubic-bezier(0.5,0,1,1), cubic-bezier(0,0,0.5,1), cubic-bezier(0,0,0.5,1), cubic-bezier(0,0,0.5,1);
    }

    #leftPhotoContainer.nextPhoto, #centerPhotoContainer.previousPhoto, #centerPhotoContainer.nextPhoto, #rightPhotoContainer.previousPhoto, .hiddenPhotoContainer.nextPhoto {
      transition-timing-function: cubic-bezier(0,0,0.5,1), cubic-bezier(0.5,0,1,1), cubic-bezier(0.5,0,1,1), cubic-bezier(0.5,0,1,1);
    }
  }

  @media (max-aspect-ratio: 1.2) {
    .paddle {
      position: absolute;
      height: 10vw;
      width: 10vw;
      font-size: 6vw;
    }

    #paddleleft {
      left: 5vw;
    }

    #paddleright {
      right: 5vw;
    }

    #carousel #leftPhotoContainer, #carousel #rightPhotoContainer {
      height: 68vh;
      width: calc(68vh*4/3);
      top: -40px;
    }

    .sidePhotosContainer.left {
      position: absolute;
      left: calc(-68vh*4/3);
    }

    .sidePhotosContainer.right {
      position: absolute;
      right: calc(-68vh*4/3);
    }

    #leftPhotoContainer.previousPhoto {
      translate: calc(68vh*2/3 + 50vw);
      top:0;
    }

    #centerPhotoContainer.previousPhoto {
      translate: calc(68vh*2/3 + 50vw);
      top:0;
    }

    #rightPhotoContainer.nextPhoto {
      translate: calc(-68vh*2/3 - 50vw);
      top:0;
    }

    #centerPhotoContainer.nextPhoto {
      translate: calc(-68vh*2/3 - 50vw);
      top:0;
    }

    #leftPhotoContainer.previousPhoto, #rightPhotoContainer.nextPhoto, .hiddenPhotoContainer.previousPhoto {
      transition-timing-function: linear !important;
    }

    #leftPhotoContainer.nextPhoto, #centerPhotoContainer.previousPhoto, #centerPhotoContainer.nextPhoto, #rightPhotoContainer.previousPhoto, .hiddenPhotoContainer.nextPhoto {
      transition-timing-function: linear !important;
    }

    .sidephotos .blurry {
      filter: blur(calc(68vh/30));
    }

  }

  @media (min-aspect-ratio: 1) {
    #centerPhotoData {
      width: calc(85vh*0.8*4/3);
    }

    #centerPhotoContainer {
      height: 68vh;
      width: 100%;
    }

    #carousel {
      gap: 5vw
    }

    .carphoto .blurry {
      filter: blur(calc(68vh/30));
    }
  }

  @media (max-aspect-ratio: 1) {
    #centerPhotoData {
      width: 90vw;
    }

    #centerPhotoContainer {
      max-height: calc(90vw*3/4);
      height: calc(90vw*3/4);
    }

    #carousel #leftPhotoContainer, #carousel #rightPhotoContainer {
      height: calc(90vw*3/4);
      width: 90vw;
      top: -40px;
    }

    #leftPhotoContainer.previousPhoto {
      translate: 95vw;
      top:0;
    }

    #centerPhotoContainer.previousPhoto {
      translate: 95vw;
      top:0;
    }

    #rightPhotoContainer.nextPhoto {
      translate: -95vw;
      top:0;
    }

    #centerPhotoContainer.nextPhoto {
      translate: -95vw;
      top:0;
    }

    .sidePhotosContainer.left {
      position: absolute;
      left: -90vw;
    }

    .sidePhotosContainer.right {
      position: absolute;
      right: -90vw;
    }

    .carphoto,.sidephotos{
      .blurry {
        filter: blur(2.25vw);
      }
    }
  }






  /*carousel based on aspect ratio*/

  /*carousel animations*/
  @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;visibility: visible;}
  }

  @keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;visibility: collapse;}
  }

  #carousel.open {
    animation: fadeIn 0.5s;
  }

  #carousel.closing {
    animation: fadeOut 0.5s;

    div, img {
      pointer-events: none;
    }
  }

  #carousel.closed {
    visibility: collapse;
  }

  #hiddenPhotoRight.previousPhoto, #hiddenPhotoLeft.nextPhoto {
    opacity: 0.6;
  }


  .previousPhoto, .nextPhoto {
    transition-property: translate, top, scale, opacity;
    transition-duration: var(--carousel-transition-duration);
  }

  #leftPhotoContainer, #rightPhotoContainer, #centerPhotoContainer {
    top: 0;
    position: relative;
  }

  #leftPhotoContainer.previousPhoto {
    transform-origin: center center;
  }

  #centerPhotoContainer.nextPhoto {
    transform-origin: center center;
  }

  #rightPhotoContainer.nextPhoto {
    transform-origin: center center;
  }

  #centerPhotoContainer.previousPhoto {
    transform-origin: center center;
  }

  #leftPhotoContainer.previousPhoto, #rightPhotoContainer.nextPhoto {
    opacity: 1;
  }

  #centerPhotoContainer.previousPhoto, #centerPhotoContainer.nextPhoto {
    opacity: 0.6;
  }

  #rightPhotoContainer.previousPhoto, #leftPhotoContainer.nextPhoto {
    opacity: 0;
  }

  .hiddenPhotoContainer.previousPhoto, .hiddenPhotoContainer.nextPhoto {
    opacity: 0.6;
  }

  #photoinfo {
    transition: opacity linear;
    transition-duration: calc(var(--carousel-transition-duration)/2);
    min-height: 80px;
    display: flex;
    align-items: center;
  }

  #photoinfo.changingContent {
    opacity: 0;
  }

  /*carousel animations*/

  /*Other carousel stuff*/
.star, #closecar, #carousel img, .paddle {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

#namecontainer {
  font-size: 25px;
  font-weight: bold;
  color: white;
}

#scicontainer {
  font-size: 15px;
  font-style: italic;
  color: white;
}

.paddle {
  display: flex;
  font-family: Righteous;
  font-weight: 700;
  border-radius: 5vw;
  line-height: 0;
  justify-content: center;
  align-items: center;
  z-index: 7;
  background-color: white;
  color: black;
  mix-blend-mode: screen;
}

.paddle:hover, .paddle:focus-visible {
  background-color: var(--light-gray);
}

.paddle:active, .paddle.active {
  background-color: var(--light-gray-darker);
}

#closecar {
  height: 100%;
  width: 100%;
  position: absolute;
}

#fullscreen, #closefullscreen {
  height: min(40px,5vmin);
  width: min(40px,5vmin);
  max-height: 5vw;
  max-width: 5vw;
  position: absolute;
  left: min(5vmin,40px);
  top: min(5vmin,40px);
  cursor: pointer;
  user-drag: none;
  -webkit-user-drag: none;
  z-index: 10;

  filter: drop-shadow(1px 1px 3px rgb(0,0,0,0.5));
}

#fullscreen:hover, #closefullscreen:hover, #fullscreen:focus-visible, #closefullscreen:focus-visible{
  filter: brightness(0.87) drop-shadow(1px 1px 3px rgb(0,0,0,0.5));
}

#fullscreen:active, #closefullscreen:active{
  filter: brightness(0.6) drop-shadow(1px 1px 3px rgb(0,0,0,0.5));
}
  /*Other carousel stuff*/







  /*searching and sorting*/

  #search {
    border-radius: 40px;
    height: 100%;
    width: 100%;
    font-family: Montserrat;
    padding: 0 55px 0 55px;
    font-size: 20px;
    font-weight: 500;
  }

  #sort {
    border-radius: 50px;
    height: 100%;
    width: 100%;
    font-family: Montserrat;
    padding: 5px 20px 5px 20px;
    font-size: 20px;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance: none;
    background-color: transparent;

    font-weight: 500;

    text-align-last: right;
  }

  #sortbg {
    border-radius: 50px;
    position: absolute;
    font-family: Montserrat;
    padding: 5px 20px 5px 20px;
    font-size: 20px;
    z-index: 0;
    position: absolute;
    left: 0;
    font-weight: 300;

    pointer-events: none;
  }

  #sort, #search {
    border: none;
  }

  option {
    font-weight: 500;
    text-align: center;
  }

  #search:-ms-input-placeholder, #search::-ms-input-placeholder {
    opacity: 1;
    font-weight: 300;
  }

  #search::placeholder, #search::-webkit-input-placeholder {
    opacity: 1;
    font-weight: 300;
  }

  input::-webkit-calendar-picker-indicator {
    display: none !important;
  }

  #searchbox, #sortbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    width: 30%;
    max-width: 600px;
    min-width: min(450px, 90vw);
    margin: 10px;
  }

  @media only screen and (max-width: 500px) {
    #sortbg {
        display: none;
    }

    #sort {
      text-align-last: left;
    }
  }

  #closesearch, #sortoptions {
    position: absolute;
    right: 20px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }

  #sortoptions {
    display: flex;
    align-items: center;
  }

  #closesearch {
    font-size: 60px;
    height: 40px;
    line-height: 40px;
    font-family: Righteous;
    background-color: transparent;
    border: none;
    border-radius: 20px;
    cursor: pointer;
  }

  #sort:hover, #shuffle:hover {
    cursor: pointer;
  }


  #shuffle {
    width: 25px;
    height: 25px;
  }

  #shuffleContainer {
    border-radius: 2px;
  }

  #closesearch:hover, #shuffle:hover, #closesearch:focus-visible, #shuffle:focus-visible {
    filter: brightness(0.9);
  }

  #closesearch:active, #shuffle:active{
    filter: brightness(0.8);
  }

  #tableOptions {
    width: 100%;
    position: relative;
    text-align: center;
  }

  /*page selection*/
.pageList {
  display: flex;
  justify-content: center;
}

.pageList.hidden {
  display: none;
}

.pageList>button{
  display: inline-block;
  font: inherit;
  font-size: 2em;
  font-weight: bold;
  color: inherit;
  height: 1.8em;
  width: 1.8em;
  line-height: 1.8em;
  border-radius: 1.8em;
  border: none;
  margin-inline: 3px;
  background-color: transparent;
  cursor: pointer;
  user-select: none;
}


.pageList>button.hidden {
  visibility: hidden;
}
  /*page selection*/
  
  #footer.hidden {
	  display: none;
  }
  
  #nobird {
	  font-weight: bold;
	  font-size: 20px;
	  margin-top: 30px;
  }

  #noscript {
    position: absolute;
	  font-weight: bold;
	  font-size: 20px;
    width: 70%;
	  top: 400px;
    margin-left: 15%;
    margin-right: 15%;
  }