:root {
  --primary-color-1: #f8f8ff;
  --primary-color-2: rgb(48, 56, 65);
  --secondary-color-1: #202025;
  --secondary-color-2: #2c2c30;
  --secondary-color-div: #636366;
}

* {
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0px;
  order: 1px solid;
}

@font-face {
  font-family: "Inter";
  src: url("https://ichiniche.com/fonts/Inter/Inter-VariableFont_slnt,wght.ttf");
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
  background-image: repeating-linear-gradient(
    90deg,
    var(--primary-color-1) 0%,
    rgb(223, 223, 229, 0.8) 90%,
    var(--primary-color-1) 100%
  );
  border-color: red;
  width: 100%;
  height: 100%;
  letter-spacing: 0.03rem;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.screen-width {
  max-width: 117rem;
  margin: 0 auto;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.center {
  text-align: center;
}

.centerContent {
  margin: 0 auto;
}

h3 {
  font-size: 2.5rem;
  padding-bottom: 1rem;
}

h4 {
  font-size: 1.8rem;
}

.small-font {
  font-size: 1.1rem;
}

.sub-header {
  font-size: 1.8rem;
  text-align: left;
}

.space {
  padding: 1rem;
}

.borderClass {
  border-color: #c1c6cc;
  border-style: solid;
  border-width: 0 0 0.1rem;
}

.fade {
  animation: fade 0.5s ease;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opactiy: 1;
  }
}

.henshin {
  animation: fade 2s ease;
}

@keyframes henshin {
  from {
    opacity: 0;
  }
  to {
    opactiy: 1;
  }
}

.slideUp {
  animation: slideUp 0.5s;
}

@keyframes slideUp {
  from {
    transform: translateY(20%);
  }
  to {
    transform: translateY(0%);
  }
}

/* NAV AND HEADER */

/* Class that sets navigation bar permanently at the top of page over all content*/
.nav {
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
  border-color: #adadb2;
  background-color: var(--primary-color-1);
  box-shadow: 0 0 0.5rem 0 #000;
  z-index: 999;
}

#dropdown-menu {
  display: none;
}

#navbar {
  display: flex;
  flex-direction: row;
  width: 100%;
}

/* styles logo for navigation bar */
#logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  padding: 1.2rem;
}

#logo-container:hover {
  background-color: #181d22;
}

#logo-container:hover img {
  -webkit-filter: invert(1);
  filter: invert(1);
}

nav {
  border-color: blue;
  width: 100%;
  display: flex;
}

#navbar > ul {
  border-color: green;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  list-style: none;
  text-decoration: none;
  width: 100%;
  font-size: 1.8rem;
}

#navbar > ul > li {
  border-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

#navbar > ul > li:hover {
  background-color: #181d22;
  cursor: pointer;
}

#navbar > ul > li > a {
  text-decoration: none;
  padding: 2rem 1rem;
  display: block;
  border-color: orange;
  color: #181d22;
  width: 100%;
  font-weight: bold;
}

#navbar > ul > li > a:hover {
  background-color: #181d22;
  color: #fff;
}

.navFade {
  animation: navFade 0.3s;
}

@keyframes navFade {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

/* SEARCH BAR */

.search-bar {
  margin: 0 auto;
  width: 100%;
  background-color: #181d22;
  display: flex;
  justify-content: center;
  padding: 0.4rem;
  padding-bottom: 1rem;
  display: none;
}

.search-bar input {
  all: unset;
  padding: 0.7rem;
  font-size: 1.6rem;
  border-bottom: 0.1rem #b2b2b2 solid;
  color: #fff;
  width: 70vw;
}

.search-bar button {
  padding: 0.5rem;
  border-radius: 0;
  margin-left: 1rem;
}

::placeholder {
  color: #fff;
  opacity: 0.7;
}

/* LOADING SCREEN */

.loading-screen {
  position: absolute;
  width: 100%;
  height: 300%;
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}

/* .show-loading-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
} */

.loading-logo-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-logo-container img {
  width: 15%;
}

.load-1,
.load-2,
.load-3,
.load-4,
.load-5,
.load-6,
.load-7,
.load-8 {
  width: 100%;
  height: 15%;
  background-color: #fff;
}

.show-load-1,
.show-load-2,
.show-load-3,
.show-load-4 {
  width: 25%;
  height: 100%;
  background-color: #fff;
}

.grow {
  animation: grow ease 10s;
}

@keyframes grow {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(2);
  }
}

.rightSlide {
  animation: rightSlide 1.2s ease;
}

@keyframes rightSlide {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

.leftSlide {
  animation: leftSlide 1.2s ease;
}

@keyframes leftSlide {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

.upSlide {
  animation: upSlide 1.2s ease;
}

@keyframes upSlide {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(100%);
  }
}

.downSlide {
  animation: downSlide 1.2s ease;
}

@keyframes downSlide {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

/* SCREEN READER AND ACCESSIBILITY STYLING */

.sr-only {
  /* Contain text within 1px box */
  height: 1px;
  overflow: hidden;
  width: 1px; /* Keep the layout */
  position: absolute; /* Remove any visible trace (e.g. background color) */
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(
    50%
  ); /* browsers in the future */ /* Prevent the screen reader to skip spaces between words */
  white-space: nowrap;
}

/* HOME PAGE CSS */

/*Add space between navigation bar and content*/
.mainHome {
  border-color: pink;
  position: relative;
  margin-top: 6rem;
  margin-bottom: 3rem;
  flex: 1 0 auto;
}

/*Container for page content on HD TVs/Computers*/
.pageContainer {
  max-width: 117rem;
  margin: 0 auto;
  background-color: white;
  border: 0.05rem solid #c1c6cc;
  margin-top: 5rem;
}

/* FIRST SLIDE */

/* Section ID for first slider */
#top-slide {
  display: block;
  border-color: orange;
  position: relative;
  padding: 2rem 2rem 1rem 2rem;
}

.slider-tile {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  display: flex;
  flex-direction: row;
  padding: 1rem;
  border-radius: 0.5rem;
}

/* Containing div for slides, makes sure no content spills outside of div */
.slideshow-container {
  overflow: hidden;
  position: relative;
  margin: auto;
  border-color: red;
}

.slideshow-container p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

/* Slides are hidden by default, script applies display of block for the current active slide */
.mySlides {
  display: none;
}

/*styles content within the slide*/
.slideContent {
  display: flex;
  border-color: pink;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  max-height: 31.5rem;
  height: 31.5rem;
}

/* Adds link to each slides page */
.slider-link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

/* styles text on slide */
.description-slider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.2rem 6.4rem 3.2rem 6.4rem;
}

