@import 'colors.css';
@import 'font-info.css';

:root {
	--padding: 1rem;
	--padding-small: 0.75rem;
	--padding-smaller: 0.5rem;
	--padding-large: 3rem;
	--gap: 1rem;
	--gap-small: 0.75rem;
	--gap-smaller: 0.5rem;
	--gap-large: 3rem;
   --br: 0.475rem;
   --br-small: 0.25rem;
   --br-large: 1rem;
}

html {
	box-sizing: border-box;
	margin: 0;
	max-width: 100%;
	min-width: 410px;
   overflow-x: hidden;
	scroll-behavior: smooth;
	touch-action: manipulation;
	width: 100%;
	word-break: break-word;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	box-sizing: border-box;
   color: hsl(var(--text-primary));
	font-family: var(--font-family);
	font-size: var(--fs);
	margin: 0;
	max-width: 100%;
	min-width: 410px;
   overflow-x: hidden;
	scroll-behavior: smooth;
	touch-action: manipulation;
	width: 100%;
	word-break: break-word;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body {
   background: hsl(var(--bg));
}

nav {
	background: linear-gradient(rgb(255, 158, 45), rgb(185, 185, 185));
   border-bottom: 1px solid hsl(var(--gray));
   height: auto;
   position: fixed;
   top: 0;
   transition: 100ms;
   width: 100%;
   z-index: 9999;
}

nav .menu {
   align-items: center;
   display: flex;
   height: 75px;
   gap: var(--gap);
   justify-content: center;
   margin: auto;
   width: 100%;
}

nav .menu .nav-content {
	align-items: center;
	display: flex;
	gap: var(--gap);
}

nav .menu .nav-content .logo {
	background: var(--logo);
	background-repeat: no-repeat;
	background-size: 100%;
	cursor: pointer;
	display: flex;
	height: 28px;
	width: 178px;
}

nav .menu .nav-content .menubar ul {
   align-items: center;
   display: flex;
   flex-direction: row;
   gap: var(--gap-small);
   height: 100%;
   justify-content: space-evenly;
   margin-left: 1rem;
   width: 100%;
}

nav .menu .nav-content .menubar ul li {
   align-items: center;
   border-radius: var(--br);
   cursor: pointer;
   display: flex;
   gap: var(--gap-small);
   padding: var(--padding-smaller) var(--padding);
}

nav .menu .nav-content .menubar ul p {
   transition: 150ms;
   user-select: none;
}

nav .menu .nav-content .menubar ul li:hover p {
   color: hsl(var(--gray));
}

nav .menu .nav-content .menubar ul svg {
   color: hsl(var(--gray));
   height: 12px;
   width: 12px;
}

nav .menu .nav-content .login-button {
   align-items: center;
   background-color: hsl(var(--gray), 25%);
   border-radius: var(--br);
   cursor: pointer;
   display: flex;
   justify-content: center;
   padding: var(--padding-smaller) var(--padding);
}

nav .menu .nav-content .login-button:hover {
   background-color: hsl(var(--gray), 50%);
}

nav .menu .nav-content .login-button p {
   color: hsl(var(--text));
   user-select: none;
}

nav .menu .nav-content .mobile-menu-toggle {
   align-items: center;
   background-color: hsl(var(--gray), 25%);
   border-radius: var(--br);
   cursor: pointer;
   display: none;
   justify-content: center;
   padding: var(--padding-smaller) var(--padding);
   transition: 150ms;
}

nav .menu .nav-content .mobile-menu-toggle:hover {
   background-color: hsl(var(--gray), 50%);
}

nav .menu .nav-content .mobile-menu-toggle i {
   color: hsl(var(--text));
   font-size: 1.2rem;
   user-select: none;
}

nav .menu .nav-content .download-button {
   align-items: center;
   background-color: hsl(var(--white));
   border-radius: var(--br);
   cursor: pointer;
   display: flex;
   justify-content: center;
   padding: var(--padding-smaller) var(--padding);
   transition: 100ms;
}

nav .menu .nav-content .download-button p {
   color: hsl(var(--black));
   user-select: none;
}

/* Search Bar */

.search-bar {
   align-items: center;
	background-color: hsl(var(--black), 10%);
   border: 1px solid transparent;
   border-radius: var(--br);
   display: flex;
   gap: var(--gap);
   height: 35px;
   padding: var(--padding-smaller) var(--padding);
   transition: 150ms;
}

.search-bar:hover {
   background-color: hsl(var(--black), 15%);
}

.search-bar:focus-within {
   border-color: transparent !important;
   box-shadow: none;
}

.search-bar:focus-within svg {
   color: hsl(var(--text));
}

.search-bar input {
   background-color: transparent;
   border: none;
   color: hsl(var(--text));
   font-family: var(--font-family);
   font-size: var(--fs);
   outline: none;
   width: 100%;
}

.search-bar input:focus {
   outline: none;
   color: hsl(var(--text));
}

.search-bar input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: hsl(var(--gray), 40%);
	font-size: var(--fs);
}

.search-bar svg {
   color: hsl(var(--gray));
   height: 13px;
}

/* Footer */

footer {
   background: linear-gradient(rgb(185, 185, 185), rgb(255, 158, 45));
   border-top: 1px solid hsl(var(--gray));
   display: flex;
   flex-direction: column;
   gap: var(--gap-large);
   padding: 5rem;
   width: calc(100% - 300px);
   margin-left: 300px;
   position: relative;
   z-index: 100;
}

footer .footer-media {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
   justify-content: space-between;
}

footer .footer-media .footer-logo {
   background: var(--logo);
	background-repeat: no-repeat;
	background-size: 100%;
	cursor: pointer;
	display: flex;
	height: 28px;
	width: 178px;
}

