html, body {
    max-width: 100%;
    background-color: var(--dark-red);
    background-color: #f5f5f6;
}

* {
  font-synthesis: none !important;
}

:root {
  --black: rgb(29, 28, 31);
  --black-09: rgb(29, 28, 31, 0.9);
  --black-08: rgb(29, 28, 31, 0.8);
  --black-07: rgb(29, 28, 31, 0.7);
  --black-06: rgb(29, 28, 31, 0.6);
  --black-05: rgb(29, 28, 31, 0.5);
  --black-04: rgb(29, 28, 31, 0.4);
  --black-03: rgb(29, 28, 31, 0.3);
  --black-02: rgb(29, 28, 31, 0.2);
  --black-01: rgb(29, 28, 31, 0.1);
  --black-005: rgb(29, 28, 31, 0.05);
  /* --red: #D82D16; */
  --red: #dd2d4a;
}

@font-face {
    font-family: 'Satoshi';
    src: url(../fonts/Satoshi-Variable.woff2) format('woff2'),
         url(../fonts/Satoshi-Variable.woff) format('woff');
    font-style: normal;

}

body {
  padding: 0;
  margin: 0;
  font-family: 'Satoshi', sans-serif;
  color: var(--black);
  font-weight: 450;
}

h1, h2, h3, h4 {
  font-weight: 550;
  margin: 0;
  text-wrap: pretty;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 1.15rem;
  text-transform: uppercase;
}

img {
  width: 100%;
  display: block;
}

a {
  text-decoration: none;
}

p {
  margin: 0;
}

.main-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  width: 95%;
}

.asset-headers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.asset-headers a {
    margin-left: auto;
    color: var(--black);
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 5rem;
    display: flex;
    align-items: baseline;
    place-content: end;
    flex-wrap: wrap;
    text-transform: uppercase;
}

.asset-headers a:hover {
  text-decoration: none;
}

.asset-headers a i {
  color: var(--red);
  margin-left: 0.25rem;
  transition: all 0.2s ease;
  rotate: -45deg;
}

.asset-headers a:hover i {
  rotate: -90deg;
}

.shadow {
  box-shadow: 0 2px 2px rgba(154, 160, 185, .05), 0 5px 20px rgba(166, 173, 201, .2);
}

.nice-spacer {
  width: 100%;
  height: 1px;
  background-color: var(--black-02);
  margin: 2rem 0;
}

.cta2 {
    color: var(--red);
    font-size: 0.9rem;
    font-weight: 550;
    border: solid 2px var(--red);
    border-radius: 0.25rem;
    padding: 0.25rem 0.35rem;
    display: block;
    width: fit-content;
    transition: all 0.2s ease;
}

.cta2:hover {
    background-color: var(--red);
    color: white;
}

.via-developer {
    display: flex;
    column-gap: 0.35rem;
    align-items: center;
    text-transform: none;
    margin-bottom: 0.5rem;
    color: var(--black-05);
    font-weight: 700;
    font-size: 0.7rem;
}

.via-developer img {
    max-width: 1.4rem;
}

.youtube {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* BREADCRUMBS */

.breadcrumbs {
  display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--red);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 550;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs i {
  font-size: 0.65rem;
  color: var(--black-05);
}

.breadcrumbs .fa-house {
  color: var(--black);
}

/* TEXT STYLES  */

.small-grey {
    color: var(--black-05);
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
}

/* TOP NAV */

nav {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 15rem;
}

nav svg {
  width: 12rem;
}

nav a:has(svg) {
  display: block;
  width: fit-content;
  padding: 0.5rem 0 0 0;
}

.top-search {
    margin-left: auto;
    height: 100%;
    width: 100%;
    display: grid;
    align-items: center;
}

/* SCREENSHOTS MODAL */

.screenshot-modal {
	position: fixed;
	inset: 0;
	background: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 201;
  overflow: hidden;
}

.modal-stage {
	position: relative;
	width: 100%;
	height: 110%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.modal-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(15px);
    -webkit-filter: blur(15px);
    opacity: 0.95;
    overflow: hidden;
}

.ss-controls {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 10;
}

.ss-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

.ss-close button {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--black-08);
  color: white;
  display: grid;
  place-content: center;
  border: solid 1px rgba(255,255,255,0.5);
  font-size: 0.5rem;
  color: rgba(255,255,255,0.8);
  transition: all 0.2s ease;
  cursor: pointer;
}

.ss-close button:hover {
  background-color: var(--black);
  color: white;
}

.modal-img {
	position: relative;
	max-height: 75vh;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: 2;
  border-radius: 0.4rem;
}

.modal-img.is-loaded {
	opacity: 1;
}

.modal-counter {
	color: #fff;
	font-size: 14px;
	background-color: var(--red);
	padding: 0.5rem;
	border-radius: 0.25rem;

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

.counter-div {
  width: fit-content;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
  font-weight: 550;
  display: flex;
	align-items: stretch;
  height: 2rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.counter-div button {
	height: 100%;
	background-color: var(--red);
	color: white;
	border: 0;
	cursor: pointer;
	border-radius: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
  width: 2rem;
  height: 2rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ss-image-container {
  position: relative;
  z-index: 4;
  max-width: 120vh;
  padding: 0 1rem;
}

.image-meta {
  display: flex;
  align-items: center;
  margin-top: 0.25rem;
  color: white;
}

.ss-image-container h2 {
  color: white;
  margin-bottom: 0.25rem;
}

.ss-image-container-smol {
  width: 12rem;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.4rem;
}

.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid #FFF;
  border-right: 3px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

.image-meta-info {
  font-size: 0.9rem;
  font-weight: 400;
}

.meta-label {
  font-weight: 600;
}

/* MEDIA QUERIES */

@media only screen and (max-width: 768px) { 
  h2 {
    font-size: 1.1rem;
  }

  .small-grey {
    font-size: 0.6rem;
  }

  .asset-headers {
    align-items: end;
  }

  .cta2 {
    font-size: 0.8rem;
  }
}



@media only screen and (max-width: 520px) { 
  
  .main-wrapper:has(.top-logo) {
    width: 100%;
    max-width: 100%;
  }

  nav {
    grid-template-columns: 1fr;
  }

  nav a:has(svg) {
    display: block;
    width: 100%;
    padding: 1rem 0;
    background-color: var(--red);
    display: grid;
    place-content: center;
  }

  nav svg {
    width: 40vw;
  }

  nav svg path {
    fill: white;
  }

  .top-search {
    background-color: var(--black-005);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    height: auto;
    width: calc(100% - 2rem);
  }

  .asl_w_container {
    width: calc(100% - 2rem) !important;
  }
  
  .image-meta {
    display: grid;
    margin-top: 0.5rem;
  }

  .ss-image-container h2 {
    margin-bottom: 0.5rem;
  }

  .modal-stage, .modal-bg {
    height: 150vh;
  }
}