div[class="description-slider"] > h2 {
  font-size: 3.2rem;
  color: white;
}

div[class="description-slider"] > p {
  font-size: 1.6rem;
  color: white;
}

.homepage-poster {
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.2rem;
  width: 20rem;
  margin-right: 7rem;
  margin-bottom: 1.5rem;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 1.6rem;
  color: white;
  font-weight: bold;
  font-size: 1.5rem !important;
  transition: 0.2s ease;
  border-radius: 0 0.3rem 0.3rem 0;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-user-select: none;
  user-select: none;
  z-index: 2;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 0.3rem 0 0 0.3rem;
}

/* On hover, add a white background color and change direction symbol color black */
.prev:hover,
.next:hover {
  background-color: var(--primary-color-1);
  color: black;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 1rem;
  width: 1rem;
  margin: 0 0.2rem;
  background-color: var(--primary-color-1);
  border-radius: 20%;
  position: relative;
  margin-top: 1rem;
  display: inline-block;
  vertical-alignment: center;
  transition: background-color 0.6s ease;
}

.dot.active,
.dot:hover {
  background-color: #717171;
}

.dot-positioner {
  position: absolute;
  top: 4rem;
  margin-left: 2.5rem;
  z-index: 2;
}

/* GENEREAL-TILES SECTION */

/* section ID */
#general-tiles {
  padding: 1rem 2rem 1rem 2rem;
}

/* divides tiles into 2 columns */
.div-divider {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.homepage-left-column {
  width: 48.5%;
}

.homepage-right-column {
  width: 48.5%;
}

/* styling for outside border of tiles */
.homepage-project-tile {
  background-color: var(--primary-color-1);
  border: 0.5px solid #c1c6cc;
  border-radius: 5px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.thumbnail-container {
  position: relative;
  border: 0.5px solid #c1c6cc;
}

/* sets the background image for the tile */
.frontImage {
  background: url(Images/Thumbnails/Background-Tile.jpg);
}

/* keeps contents of the hiddenImage within the div box */
.hiddenImage .render {
  position: relative;
  overflow: hidden;
}

/* scales image to div box and also stops weird scaling issue where image goes 2.5px above the div box */
.thumbnail-container img {
  width: 100%;
  margin-bottom: -0.25rem;
}

/* hides transition render/image and places it correcly within div*/
.thumbnail-container .hiddenImage {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

/* changes display of hidden render on hover and changes scaling */
.thumbnail-container:hover .hiddenImage {
  display: block;
}

/* When hovering over tile, sets opacity of the front image to 0 to make it disappear*/
.thumbnail-container:hover div[class="frontImage"] > img {
  opacity: 0;
}

/* BOTTOM-SLIDE SECTION */
#bottom-slide {
  padding: 1rem 2rem 2rem 2rem;
}

.lg-front-image {
  background: url(Images/Thumbnails/Coming-Soon-Slider.jpg);
}

.thumbnail-container:hover div[class="lg-front-image"] > img {
  opacity: 0;
}

.slideRight {
  animation: slideRight 0.5s;
}

@keyframes slideRight {
  from {
    transform: translateX(10%);
  }
  to {
    transform: translateX(0%);
  }
}

/* SHOWMOVIE PAGE CSS */

.mainShowMovie {
  position: relative;
  margin-top: 9rem;
  flex: 1 0 auto;
}

td > a {
  text-decoration: none;
  padding: 0;
}

/* TOP SHOW/MOVIE PAGE SECTION */
#main-section {
  display: block;
  position: relative;
}

.alias {
  margin-top: 1rem;
  font-size: 2rem;
  font-weight: bold;
  font-style: italic;
}

.main-info, .game-main-info {
  display: flex;
  flex-direction: row;
}

div[class="poster"] > img {
  border: 0.5rem solid var(--primary-color-1);
  border-radius: 0.2rem;
  width: 40rem;
  margin: 2rem;
  box-shadow: 0 0 1.8rem 0 #888888;
}

.description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

div[class="description"] > h1 {
  font-size: 5rem;
  padding-bottom: 0.6rem;
  line-height: 95%;
}

div[class="description"] > h2:last-of-type {
  margin-bottom: 1.5rem;
}

div[class="description"] > p:not(.alias) {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

/* TRAILER SECTION */
#trailer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem;
}

.trailer-iframe {
  border: 0.5rem solid var(--primary-color-1);
  border-radius: 0.2rem;
  box-shadow: 0 0 1rem 0 #000;
  aspect-ratio: 16 / 9;
  height: 100%;
  width: 100%;
}

/* GENERAL INFORMATION SECTION */
#general-information {
  padding: 2rem;
}

.show-movie-div-divider {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding-bottom: 4rem;
}

.show-movie-left-column {
  width: 46%;
}

.show-movie-right-column {
  width: 46%;
}

.show-movie-left-column h2,
.show-movie-right-column h2 {
  font-size: 2.5rem;
  padding-bottom: 1rem;
}

