:root {
  --accent: #e82591;
  --gold: rgb(218,165,32);
  --black: #4c4c4c;
  --radius: .2rem;
}
@font-face {
  font-family: RalewayThin;
  src: url(../assets/fonts/raleway/Raleway-Thin.ttf);
}
@font-face {
  font-family: RalewayLight;
  src: url(../assets/fonts/raleway/Raleway-ExtraLight.ttf);
}
@font-face {
  font-family: Raleway;
  src: url(../assets/fonts/raleway/Raleway-VariableFont_wght.ttf);
}

html {
  scroll-behavior: smooth;
}
html, body {
  font-family: RalewayLight;
  margin: 0;
  padding: 0;
}
.stretched {
  flex-grow: 2;
}

span.material-icons.small { font-size: 1rem; }

a > span { display: inline-block; vertical-align: middle; }
a span.material-icons { margin-right: .1rem; }

a {
  text-decoration: none;
  color: var(--black);
}

a.golden-hover,
a.black-hover,
a.white-hover {
  border-radius: var(--radius);
  transition: background-color 400ms, color 400ms;
}
a.golden-hover:focus,
a.golden-hover:hover {
  background-color: var(--gold);
  color: var(--black);
}
a.white-hover:focus,
a.white-hover:hover {
  background-color: white;
  color: var(--black);
}
a.black-hover:focus,
a.black-hover:hover {
  background-color: var(--black);
  color: var(--gold);
}

a > span {
  display: inline-block;
  vertical-align: middle;
}
a:not(.flat):hover > span {
  color: var(--accent);
}

img.lazy {
  opacity: 1;
  transition: opacity 300ms;
}
img.lazy[data-src] {
  opacity: 0;
}

main.albums {
  position: relative;
  background-color: rgba(255,255,255, .9);
  padding: 4rem 0rem;
  z-index: 1000;
  top: 100vh;
}

main.albums h1,
main.albums h2 {
  background-color: #3a3a3a;
  color: var(--gold);
  border-radius: var(--radius);
  width: fit-content;
  min-width: 20rem;
}
main.albums h1 { padding: 1rem 2rem; font-size: 2rem; }
main.albums h2 { padding: .5rem 1rem; margin: 1rem .5em; font-size: 1.7rem; }
main.albums h1 .icon,
main.albums h2 .icon { font-size: 1rem; }
main.albums h1 > span,
main.albums h2 > span { display: inline-block; vertical-align: middle; }

main.albums .album-content article:not(.no-top-margin):not(.no-bottom-margin):not(.no-margin) {
  margin: 2rem auto;
}
main.albums article.no-top-margin { margin: 0 auto 2rem auto; }
main.albums article.no-bottom-margin { margin: 2rem auto 0 auto; }
main.albums article.no-margin { margin: 0 auto; }

main.albums section h1.flex,
main.albums section h2.flex,
main.albums section h3.flex,
main.albums section h4.flex,
main.albums section h5.flex,
main.albums section h6.flex {
  justify-content: space-between;
}
main.albums section h1 a span.material-icons,
main.albums section h2 a span.material-icons,
main.albums section h3 a span.material-icons,
main.albums section h4 a span.material-icons,
main.albums section h5 a span.material-icons,
main.albums section h6 a span.material-icons {
  color: var(--gold)
}
main.albums section h1 a:hover span.material-icons,
main.albums section h2 a:hover span.material-icons,
main.albums section h3 a:hover span.material-icons,
main.albums section h4 a:hover span.material-icons,
main.albums section h5 a:hover span.material-icons,
main.albums section h6 a:hover span.material-icons {
  color: white;
}

.gallery-title h1 { position: relative; margin: 2rem .5em 0 .5rem; }
.gallery-title h1 .progress {
  position: absolute;
  height: 3px;
  inset: auto 0 0 0;
  background-color: var(--gold);
  transform-origin: left;
}
.gallery-title {
  position: sticky;
  top: 4rem;
  z-index: 900;
}

main > section { margin: 6rem auto; }
main section, main article { clear: both; }

main section article.right { float: right; }

