/* Base styles */
html {
  height: 100vh;

  overflow: hidden;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
  margin: 0 auto;
}

.force-scroll {
  max-width: 1200px;
  height: 80vh;
  margin: 0 auto;
  padding: 1rem;
  overflow: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.force-scroll::-webkit-scrollbar {
    display: none;
}

.grid__col-sizer,
.photo-item {
  width: 32%;
}

.grid__gutter-sizer {
  width: 2%;
}

.photo-item {
  margin-bottom: 20px;
  /*float: left;*/
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

.photo-item__image {
  display: block;
  /*max-width: 100%;*/
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}

.photo-item__image:hover {
  transform: scale(1.15);
}

.page-load-status {
  display: none;
  padding-top: 20px;
  border-top: 1px solid #ddd;
  text-align: center;
  color: #777;
  margin: 20px auto;
}

.page-load-status p {
  font-size: 14px;
  color: #999;
}

/* Styles for loading spinner */
.loader {
  display: block;
  margin: 20px auto;
  text-align: center;
  font-size: 10px;
}

.loader-ellips {
  display: inline-block;
  position: relative;
  width: 96px;
  height: 36px;
}

.loader-ellips__dot {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #333;
  animation: loader-ellips__dot 0.6s infinite;
}

.loader-ellips__dot:nth-of-type(1) {
  animation-delay: 0.1s;
  left: 8px;
}

.loader-ellips__dot:nth-of-type(2) {
  animation-delay: 0.2s;
  left: 32px;
}

.loader-ellips__dot:nth-of-type(3) {
  animation-delay: 0.3s;
  left: 56px;
}

@keyframes loader-ellips__dot {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

/* Styles for "End of content" and "No more pages to load" messages */
.infinite-scroll-request .page-load-status,
.infinite-scroll-last .page-load-status,
.infinite-scroll-error .page-load-status {
  display: block;
}

/* Responsive styles */

/* For screens smaller than 768px (mobile devices) */
@media (max-width: 767px) {
  .grid__col-sizer,
  .photo-item {
    width: 100%;
  }

  .grid__gutter-sizer {
    width: 0;
  }

  .force-scroll {
    padding:2rem;
  }
}

/* For screens between 768px and 991px (tablets) */
@media (min-width: 768px) and (max-width: 991px) {
  .grid__col-sizer,
  .photo-item {
    width: 48%;
  }

  .grid__gutter-sizer {
    width: 4%;
  }
}

/* For screens larger than 991px (desktops) */
@media (min-width: 992px) {
  .grid__col-sizer,
  .photo-item {
    width: 32%;
  }

  .grid__gutter-sizer {
    width: 2%;
  }
}



* {
  padding: 0;
  box-sizing: border-box;
}


/*navigation*/

.nav {
  width: 100vw;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 5rem;
  list-style-type: none;
}
.nav li.logo {
  margin-right: auto;
  font-family: "Eczar", sans-serif;
  font-size: 3rem;
  color: #8a93b0;
  text-align: center;
  font-weight: 500;
/*  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 2px 2px 4px white;*/
}

body, html {
  background-color: #272727;
}

.segment {
  padding: 32px 0;
  text-align: center;
}

button {
  border: 0;
  outline: 0;
/*  font-size: 16px;*/
  border-radius: 320px;
/*  padding: 16px;*/
  background-color: #272727;
  text-shadow: 1px 1px 0 #212121;
}

button {
  color: #8a93b0;
  font-weight: bold;
  box-shadow: -7px -7px 28px #212121, 7px 7px 28px #141414;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  font-weight: 600;
}
button:hover {
  box-shadow: -2px -2px 5px #212121, 2px 2px 5px #141414;
}
button:active {
  box-shadow: inset 2px 2px 4px #141414, inset -2px -2px 4px #212121;
}
button .icon {
  margin-right: 8px;
}
button.unit {
  border-radius: 8px;
  line-height: 0;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 1.5rem;
  font-size: 2rem;
}
button.unit .icon {
  color: #5372fe;
  margin-right: 0;
}
button.red {
  display: block;
  width: 100%;
  color: #feeeee;
}


@media screen and (max-width: 768px) {
.nav {
  padding: 0 1rem;
}
.nav li.logo {

  font-size: 1.5rem;
  margin-left: 0.5rem;
}
button.unit {
  margin: 0 0.2rem;
  font-size: 2rem;
}
  
}