.show-movie-project-tile {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.info-tile {
  display: table;
  width: 100%;
  border-spacing: 1.3rem;
}

.info-tile-label {
  padding-right: 3rem; 
}

.info-tile-data {
  text-align: right;
}

.show-movie-project-tile .borderClass {
  padding: 0.1rem;
}

/* SHOWMOVIE SEASON TILE */
.season-logo {
  width: 25rem;
  margin: 0 auto;
}

.season-header {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.season-facts-table {
  margin: 0 auto;
  border-spacing: 1rem 0.3rem;
  padding-bottom: 1rem;
}

#seasons-tile .show-movie-project-tile {
  margin-top: 1.5rem;
}

#show-movie-season-header {
  margin-bottom: -1.5rem;
}

/* SHOWMOVIE CAST TILE */
.cast-flex {
  border-color: green;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem;
}

.cast-image img {
  border: 0.35rem solid var(--primary-color-1);
  border-radius: 0.2rem;
  width: 10rem;
  box-shadow: 0 0 0.4rem 0 #888888;
}

.white-block {
  background-color: #fff;
  width: 100%;
  height: 100%;
}

/* keeps contents of the hiddenImage within the div box */
.hidden-cast-image .render {
  position: relative;
  overflow: hidden;
}

/* hides transition render/image and places it correcly within div*/
.cast-flex .hidden-cast-image,
.cast-flex .white-block {
  position: absolute;
  display: none;
}

/* changes display of hidden render on hover and changes scaling */
.cast-flex:hover .hidden-cast-image,
.cast-flex:hover .white-block {
  display: block;
}

.info-tile-cast {
  border-spacing: 1rem 0.4rem;
  width: 100%;
}

.cast-name {
  font-size: 2.25rem;
}

/* Get Rid of info-tile-data from each profile div */
#cast-tile td:not(.cast-name) {
  text-align: left;
  font-size: 1.5rem;
}

.voice-cast-header {
  font-size: 1.6rem;
  border-color: var(--primary-color-2);
  border-style: solid;
  border-width: 0 0 0.1rem;
  padding: 1rem 0.1rem 0.1rem 0.1rem;
}

/*NFO TILE*/
#nfo-downloads-section {
  display: none; /*Change to block in JS*/
}

.nfo-tv-movie-download-tile,
.nfo-episode-download-tile {
  padding: 1rem;
  display: none; /*Change to flex in JS*/
}

.nfo-tile {
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
  background-color: var(--primary-color-1);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0 auto;
}

.nfo-tile:hover {
  background-color: #181d22;
  color: #fff;
}

/* EPISODE PAGE CSS */

.mainEpisode {
  border-color: pink;
  position: relative;
  margin-top: 6rem;
  flex: 1 0 auto;
}

/* SEASON SECTION */
#season-header {
  display: block;
  border-color: orange;
  position: relative;
  padding: 2rem 2rem 1rem 2rem;
}

.season-header-tile {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: row;
  padding: 1rem;
}

.season-poster {
  border: 0.5rem solid var(--primary-color-1);
  border-radius: 0.2rem;
  width: 20rem;
  margin: 2rem;
  box-shadow: 0 0 1.8rem 0 #888888;
}

.season-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  width: 100%;
}

.season-description h1 {
  font-size: 4rem;
  padding-bottom: 0.6rem;
  margin-left: 0.9rem;
}

.airing-date-styling {
  margin-left: 0.9rem;
}

.season-navigation-box {
  display: flex;
  gap: 1rem;
}

.season-navigation-links {
  margin-top: 0.4rem;
  padding: 1rem;
  border-radius: 0.4rem;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
  color: #000;
}

.season-navigation-links:hover {
  background-color: #181d22;
  color: #fff;
}

/* EPISODE SECTION*/
#episodes {
  padding: 0rem 2rem 2rem 2rem;
}

.episode-tile {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.episode-info-tile {
  padding: 0.5rem 1.3rem;
}

.episode-id,
.episode-title {
  text-align: left;
}

.episode-date {
  width: 13rem;
}

.episode-runtime {
  width: 8rem;
}

.episode-date,
.episode-runtime {
  font-size: 1.2rem;
  font-weight: normal;
}

.borderClass {
  border-color: #e5e5e5;
  border-style: solid;
  border-width: 0 0 0.1rem;
}

.episode-synopsis {
  padding: 1rem 1.3rem;
}

/* PODCAST PAGE CSS */

.mainPodcast {
  border-color: pink;
  position: relative;
  margin-top: 6rem;
  flex: 1 0 auto;
}

/* FEATURE PODCAST SECTION */
#latest-video {
  display: block;
  position: relative;
  padding: 2rem 2rem 1rem 2rem;
}

.podcast-header-tile {
  background-color: var(--primary-color-1);
  border: 0.005rem solid #c1c6cc;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: row;
  padding: 1rem;
}

.podcast-iframe {
  border: 0.3rem solid var(--primary-color-1);
  border-radius: 0.2rem;
  box-shadow: 0 0 0.5rem 0 #888888;
  margin: 1.5rem;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
}

.podcast-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  width: 100%;
}

.podcast-description h1 {
  font-size: 4rem;
}

.podcast-description h2 {
  font-size: 3rem;
  padding-bottom: 3rem;
}

.podcast-description h4 {
  font-size: 1.8rem;
}

/* ARCHIVE PODCAST SECTION */
#podcast-episodes {
  padding: 0 2rem 2rem 2rem;
}

.podcast-episode-tile {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.archive-tile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* UPDATED PODCAST CSS 11/16/2023 */

.podcast-archive-content summary {
  font-size: 2rem;
  font-weight: bold;
  padding: 1.5rem 1rem;
  list-style: none;
}

.podcast-archive-content summary:hover {
  background-color: #181d22;
  color: #fff;
  cursor: pointer;
}

.podcast-archive-content summary ~ * {
  animation: sweep 0.5s ease-in-out;
}

@keyframes sweep {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.podcast-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* CONTACT PAGE CSS */

#contact-form {
  padding: 2rem 2rem 1rem 2rem;
}

#contact-form-shadow {
  box-shadow: 0 0 0.2rem 0 #888888;
}

.contact-pageContainer {
  background-color: #fff;
  margin: 0 auto;
  padding: 5rem 7rem;
}