.photos .photo .sort-info,
.galleries .gallery .sort-info {
  position: absolute;
  top: .5rem;
  left: .5rem;
  border-radius: var(--radius);
  background-color: var(--gold);
  color: var(--black);
  padding: 0rem .4rem;
  z-index: 200;
}
.photos .photo .sort-info span,
.galleries .gallery .sort-info span {
  display: inline-block;
  vertical-align: middle;
  font-size: .8rem;
  margin: 0 .1rem
}

a.album,
a.studio {
  border-radius: var(--radius);
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: .2rem .8rem;
  margin: .1rem;
  text-decoration: none;
  transition: background-color 300ms;
  white-space: nowrap;
  display: inline-block;
}
a.album.black,
a.studio.black {
  background-color: var(--black);
  color: white;
}
a.album.black:hover,
a.studio.black:hover {
  background-color: var(--gold);
  color: var(--black);
}
a.album.gold,
a.studio.gold {
  background-color: var(--gold);
  color: var(--black);
}
a.album.gold:hover,
a.studio.gold:hover {
  background-color: var(--black);
  color: var(--gold);
}
a.album:not(.black):not(.gold):hover,
a.studio:not(.black):not(.gold):hover {
  text-decoration: underline;
}
span.fire,
span.fav {
  display: inline-block;
}
span.fav {
  transform-origin: center;
  animation-name: heart-beat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
span.fire {
  transform-origin: center bottom;
  animation-name: on-fire;
  animation-duration: .3s;
  animation-iteration-count: infinite;
}
@keyframes heart-beat {
  0% { transform: scale(1); }
  10% { transform: scale(1.3); }
  20% { transform: scale(1); }
  30% { transform: scale(1.3); }
  40% { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes on-fire {
  0% { transform: scale(1, 1); }
  50% { transform: scale(1.1, 1.2); }
  100% { transform: scale(1, 1); }
}

img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
img.cover:not(.cover) {
  object-position: center;
}
img.cover.top {
  object-position: top;
}

.stat { margin: 0 .3rem; }
.stat > span { display: inline-block; vertical-align: middle; }

.flex { display: flex; }
.flex.centered { align-items: center; }
.flex.right { justify-content: flex-end; }
.flex.space-between { justify-content: space-between; }
.flex.align-center { justify-content: center; }

.f-right { float: right; }

.loader {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.3);
  text-align: center;
  line-height: 100%;
  display: table;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  transition: opacity 300ms;
}
.loader > div {
  display: table-cell;
  vertical-align: middle;
  color: white;
}
.loader span {
  color: var(--gold);
}
.loader[hidden] {
  opacity: 0;
  display: table;
  pointer-events: none;
}
.loader .animate {
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: default;
}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: rgba(0,0,0,.85);
  color: #fff;
  text-align: center;
  padding: 10px 5px;
  border-radius: var(--radius);
  pointer-events: none;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transform: translateY(50%);
  transition: opacity 0.3s 2s, transform 300ms 2s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1b1b1b transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
/* ---------------------- FORMS -------------------------*/
input,
textarea,
select {
  font-family: Raleway;
}
form label { margin-left: .5rem; }
.for-input {
  border-radius: var(--radius);
  margin: .2rem 0.5rem;
  width: fit-content;
  display: flex;
  align-items: center;
  transition: background-color 300ms, border-color 300ms
}
.for-input input,
.for-input textarea {
  background: transparent;
  border: none;
  padding: 0.5rem 1rem .5rem .5rem;
  resize: none;
  width: calc(100% - 1.5rem);
}
.for-input select {
  min-width: 5rem;
  padding: 0.3rem;
  border: none;
  background: transparent;
  width: calc(100% - 1.5rem);
}
.for-input input:focus,
.for-input select:focus,
.for-input textarea:focus {
  outline: none;
}
.for-input input:disabled,
.for-input select:disabled,
.for-input textarea:disabled {
  outline: none;
  background-color: rgba(0,0,0,.1);
}
.for-input span.material-icons {
  padding: 0 .2rem;
  font-size: 1rem;
}
.for-input.full-width,
.for-input.full-width input,
.for-input.full-width textarea { width: calc(100% - 1.5rem); }
.for-input button { align-self: stretch; }
button {
  border: none;
  background: var(--black);
  color: var(--gold);
}
button:hover,
button:focus {
  outline: none;
  background: var(--gold);
  color: var(--black);
}
.for-input.focused {
  background-color: var(--black);
  border: solid 2px var(--gold);
}
.for-input.focused input,
.for-input.focused textarea {
  color: var(--gold);
}
.for-input.focused span.material-icons {
  color: var(--gold);
}
.for-input:not(.focused) {
  border: solid 2px var(--black);
}
button.form-button.black { background-color: var(--black); color: white; }
button.form-button.gold { background-color: var(--gold); color: var(--black); }
button.form-button.gold:not([disabled]):hover { background-color: var(--black); color: var(--gold); }
button.form-button.black:not([disabled]):hover { background-color: var(--gold); color: var(--black); }
button.form-button {
  border: none;
  border-radius: var(--radius);
  padding: .5rem 1rem;
  text-transform: uppercase;
  margin: 0 .3rem;
  cursor: pointer;
  transition: background-color 300ms, color 300ms;
}
button.form-button[disabled] {
  opacity: .6;
  filter: saturate(0.5);
  cursor: default;
}
button.form-button:focus { outline: none; }
input[type="submit"] {
  border: none;
  background-color: var(--black);
  color: var(--gold);
  padding: 0.5rem 1.5rem;
  text-transform: uppercase;
  border-radius: var(--radius);
  margin: auto .5rem;
}
input[type="submit"]:not([disabled]) {
  cursor: pointer;
  transition: background-color 400ms, color 400ms;
}
input[type="submit"][disabled] { opacity: .3; }
input[type="submit"]:not([disabled]):hover,
input[type="submit"]:not([disabled]):active,
input[type="submit"]:not([disabled]):focus { background-color: var(--gold); color: var(--black); }
input[type="submit"].red, a.flat.red, .form-button.red { background-color: var(--red); color: white; }
input[type="submit"].red:not([disabled]):hover { background-color: var(--red-hover); color: white; }

.check-box {
  padding-inline: 1rem;
}
.check-box label {
  font-size: .9rem;
}
.check-box > * {
  display: inline-block;
  vertical-align: middle;
}
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: flex;
  width: 40px;
  height: 20px;
  margin: auto .5rem;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--black);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  bottom: 4px;
  background-color: var(--gold);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider:before { background-color: var(--black); }
input:checked + .slider { background-color: var(--gold); }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

.switch .label { margin-left: 40px; }

/* Rounded sliders */
.slider.round { border-radius: 34px; }
.slider:not(.round) { border-radius: var(--radius); }
.slider.round:before { border-radius: 50%; }
/* ---------------------- STATS -----------------------------*/
.photo .stats > *[hidden],
.album .stats > *[hidden]{
  display: none;
}
.photo .stats,
.album .stats {
  position: absolute;
  top: .2rem;
  left: .2rem;
}
.photo .stats > div,
.album .stats > div {
  background-color: var(--gold);
  border-radius: var(--radius);
  padding: 0.1rem .5rem;
}
.photo .stats span:not(.tooltiptext), .photo .stats span.material-icons,
.album .stats span:not(.tooltiptext), .album .stats span.material-icons {
  font-size: 1rem;
  line-height: 1rem;
  margin: 0;
  padding: 0;
}

/* ------------------ ALBUMS STYLES -------------------------*/
.album-stats span { font-size: 1.1rem; color: var(--black); }

.album-rate { margin: 0 .7rem; position: relative; }
.album-rate div[data-star] .material-icons { font-size: 1.3rem; }
.rate span,
.album-rate div[data-star] {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.rate .yellow span,
.album-rate div[data-star].yellow span {
  color: var(--gold);
}
.rate .white:not(.yellow) span,
.album-rate div[data-star].white:not(.yellow) span {
  color: white;
}
.rate span,
.album-rate div[data-star] span {
  color: var(--black);
  transform-origin: center;
  transition: transform 500ms, color 200ms;
}
.rate div:hover span,
.album-rate div[data-star]:hover span {
  color: var(--gold);
  transform: scale(1.2) rotate(360deg);
}

.album-studios {
  justify-content: flex-end;
  padding: 0.2rem 0.6rem;
  flex-wrap: wrap;
}
/*.album-studios a {*/
  /*background-color: var(--gold);*/
  /*text-decoration: none;*/
  /*color: var(--black);*/
  /*border-radius: var(--radius);*/
  /*margin: .1rem;*/
  /*padding: .2rem .4rem;*/
  /*font-size: .8rem;*/
  /*transition: color 300ms, background-color 300ms;*/
/*}*/
/*.album-studios a:hover {*/
  /*background-color: var(--black);*/
  /*color: var(--gold);*/
/*}*/

/*article.friends {*/
  /*margin: 1rem;*/
  /*display: flex;*/
  /*overflow: auto;*/
/*}*/
/*article.friends .hot-friend {*/
  /*position: relative;*/
  /*display: grid;*/
  /*grid-template-rows: 1fr auto;*/
  /*padding: .2rem;*/
  /*border-radius: var(--radius);*/
/*}*/
/*article.friends .hot-friend:hover {*/
  /*background-color: var(--gold);*/
/*}*/
/*article.friends .hot-friend:hover .name {*/
  /*color: var(--black);*/
  /*background-color: var(--gold);*/
/*}*/
/*article.friends .hot-friend a {*/
  /*text-decoration: none;*/
/*}*/
/*article.friends .hot-friend a img {*/
  /*width: 8rem;*/
  /*overflow: hidden;*/
  /*border-radius: var(--radius);*/
/*}*/
/*article.friends .hot-friend .name {*/
  /*color: white;*/
  /*text-transform: uppercase;*/
  /*font-size: 0.8rem;*/
  /*background-color: var(--black);*/
  /*text-align: center;*/
  /*border-radius: var(--radius);*/
  /*padding: .2rem;*/
/*}*/
/*article.friends .hot-friend,*/
/*article.friends .hot-friend a {*/
  /*transition: background-color 400ms, color 300ms;*/
/*}*/

.galleries-filter {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ------------------ GALLERIES GRID -------------------------*/
.album-view {
  display: grid;
  grid-template-columns: auto 1fr;
}
.album-view .album-info {
  padding: 1rem;
  max-width: 20rem;
  min-width: 15rem;
  margin-top: 1rem;
}
.album-view .album-info .gallery {
  border-radius: var(--radius);
  height: 20rem;
  max-width: 14rem;
  min-width: 13rem;
}
.album-info .stats {
  background-color: var(--black);
  padding: .4rem;
  border-radius: var(--radius);
}
.album-info .stats .gallery { min-width: unset; }
.album-view .album-info .stat {
  margin: .2rem auto;
  padding: .2rem .3rem;
  font-size: 0.8rem;
  color: white;
  transition: background-color 600ms, color 600ms;
}
.album-view .stats .tools a {
  color: white;
}
.album-view .album-info .stat .material-icons {
  font-size: 1rem;
  margin-right: .3rem;
}
.album-view .album-info .stat.progress {
  position: relative;
}
.album-view .album-info .stat.progress .bar {
  position: absolute;
  inset: 0;
  background-color: var(--gold);
  border-radius: var(--radius);
  transform-origin: left center;
}
.album-view .album-info .stat.progress span:not(.tooltiptext) {
  position: relative;
  z-index: 20;
}
.album-view .album-info section {
  margin: auto 1rem
}
.album-info .pussy-names {
  max-width: 14rem;
  margin: 1rem auto;
}
.album-info .pussy-names a {
  display: inline-block;
}
.album-info .pussy-names a:hover {
  background-color: white;
  color: var(--black);
}
.album-view .friends {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: .5rem;
}
.galleries:not(.flex),
.galleries.grid {
  display: grid;
  /*grid-template-columns: repeat(3, 1fr);*/
}
.galleries.flex {
  display: flex;
}
.galleries-filter-studios { margin-top: 4rem; }
.galleries.flex:not(.friends) {
  flex-wrap: wrap;
}
.gallery[hidden] { display: none; }
.gallery {
  position: relative;
  height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: .2rem;
}
.gallery .high-star {
  position: absolute;
  z-index: 100;
  top: 0.5rem;
  right: 0.5rem;
  text-shadow: 0 0 1rem gold;
  font-size: 1rem;
}
.gallery .cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.gallery .cover,
.gallery .cover img {
  width: 100%;
  height: 100%;
}
.gallery .cover img {
  object-fit: cover;
  object-position: center;
}
.gallery .info {
  position: relative;
  z-index: 100;
  padding: 0 .5rem;
  background-color: rgba(0,0,0,0);
  border-radius: var(--radius);
  transition: background-color 300ms 0ms;
  overflow: hidden;
}
.gallery .info:hover {
  background-color: rgba(0,0,0,0.9);
  transition: background-color 300ms 0ms;
}
.gallery .info:hover .footer {
  max-height: 6rem;
  opacity: 1;
  transition: opacity 300ms, max-height 500ms 1000ms;
}
.gallery .name {
  margin: .5rem auto;
  overflow: hidden;
}
.gallery .info:hover .name a {
  color: var(--gold);
}
.gallery .name a:hover {
  color: white;
}
.gallery .parents a {
  padding: .1rem .5rem;
  white-space: nowrap;
}
.gallery .parents a .fav {
  font-size: 0.6rem;
}
.gallery .info {
  transition: background-color 300ms 400ms;
}
.gallery .info .name a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.5rem;
  text-shadow: 1px 1px rgba(0,0,0,.5);
  margin: .1rem;
  line-height: 1.5rem;
  transition: color 300ms;
}
.gallery .footer {
  max-height: 0;
  opacity: 0;
  transition: opacity 300ms, max-height 400ms 0ms;
}
.gallery .footer .options {
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.gallery .footer .parents-stats {
  flex-wrap: wrap;
  justify-content: space-between;
}
.gallery .footer .parents-stats .parents {
  display: flex;
  overflow: auto;
  padding: 0.5rem 0;
}
.photo .stats span,
.gallery .stats span {
  color: white;
  font-size: .9rem;
}
.photo .stats > div,
.gallery .stats > div {
  border-radius: var(--radius);
  padding: 0rem .2rem;
}
.gallery .footer .options {
  margin: .3rem auto;
  min-height: 1.3rem;
}
.gallery .options a {
  color: white;
  font-size: .8rem;
}
.gallery .view-progress {
  position: relative;
  overflow: hidden;
  color: white;
}
.gallery .view-progress .bar {
  position: absolute;
  inset: 0 0 0 0;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background-color: var(--black);
}
.gallery .view-progress > div:not(.bar) {
  position: relative;
  z-index: 100;
}

@media only screen and (max-width: 800px) {
  .album-view { grid-template-columns: auto; }
  .album-view > div:first-child { grid-row: 2; }
  /*.album-view .friends { grid-template-columns: 1fr; }*/
}
/*@media only screen and (max-width: 1600px) {*/
  /*.album-view .friends { grid-template-columns: 1fr; }*/
/*}*/

.photos.grid {
  display: grid;
}
.photos.grid .photo {
  position: relative;
  height: 340px;
}
.photos.grid .photo .info {
  position: absolute;
  bottom: 0;
  background-color: black;
  /*width: calc(100% - 1rem);*/
  width: fit-content;
  margin: .3rem;
  border-radius: var(--radius);
  padding: .4rem 1rem;
  color: white;
  text-align: center;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 500ms 0ms;
}
.photos.grid .photo a {
  display: block;
  width: 100%;
  height: 100%;
}
.photos.grid .photo a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.photos.grid .photo .debug-num {
  position: absolute;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255,255,255,.5);
  padding: 1rem;
  border-radius: var(--radius);
}
.photos.grid .photo:hover .info {
  opacity: .8;
  transition: opacity 200ms 1000ms;
}

/* ------------------ PAGINATOR -------------------------*/
.paginator {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: .2rem;
}
.paginator > * {
  align-self: center;
}
.paginator .prev-page {
  justify-self: end;
}
.paginator .next-page {
  justify-self: start;
}
.paginator input {
  width: 3rem;
  padding-block: .3rem;
  text-align: center;
}
.paginator .page-btn a {
  background-color: var(--black);
  display: block;
  color: white;
  line-height: 100%;
  transform: translateX(0);
  border-radius: var(--radius);
  transition: transform 300ms 0ms, background-color 300ms, color 300ms;
}
.paginator .page-btn a:hover {
  background-color: var(--gold);
  color: var(--black);
  transition: transform 300ms 300ms, background-color 300ms, color 300ms;
}
.paginator .page-btn.prev-page a:hover {
  transform: translateX(-.5rem);
}
.paginator .page-btn.next-page a:hover {
  transform: translateX(.5rem);
}

.sort-button {
  position: relative;
  width: fit-content;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  transition: background-color 300ms, color 300ms;
  cursor: default;
}
.sort-button:hover {
  background-color: var(--black);
  color: var(--gold);
}
.sort-button:hover ul {
  pointer-events: all;
  opacity: 1;
  transform: scaleY(1);
  transition: opacity 300ms 150ms, transform 300ms 150ms;
}
.sort-button .current-sort { white-space: nowrap; }
.sort-button .current-sort span {
  display: inline-block;
  vertical-align: middle;
}
.sort-button ul {
  position: absolute;
  padding: .5rem 1rem;
  background-color: var(--black);
  border-radius: var(--radius);
  top: 1.4rem;
  left: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform-origin: top center;
  transform: scaleY(.5);
  transition: opacity 300ms 0ms, transform 300ms 0ms;
}
.sort-button li {
  list-style: none;
  align-items: center;
}
.sort-button li a {
  color: white;
  text-decoration: none;
}
.sort-button li a:last-child {
  flex-grow: 2;
}
.sort-button li,
.sort-button li a {
  display: flex;
}

/* ------------------ STUDIOS -------------------------*/
.studios-page {
  max-width: 40rem;
}
.studios-page .studio-details {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  margin: .4rem 0;
  column-gap: 1rem;
  padding: 0.3rem;
  border-radius: var(--radius);
  transition: background-color 400ms;
}
.studios-page .studio-details:hover {
  background-color: var(--black);
}
.studios-page .studio-details:hover .count,
.studios-page .studio-details:hover .description {
  color: white;
}
/*.studios-page .studio-details .options {*/
  /*grid-column: 3;*/
  /*justify-self: end;*/
/*}*/

/* ------------------ STUDIOS -------------------------*/
ul.messages {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  margin: 0;
  width: clamp(30rem, 50%, 80%);
  z-index: 1001;
}
.messages > * {
  padding: 1rem 2em;
  list-style: none;
  border-radius: var(--radius);
  margin: 0.3rem auto;
}
.messages:not(.left) > * { text-align: center; }
.messages.left > * { text-align: left; }
.messages .error {
  background-color: #ec3737;
  color: var(--black);
}
.messages .success {
  background-color: seagreen;
  color: white;
}
.messages .warning {
  background-color: orange;
  color: #231702;
}
.messages > * > * {
  display: inline-block;
  vertical-align: middle;
  margin: auto 0.2rem;
}

.album-alert {
  background-color: var(--black);
  padding: 1rem 2rem;
  width: clamp(30rem, 20rem, 15rem);
  margin: auto;
  border-radius: var(--radius);
}
.album-alert article, .album-alert header { text-align: center; }
.album-alert article { margin: 0; }
.album-alert article p, .album-alert footer p {
  color: white;
}
.album-alert footer {
  text-align: right;
}
.album-alert header {
  text-align: center;
  color: var(--gold);
  font-size: 1.3rem;
  text-transform: uppercase;
}
.album-alert footer a {
  color: white;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.album-alert footer a span.material-icons {
  font-size: 1rem;
}