/* Reset CSS */
:root {
  --primary-color: #1266CD;
  --primary-color-hover: #0d4992;
  --primary-color-transparent: rgba(18,102,205, 0.72);
  --secondary-color: #FBD54A;
  --gray: #b9b9b9;
  --darkgray: #dddddd;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,
body {
  /* background: linear-gradient(45deg, #190f2c, #200b30); */
  background: var(--primary-color-hover);
  /* background: #2d0131; */
	padding: 15px;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

.media-logo {
  max-width: max(16vw, 100px);
}

.heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem;
  color: #FFF;
}

.back-btn:hover {
  transition: all 0.5s ease-out;
  /* text-shadow: var(--secondary-color) 1px 0 10px; */
  text-shadow: 3px 0px 7px var(--secondary-color), 
	  -3px 0px 7px var(--secondary-color), 
	  0px 4px 7px var(--secondary-color);
}

.heading h2, .heading p {
  padding: 0.7rem 0;
}

.heading h2 {
  text-align: center;
  font-size: max(3vw, 35px);
}
.heading p {
  font-size: max(1.9vw, 20px);
  text-align: center;
}

/* Hover xMark */
.x-mark:hover {
  width: 100px;
}

/* Main CSS */
.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
  cursor: pointer;
}

.grid-wrapper > div:hover {
  padding: 0.2rem;
  transition: all ease-out 0.2s;
  opacity: 0.5;
}

.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 200px;
	grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 2;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}

/* Image Filtering */
#img-filter-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  margin-top: 1.5rem;
  width: 75%;
}

#img-filter-selector p {
  font-size: max(1.6vw, 15px);
  padding: 0.5rem;
  margin: 0 0.3rem;
  cursor: pointer;
}

/* Filter Styles */
#filter {
  color: #000;
}
.filter {
  transition: opacity 0.3s ease-out, border 0.3s ease-out; /* Add border transition */
  opacity: 0.5; /* Set the default opacity value */
  border: 2px solid transparent;
}
.active-filter {
  opacity: 1;
  border: 2px solid rgb(219, 219, 219);
}

.select select {
  /* Reset Select */
  appearance: none;
  outline: 10px red;
  border: 0;
  box-shadow: none;
  /* Personalize */
  flex: 1;
  padding: 0 1em;
  color: #fff;
  background-color: var(--darkgray);
  background-image: none;
  cursor: pointer;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select wrapper */
.select {
  position: relative;
  display: flex;
  width: 20em;
  height: 3em;
  border-radius: .25em;
  overflow: hidden;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.8em;
  background-color: #d6b744;
  transition: .25s all ease;
  pointer-events: none;
}
/* Transition */
.select:hover::after {
  color: var(--primary-color);
}

/* Other styles*/
body {
  color: #fff;
  background: var(--background-gradient);
}

.select a {
  font-weight: bold;
  color: var(--gray);
  text-decoration: drop-shadow;
  padding: .25em;
  border-radius: .50em;
  background: pink;
}

.down_note {
    display: flex;
    justify-content: center;

}


/* Keyframes/Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Media Queries */
@media screen and (max-width: 720px) {
  .expandedImg {
    width: 85%;
  }
}

/* Make grid items all in one column */
@media screen and (max-width: 500px) {
  .grid-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .heading {
    padding: 4rem 0 1rem 0;
    align-items: flex-start;
  }

  /* .heading h2 {
    padding: 0 0 0 8px
  } */

  #img-filter-selector {
    justify-content: flex-start;
    margin-top: 0.2rem;
    width: unset;
  }

  @media screen and (max-width: 720px) {
    .expandedImg {
      width: 92%;
    }
  }
}