.contact-form-header {
  background-color: #181d22;
  padding: 1.5rem 7rem;
}

.contact-form-header h1 {
  color: #fff;
  font-size: 3rem;
  padding: 0;
}

.contact-form-header p {
  font-size: 1.6rem;
  color: #fff;
  padding: 0;
}

.contact-container p {
  font-size: 1.4rem;
  font-weight: bold;
}

.contact-container label {
  font-size: 1.4rem;
  font-weight: bold;
}

.contact-box-sizing {
  margin-top: 0.5rem;
  padding: 0.7rem;
  width: 100%;
  box-sizing: border-box;
}

.contact-box-styling {
  border-radius: none;
  background-color: #fff;
  border: none;
  border-bottom: 0.05rem solid #181d22;
}

.contact-send-styling {
  border: none;
  background-color: #181d22;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  cursor: pointer;
}

.contactTextArea {
  margin-top: 0.5rem;
  width: 100%;
  padding: 0.7rem;
  box-sizing: border-box;
  border: 0.05rem solid #181d22;
  height: 130px;
}

/* THANK YOU PAGE */

#thankyou-page {
  padding: 2rem 2rem 1rem 2rem;
}

#thankyou-page h1 {
  font-size: 3rem;
  padding-bottom: 1rem;
  margin: 0 auto;
  text-align: center;
}

#thankyou-page p {
  font-size: 1.8rem;
  margin: 0 auto;
  text-align: center;
  padding: 1rem;
}

#thankyou-homepage-link {
  padding: 1rem;
  border-radius: 0.4rem;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
  color: #000;
}

#thankyou-homepage-link:hover {
  background-color: #181d22;
  color: #fff;
}

#thankyou-page img {
  margin: 0 auto;
}

.thankyou-pageContainer {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  margin: 0 auto;
  padding: 2rem;
}

.thankyou-gif-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.thankyou-gif-styling {
  background-color: #fff;
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  padding: 0.5rem;
  width: 48rem;
  height: 25.8rem;
  object-fit: cover;
  box-shadow: 0 0 0.5rem 0 #888888;
}

.thankyou-link-container {
  display: flex;
  justify-content: center;
}

/* GENRE PAGE CSS */

#genre-page,
#game-page {
  padding: 2rem 2rem 1rem 2rem;
}

.mainGenre {
  border-color: pink;
  position: relative;
  margin-top: 9rem;
  flex: 1 0 auto;
}

.genre-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.genre-tiles {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  width: 28%;
  padding: 1rem;
  margin-bottom: 2.6rem;
}

.genre-tiles:hover {
  transform: scale(1.13);
  transition: ease 0.5s;
}

.genre-tiles h1 {
  text-align: center;
}

.genre-tiles img {
  width: 100%;
  margin: 0 auto;
}

/* ABOUT PAGE CSS */

#about-page {
  padding: 2rem 2rem 1rem 2rem;
}

#about-page h1 {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

#about-page p {
  font-size: 1.6rem;
}

.about-logo {
  width: 100%;
  display: flex;
  justify-content: center;
}

.about-logo img {
  position: relative;
  width: 25rem;
  margin-bottom: 2rem;
}

.about-container {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  padding: 2.5rem;
}

.about-nwe-logo {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.about-nwe-logo img {
  padding-top: 1.5rem;
  width: 5rem;
}

/* SEARCH PAGE CSS */

.main-query-contact-thankyou {
  border-color: pink;
  position: relative;
  margin-top: 9rem;
  flex: 1 0 auto;
}

.query-h1 {
  font-size: 3rem;
  padding-bottom: 1rem;
}

#query-results {
  padding: 2rem 2rem 1rem 2rem;
}

.search-result-container {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: row;
  margin-bottom: 2rem;
}

.no-search-result-container {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 50rem;
}

.no-search-result-container p {
  font-size: 1.6rem;
  margin: 0 auto;
  font-weight: bold;
  padding-top: 1rem;
}

.no-search-result-container img {
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  width: 100%;
}

.search-figcaption {
  text-align: center;
}

.search-result-container img {
  width: 25rem;
  margin: 1.5rem;
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
}

.search-description {
  padding: 2rem;
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.search-description a {
  text-decoration: none;
  color: #181d22;
}

.search-description a:hover {
  text-decoration: underline;
}

.search-description p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.search-review-result-container {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: row;
  margin-bottom: 2rem;
}

.search-review-result-container img {
  width: 32rem;
  margin: 1.5rem;
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
}

.search-review-description {
  padding: 2rem 2rem 2rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.search-review-description a {
  text-decoration: none;
  color: #181d22;
}

.search-review-description a:hover {
  text-decoration: underline;
}

.search-review-description h2 {
  font-size: 2.5rem;
  margin-bottom: -0.3rem;
}

.search-review-description p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font-size: 1.5rem;
}

.search-review-description h3 {
  font-size: 1.8rem;
  font-weight: normal;
  font-style: italic;
  margin-bottom: -0.8rem;
}

.search-review-date {
  font-size: 1.2rem;
}

.search-review-description > .borderClass {
  margin-bottom: 2.2rem;
  margin-top: 0.3rem;
}

/* BLOG & REVIEW PAGE CSS */

.main-review {
  position: relative;
  margin-top: 9rem;
  flex: 1 0 auto;
}

#review-page {
  padding: 2rem 2rem 1rem 2rem;
}

#review-page h1 {
  font-size: 4rem;
}

#review-page h2 {
  font-size: 2rem;
  font-style: italic;
  font-weight: normal;
  /* margin-bottom: 1.5rem; */
}

.review-header-container {
  width: 100%;
  margin: 0 auto;
}

.review-content-container {
  width: 100%;
  margin: 0 auto;
}

.review-content-container p {
  font-size: 1.8rem;
  padding: 1rem;
}

.review-img-container {
  display: flex;
  justify-content: center;
}

.review-links {
  padding: 1rem;
  border-radius: 0.4rem;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
  color: #000;
}