footer .footer-media .media-icons {
   align-items: center;
   display: flex;
   gap: var(--gap);
}

footer .footer-media .media-icons li {
   cursor: pointer;
   height: 24px;
}

footer .footer-media .media-icons svg {
   color: rgba(0, 0, 0, 0.7);
   height: 24px;
   transition: 150ms;
}

footer .footer-media .media-icons svg:hover {
   color: rgba(0, 0, 0, 0.9);
}

footer .footer-links {
   border-top: 1px solid rgba(0, 0, 0, 0.15);
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
   padding-top: var(--gap-large);
}

footer .footer-links .link-column {
   display: flex;
   flex: 25%;
   flex-direction: column;
   gap: var(--gap);
}

footer .footer-links .link-column .links {
   display: flex;
   flex-direction: column;
   gap: var(--gap-small);
}

footer .footer-links .link-column .links a {
   color: rgba(0, 0, 0, 0.75);
   cursor: pointer;
   transition: 150ms;
}

footer .footer-links .link-column .links a:hover {
   color: rgba(0, 0, 0, 0.95);
}

footer .footer-play-game {
   align-items: center;
   border-top: 1px solid hsl(var(--gray), 20%);
   /* display: flex; */
   display: none;
   flex-wrap: wrap;
   gap: var(--gap);
   justify-content: space-between;
   padding-top: var(--gap-large);
}

footer .footer-play-game .play-media {
   align-items: center;
   display: flex;
   gap: var(--gap);
}

footer .footer-play-game .play-media li {
   cursor: pointer;
   height: 24px;
}

footer .footer-play-game .play-media svg {
   color: hsl(var(--gray));
   height: 24px;
   transition: 150ms;
}

footer .footer-play-game .play-media svg:hover {
   color: hsl(var(--text));
}

footer .footer-play-game .game-rating {
   align-items: center;
   border: 1px solid hsl(var(--gray), 10%);
   border-radius: 0.5rem;
   cursor: pointer;
   display: flex;
   gap: var(--gap);
   padding: var(--padding);
}

footer .footer-play-game .game-rating:hover {
   border-color: hsl(var(--gray), 10%) !important;
   box-shadow: none;
}

footer .footer-play-game .game-rating img {
   height: 72px;
   width: auto;
}

footer .footer-play-game .game-rating .rating-details {
   display: flex;
   flex-direction: column;
   gap: var(--gap-small);
}

footer .footer-play-game .game-rating .rating-details span {
   color: hsl(var(--gray));
   font-size: var(--fs-small);
}

footer .footer-play-game .game-rating .rating-details span:first-child {
   border-bottom: 1px solid hsl(var(--gray), 10%);
   padding-bottom: var(--padding-small);
}

footer .footer-copyright {
   align-items: center;
   border-top: 1px solid rgba(0, 0, 0, 0.15);
   display: flex;
   flex: 1 1 auto;
   flex-wrap: wrap;
   gap: var(--gap);
   justify-content: space-between;
   padding-top: var(--gap-large);
}

footer .footer-copyright .copyright-info {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
}

footer .footer-copyright .copyright-info .copyright-text p {
   color: rgba(0, 0, 0, 0.7);
   font-size: var(--fs-small);
}

footer .footer-copyright .copyright-info .links {
   align-items: center;
   display: flex;
   gap: var(--gap);
}

footer .footer-copyright .copyright-info .links li {
   cursor: pointer;
}

footer .footer-copyright .copyright-info .links a {
   color: rgba(0, 0, 0, 0.75);
   font-size: var(--fs-small);
   transition: 150ms;
}

footer .footer-copyright .copyright-info .links a:hover {
   color: rgba(0, 0, 0, 0.95);
}

/* Footer Global Overrides */
footer {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
	overflow-x: hidden !important;
}

footer * {
	box-sizing: border-box;
	max-width: 100%;
}

/* Remove list styles and underlines from footer */
footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

footer ul li {
	list-style: none;
}

footer a {
	text-decoration: none;
}

footer .footer-links .link-column .links a {
	text-decoration: none;
}

footer .footer-copyright .copyright-info .links a {
	text-decoration: none;
}

/* Ensure footer content doesn't overflow */
footer .footer-media,
footer .footer-links,
footer .footer-play-game,
footer .footer-copyright {
	max-width: 100%;
	box-sizing: border-box;
}

footer .footer-links .link-column {
	max-width: 100%;
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 780px) {
   .search-bar {
      width: 76px;
   }
   .search-bar:focus-within {
      width: 200px !important;
   }
}

@media (max-width: 1300px) {
   .search-bar {
      width: 100px;
   }
}

@media (max-width: 1135px) {
   .menubar {
      display: none !important;
   }
}

@media (max-width: 690px) {
   .search-bar {
      display: none!important;
   }
}

.mobile-overlay {
   background-color: hsl(var(--black), 60%);
   display: none;
   height: 100vh;
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 9997;
}

.mobile-overlay.active {
   display: block;
}

@media (max-width: 768px) {
   nav .menu .nav-content .mobile-menu-toggle {
      display: flex;
   }
   
   footer {
      margin-left: 0 !important;
      width: 100% !important;
      padding: var(--padding-large) var(--padding) !important;
   }
   
   footer .footer-media {
      flex-direction: column;
      gap: var(--gap);
      align-items: center;
   }
   
   footer .footer-links {
      flex-direction: column;
      gap: var(--gap);
   }
   
   footer .footer-links .link-column {
      flex: 1 1 100%;
   }
   
   footer .footer-play-game {
      flex-direction: column;
      align-items: center;
      gap: var(--gap);
   }
   
   footer .footer-copyright {
      flex-direction: column;
      text-align: center;
      gap: var(--gap-small);
   }
}