.review-links:hover {
  background-color: #181d22;
  color: #fff;
}

.reviewContainer {
  background-color: #fff;
  border: 0.05rem solid #c1c6cc;
  /* border-radius: 0.5rem; */
  margin: 0 auto;
  padding: 2rem;
}

.review-img-styling {
  /* background-color: #fff; */
  border: 0.02rem solid #c1c6cc;
  /* border-radius: 0.5rem; */
  /* padding: 0.5rem; */
  width: 100%;
  /* box-shadow: 0 0 0.2rem 0 #888888; */
}

.review-links-container {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.review-credits-container,
.review-credits-game {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  padding-top: 1rem;
}

.review-credits-game {
  padding-top: 0;
  margin-bottom: 0;
}

.review-credits-text {
  font-size: 1.2rem;
}

.review-nwe-logo img {
  width: 5rem;
}

.blog-img-float-left {
  float: left;
  width: 180px;
  border: 0.02rem solid #c1c6cc;
  margin: 0.4rem 1.1rem 0 0;
}

.blog-img-float-right {
  float: right;
  width: 180px;
  border: 0.02rem solid #c1c6cc;
  margin: 0.4rem 0 0 1.1rem;
}

/* BLOG UPDATE OCT 17 2023 */

.mainBlog {
  border-color: pink;
  position: relative;
  margin-top: 6rem;
  flex: 1 0 auto;
}

#blog-container {
  padding: 2rem 2rem 1rem 2rem;
}

.blog-container h1 {
  font-size: 4rem;
}

.blog-latest-tile {
  background-color: var(--primary-color-1);
  border: 0.005rem solid #c1c6cc;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}

.blog-latest-tile img {
  display: block;
  max-width: 530px;
  border-right: 0.005rem solid #c1c6cc;
  align-self: start;
}

.blog-latest-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  width: 100%;
}

.blog-latest-description a {
  font-size: 2.5rem;
  text-decoration: none;
  font-weight: bold;
  color: #000;
}

.blog-latest-description a:hover {
  text-decoration: underline;
}

.blog-latest-description p:not(.small-font) {
  font-size: 1.7rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

#blog-recent-archive-container {
  display: flex;
  justify-content: space-between;
}

.blog-recent-column {
  width: 32%;
}

.blog-archive-column {
  width: 65%;
}

#blog-recent-archive-container h2 {
  font-size: 2.5rem;
  padding-bottom: 1rem;
}

#blog-recent-archive-container h3 {
  font-size: 1.7rem;
  padding: 0;
}

.blog-tile {
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.blog-recent {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
}

.blog-recent img {
  width: 100%;
  border-bottom: 0.05rem solid #c1c6cc;
}

#blog-recent-header {
  font-size: 1.7rem;
  text-decoration: none;
  font-weight: bold;
  color: #000;
}

#blog-recent-header:hover {
  text-decoration: underline;
  color: blue;
}

.blog-recent-text {
  padding: 0.5rem 0.7rem 0.8rem 0.7rem;
  font-size: 1.2rem;
}

.blog-tile summary {
  font-size: 1.7rem;
}

.blog-tile ul {
  padding-left: 2rem;
  padding-top: 1rem;
  list-style: none;
  font-size: 1.4rem;
}

/* MODALS (POP UP IMAGES) */

#modal-link {
  cursor: pointer;
  color: blue;
  text-decoration: underline;
}

.modal_container {
  position: fixed;
  z-index: 2;
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  flex-direction: column;
  gap: 0.5rem;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal_container img {
  max-width: 50vw;
  padding: 0.2rem;
  background-color: #fff;
  border: 0.02rem solid #c1c6cc;
}

.modal_container p {
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
}

.btn-close {
  transform: translate(10px, -20px);
  padding: 0.8rem 1.12rem;
  background: #eee;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.modal_bg_blur_black {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 1;
}

.hidden {
  display: none;
}

/* FOOTER */

.footer {
  flex-shrink: 0;
  background-color: #181d22;
  margin-top: 1.5rem;
}

.footer-container {
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  border-color: lightblue;
}

#footer-logo-container img {
  width: 120px;
  -webkit-filter: invert(1);
  filter: invert(1);
  border-color: purple;
  padding-right: 1rem;
}

#bottom-nav {
  display: flex;
  flex-direction: row;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  border-color: orange;
  height: 100%;
}

.contact-footer-container > ul > li > a {
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 0.7rem;
  color: var(--primary-color-1);
  border-radius: 0.5rem;
}

.contact-footer-container > ul > li > a:hover {
  background-color: var(--primary-color-1);
  color: #000;
}

/* GAMES PAGE */

.game_tile {
  width: 200px;
  background-color: var(--primary-color-1);
  border: 0.05rem solid #c1c6cc;
  border-radius: 0.5rem;
  max-width: 200px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 0.5rem 0 #88888850;
}

.game_tile a {
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.game_tile:hover {
  transform: scale(1.035);
  transition: ease 0.2s;
  filter: blur(0);
}

.game_tile a img {
  display: block;
  max-width: 200px;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid #88888850;
}

.game_title {
  font-weight: bold;
  font-size: 10pt;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 36px;
  color: #181d22;
  text-decoration: none;
}

.game_title:hover {
  text-decoration: underline;
}

.progressStatus {
  margin: 0.5rem 0 0 0;
  background-color: #ffffff;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  border: 1px solid #181d2260;
  font-weight: bold;
  color: #181d22;
  text-align:center;
}

#games-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, 220px);
  justify-content: center;
  justify-items: center;
  align-content: center;
  gap: 1.5rem;
}

div[class="game-poster"] > img {
  padding: 0.5rem;
  background-color: var(--primary-color-1);
  border-radius: 0.2rem;
  width: 40rem;
  margin: 2rem;
  box-shadow: 0 0 1.8rem 0 #888888;
}

.completed {
  background-color: #181d22;
  color: var(--primary-color-1);
}

.rank5 {
  color: var(--primary-color-1);
  border-color: #9f7928;
  background-color: #181d22;
}

.rank5 a, .rank5 .game_rating {
  color: #fdb931;
}

.rank5 a img {
  border-color: #7676768B;
}

.rank5 .progressStatus {
  background: radial-gradient(
      ellipse farthest-corner at right bottom,
      #fedb37 0%,
      #fdb931 8%,
      #9f7928 30%,
      #8a6e2f 40%,
      transparent 80%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      #ffffff 0%,
      #ffffac 8%,
      #d1b464 25%,
      #5d4a1f 62.5%,
      #5d4a1f 100%
    );
  color: var(--primary-color-1);
}

.game_rating {
  margin-top: 0.5rem;
  font-size: 10pt;
}

.game_preview {
  margin-top: 0.9rem;
  width: 200px;
  box-sizing: border-box;
}

.table-border-divider {
  border-color: #e5e5e5;
  border-style: solid;
  border-width: 0 0 0.1rem;
}

#minireview_container {
  padding: 2rem;
}

#minireview {
  font-size: 12.5pt;
  margin-bottom: 1.5rem;
}

.game-info-tile {
  background-color: var(--primary-color-1);
  border-width: 0 0.05rem 0.05rem 0.05rem;
  border-style: solid;
  border-color: #c1c6cc;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.game-tile-header {
  text-align: center;
  font-weight: bold;
  margin-bottom: 0 !important;
  font-size: 11.5pt;
  padding: 0.3rem;
  background-color: #181d22;
  color: var(--primary-color-1);
  border-radius: 0.5rem 0.5rem 0 0;
  margin-top: 1.5rem;
}

.game-info {
  display: table;
  width: 100%;
  border-spacing: 0.5rem;
}

.notstarted {
  filter: grayscale(1);
  opacity: 50%;
}

#return {
  margin-top: 1.5rem;
  cursor: pointer;
  font-weight: bold;
  padding: 0.35rem;
}

#pages {
  padding: 4.5rem 0.5rem 2.5rem 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.paginate {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.paginate > li > a {
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: 1px solid #181d2290;
  font-size: 10.5pt;
  text-decoration: none;
  border-radius: 3px;
  font-weight: bold;
  color: #181d22;
}

.paginate > li > a:hover {
  background-color: #181d22;
  color: #fafafa;
  transition: ease all 0.4s;
}

.currentPage {
  background-color: #181d22 !important;
  color: #fafafa !important;
}

#game-page h1 {
  font-size: 25pt;
  margin-bottom: 2.5rem;
  margin-top: -1rem;
  text-align: center;
}

/* CAPTCHA */

#user-solution {
  width: 100%;
  border: 0.05rem solid #181d22;
  margin-top: 0.9rem;
  padding: 0.7rem;
  box-sizing: border-box;
}

#captcha-container {
  display: flex;
  gap: 1rem;
}

#captcha {
  box-sizing: border-box;
  border-radius: 2px;
  border-width: 2px 2px 5px 2px;
  border-style: solid;
  border-color: #181d22;
  align-self: center;
  background-color: #fafafa;
}

.captcha-receiver {
  width: 100%;
}

#captcha-status {
  border-width: 1px 2px 2px 1px;
  border-style: solid;
  padding: 0.35rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 1rem;
}

.captcha-error {
  border-color: #a9444260;
  background-color: #f2dede;
  color: #a94442;
}

.captcha-success {
  border-color: #3c8c4060 !important;
  background-color: #c4dcc5aa !important;
  color: #3c8c40 !important;
}


/* Media Queries */

@media screen and (max-width: 1280px) {
  /* HOME PAGE MEDIA QUERY 1280px*/
  .pageContainer {
    background-color: transparent;
    border: none;
  }
}

/* For Tablet View */
@media screen and (min-width: 656px) and (max-width: 1024px) {
  /* NAV AND HEADER MEDIA QUERY TABLET */

  .nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    border-color: #adadb2;
    background-color: var(--primary-color-1);
    box-shadow: 0px 0px 5px 0px #000;
    z-index: 999;
  }

  #navbar {
    flex-direction: column;
  }

  #navbar > ul {
    display: none;
    flex-direction: row;
    list-style: none;
    text-decoration: none;
    width: 100vw;
    font-size: 1.8rem;
    background-color: #181d22;
  }

  .navMenuLogoContainer {
    display: flex;
    width: 100vw;
  }

  #logo {
    padding: 1.2rem 2rem;
  }

  #dropdown-menu {
    display: flex;
    width: 100vw;
    justify-content: flex-end;
  }

  .dropdown-img-container.active {
    background-color: #181d22;
  }

  .dropdown-img-container.active img {
    -webkit-filter: invert(1);
    filter: invert(1);
  }

  .dropdown-img-container {
    padding: 0.5rem 2rem;
  }

  .dropdown-img-container img {
    position: relative;
    width: 5rem;
  }

  .dropdown-img-container:hover {
    background-color: #181d22;
    cursor: pointer;
  }

  .dropdown-img-container:hover img {
    -webkit-filter: invert(1);
    filter: invert(1);
  }

  #navbar > ul > li {
    border-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  #navbar > ul > li:hover {
    background-color: var(--primary-color-1);
  }

  #navbar > ul > li > a {
    text-decoration: none;
    text-align: center;
    padding: 1rem;
    display: block;
    border-color: orange;
    color: var(--primary-color-1);
    font-weight: bold;
    width: 100%;
  }

  #navbar > ul > li > a:hover {
    background-color: var(--primary-color-1);
    color: #000;
  }

  /* HOME PAGE MEDIA QUERY TABLET */

  .mainHome {
    margin-top: 2rem;
  }

  .dot-positioner {
    display: none;
  }

  div[class="description-slider"] > h2 {
    font-size: 2.3rem;
  }

  .description-slider .italic {
    font-size: 1.3rem;
  }

  /* PODCAST PAGE MEDIA QUERY TABLET */

  .podcast-description h1 {
    display: none;
  }

  .podcast-description h2 {
    text-align: center;
    font-size: 4rem;
    margin-bottom: -1rem;
  }

  .podcast-description {
    width: 95%;
  }

  .podcast-header-tile .podcast-description {
    margin-bottom: -1rem;
  }

  .podcast-header-tile {
    flex-direction: column;
    padding: 2rem;
  }

  .podcast-header-tile .podcast-iframe {
    margin: 0 auto;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    width: 95%;
    height: 95%;
  }

  .archive-tile {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .podcast-episode-tile .podcast-iframe {
    margin: 0 auto;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    width: 85%;
    height: 85%;
  }

  /* SHOWMOVIE MEDIA QUERY TABLET  */

  .mainShowMovie {
    margin-top: 26rem;
  }

  div[class="poster"] > img {
    border: 0.5rem solid var(--primary-color-1);
    border-radius: 0.2rem;
    width: 45rem;
    margin: 2rem;
    box-shadow: 0 0 1.8rem 0 #888888;
  }

  div[class="game-poster"] > img {
    padding: 0.5rem;
    background-color: var(--primary-color-1);
    border-radius: 0.2rem;
    width: 45rem;
    margin: 2rem;
    box-shadow: 0 0 1.8rem 0 #888888;
  }

  div[class="description"] > h1 {
    text-align: center;
    font-size: 5rem;
    padding-bottom: 2rem;
    margin-top: -1.5rem;
  }

  .alias {
    margin-top: -1rem;
    text-align: center;
  }

  .main-info, .game-main-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -200px;
  }

  .game-main-info {
    margin-top: unset !important;
  }

  .info-tile-data {
    font-size: 1.5rem;
  }

  a .small-font {
    font-size: 0.8rem;
  }

  /* EPISODE PAGE MEDIA QUERY TABLET */

  .season-navigation-box {
    flex-direction: column;
    gap: 0;
  }

  /* SEARCH PAGE MEDIA QUERY TABLET */

  .main-query-contact-thankyou {
    margin-top: 6rem;
  }

  .no-search-result-container {
    width: 55vw;
  }

  /* BLOG PAGE MEDIA QUERY TABLET */

  .blog-latest-tile {
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
  }

  .blog-latest-tile img {
    margin: 0;
    max-width: 100%;
    align-self: center;
    border-bottom: 0.005rem solid #c1c6cc;
    border-right: 0;
  }

  .blog-latest-description {
    padding: 0 2rem 2rem 2rem;
    width: 96%;
  }

  .blog-recent-column {
    width: 47%;
  }

  .blog-archive-column {
    width: 50%;
  }
}

@media only screen and (max-width: 655px) {
  /* NAV AND HEADER MEDIA QUERY MOBILE/PHONE */

  .nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    border-color: #adadb2;
    background-color: var(--primary-color-1);
    box-shadow: 0px 0px 5px 0px #000;
    z-index: 999;
  }

  #navbar {
    flex-direction: column;
  }

  #navbar > ul {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    text-decoration: none;
    width: 100vw;
    font-size: 1.8rem;
    background-color: #181d22;
  }

  .navMenuLogoContainer {
    display: flex;
    width: 100vw;
  }

  #logo {
    padding: 1.2rem 1.5rem;
  }

  #dropdown-menu {
    display: flex;
    width: 100vw;
    justify-content: flex-end;
  }

  .dropdown-img-container.active {
    background-color: #181d22;
  }

  .dropdown-img-container.active img {
    -webkit-filter: invert(1);
    filter: invert(1);
  }

  .dropdown-img-container {
    padding: 0.5rem 1.5rem;
  }

  .dropdown-img-container img {
    position: relative;
    width: 5rem;
  }

  .dropdown-img-container:hover {
    background-color: #181d22;
    cursor: pointer;
  }

  .dropdown-img-container:hover img {
    -webkit-filter: invert(1);
    filter: invert(1);
  }

  #navbar > ul > li {
    border-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  #navbar > ul > li:hover {
    background-color: var(--primary-color-1);
  }

  #navbar > ul > li > a {
    text-decoration: none;
    text-align: center;
    padding: 1rem;
    display: block;
    border-color: orange;
    color: var(--primary-color-1);
    font-weight: bold;
    width: 100%;
  }

  #navbar > ul > li > a:hover {
    background-color: var(--primary-color-1);
    color: #000;
  }

  /* LOADING SCREEN */

  .loading-logo-container img {
    width: 25%;
  }

  /* HOME PAGE MEDIA QUERY MOBILE/PHONE */

  .mainHome {
    margin-top: 2rem;
  }

  .pageContainer {
    background-color: transparent;
    border: none;
  }

  .div-divider {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }

  .header-tile {
    border: 0.5px solid #c1c6cc;
    padding: 1rem;
  }

  .dot-positioner {
    display: none;
  }

  div[class="description-slider"] > p {
    display: none;
  }

  div[class="description-slider"] > h2 {
    font-size: 2rem;
    color: white;
    text-align: center;
  }

  .slideContent {
    display: flex;
    border-color: pink;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .description-slider {
    padding: 0;
  }

  .homepage-poster {
    border: 0.5px solid #c1c6cc;
    border-radius: 2px;
    width: 15rem;
    margin: 0;
  }

  .homepage-left-column,
  .homepage-right-column {
    width: 100%;
  }

  .slideshow-container {
    width: 100%;
  }

  .slider-mobile-shift {
    background: url(Images/Thumbnails/Background-Tile.jpg);
  }

  /* SHOWMOVIE PAGE MEDIA QUERY MOBILE/PHONE */

  .mainShowMovie {
    margin-top: 28rem;
  }

  div[class="poster"] > img {
    border: 0.5rem solid var(--primary-color-1);
    border-radius: 0.2rem;
    width: 28rem;
    margin: 2rem;
    box-shadow: 0 0 1.8rem 0 #888888;
  }

  div[class="game-poster"] > img {
    padding: 0.5rem;
    background-color: var(--primary-color-1);
    border-radius: 0.2rem;
    width: 28rem;
    margin: 2rem;
    box-shadow: 0 0 1.8rem 0 #888888;
  }

  div[class="description"] > h1 {
    text-align: center;
    font-size: 4rem;
    padding-bottom: 2rem;
    margin-top: -1.5rem;
  }

  .alias {
    margin-top: -1rem;
    text-align: center;
  }

  .main-info, .game-main-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-color: red;
    margin-top: -200px;
  }

  .game-main-info {
    margin-top: unset !important;
  }

  .show-movie-div-divider {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }

  .show-movie-left-column,
  .show-movie-right-column {
    width: 100%;
  }

  .show-movie-right-column {
    padding-top: 2rem;
  }

  /* EPISODE PAGE MEDIA QUERY MOBILE/PHONE */

  .season-header-tile {
    flex-direction: column;
  }

  .season-poster {
    margin: 0 auto;
    margin-top: 1.5rem;
  }

  .season-description {
    padding: 0;
    padding-top: 2rem;
    width: 100%;
    text-align: center;
    align-items: center;
  }

  .airing-date-styling {
    margin: 0 auto;
    padding-bottom: 0.5rem;
  }

  .season-navigation-box {
    flex-direction: column;
    gap: 0;
  }

  .season-navigation-links {
    margin: 0 auto;
    margin-top: 0.5rem;
  }

  .mobile-shift {
    display: flex;
    flex-direction: column;
  }

  /* PODCAST PAGE MEDIA QUERY MOBILE/PHONE */

  .podcast-description h1 {
    display: none;
  }

  .podcast-description h2 {
    text-align: center;
    font-size: 3.5rem;
  }

  .podcast-description h4 {
    font-size: 1.6rem;
  }

  .podcast-description {
    padding: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    width: 100%;

    justify-content: center;
  }

  .podcast-description p {
    font-size: 1.4rem;
  }

  .podcast-header-tile {
    flex-direction: column;
    padding: 2.5rem;
  }

  .podcast-header-tile .podcast-iframe {
    margin: 0 auto;
    margin-bottom: 1rem;
    width: 100%;
    height: 100%;
  }

  .podcast-header-tile .podcast-description {
    margin-bottom: -1rem;
  }

  .archive-tile {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .podcast-episode-tile .podcast-iframe {
    margin: 0 auto;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    width: 85%;
    height: 85%;
  }

  .podcast-archive-content summary {
    font-size: 1.6rem;
  }

  /* SEARCH PAGE MEDIA QUERY MOBILE/PHONE */

  .main-query-contact-thankyou {
    margin-top: 6rem;
  }

  .search-result-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .search-result-container img {
    width: 80vw;
  }

  .search-description h2 {
    text-align: center;
    font-size: 1.6rem;
  }

  .search-description p {
    display: none;
  }

  .search-description {
    margin-top: -2.5rem;
    padding: 1rem;
  }

  .no-search-result-container {
    width: 55vw;
  }

  .search-review-result-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .search-review-result-container img {
    width: 82vw;
    margin-bottom: -1rem;
  }

  .search-review-description h2 {
    text-align: left;
    font-size: 1.8rem;
  }

  .search-review-description h3 {
    text-align: left;
    font-size: 1.5rem;
  }

  .search-review-date {
    text-align: left;
  }

  .search-review-description {
    padding: 2rem;
  }

  .search-review-description p {
    -webkit-line-clamp: 3;
    font-size: 1.4rem;
    text-align: left;
  }

  /* EXPLORE/GENRE PAGE MEDIA QUERY MOBILE/PHONE */

  .genre-tiles {
    width: 40%;
    margin-bottom: 1rem;
  }

  /* CONTACT PAGE MEDIA QUERY MOBILE/PHONE */

  .contact-pageContainer {
    background-color: #fff;
    margin: 0 auto;
    padding: 3rem 2rem;
  }

  .contact-form-header {
    background-color: #181d22;
    padding: 2rem;
  }

  /* THANK YOU PAGE MEDIA QUERY MOBILE/PHONE */

  #thankyou-page h1 {
    font-size: 2rem;
    margin: 0 auto;
    text-align: center;
  }

  #thankyou-page p {
    font-size: 1.4rem;
  }

  .thankyou-gif-styling {
    width: 32rem;
    height: 14.2rem;
  }

  /* BLOG & REVIEW MEDIA QUERY MOBILE/PHONE */

  #review-page h1 {
    font-size: 3rem;
    text-align: center;
  }

  #review-page h2 {
    font-size: 1.6rem;
    text-align: center;
  }

  #review-page p {
    font-size: 1.4rem;
  }

  .review-links-container {
    flex-direction: column;
  }

  #wrap-reverse {
    flex-wrap: wrap-reverse;
    justify-content: center;
  }

  .blog-img-float-left {
    max-width: 110px;
  }

  .blog-img-float-right {
    max-width: 110px;
  }

  .blog-container h1 {
    text-align: center;
  }

  .blog-latest-tile {
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
  }

  .blog-latest-tile img {
    max-width: 100%;
    align-self: center;
    border-bottom: 0.005rem solid #c1c6cc;
    border-right: 0;
  }

  .blog-latest-description {
    padding: 0 2rem 2rem 2rem;
    font-size: 1.2rem;
    width: 96%;
  }

  .blog-latest-description p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }

  #blog-recent-archive-container {
    flex-wrap: wrap;
  }

  .blog-recent-column {
    width: 100%;
    margin-top: 1rem;
  }

  .blog-archive-column {
    width: 100%;
    margin-top: 3rem;
  }

  /* FOOTER MEDIA QUERY MOBILE/PHONE */

  #footer-logo-container img {
    display: none;
  }

  #captcha-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* GAMES */

  .game_tile {
    max-width: 145px;
  }

  .game_tile a img {
    max-width: 140px;
  }

  .game_preview {
    width: 140px;
  }
}