@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');


*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: 0;
}



:root {
  --box-sw: 0 .2em 0 black;
  --box-sww: 0 .2em 0 white;

  --b-box-sw: 0 .125em 0 black;
  --bw-box-sw: 0 .125em 0 white;

  --b-bor: solid .15em black;
  --w-bor: solid .15em white;

  --bw-bor: solid white .1rem;
  --bb-bor: solid black .1rem;

  --l-green: rgb(233, 255, 233);
  --b-green: rgb(150, 255, 150);
  --n-green: rgb(154, 230, 154);
  --d-green: rgb(46, 125, 46);

  --trnspr-g: rgba(140, 240, 140, 0.75);

}


html {
  font-size: clamp(1rem, 1rem + 1.25vw, 4rem);
}





body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url('/context-pictures/custom-roblox-nature-art.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

h1 {
  font-size: 2.25em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.25em;
}

button {
  font-size: .85em;
}

a {
  display: block;
  font-size: 1rem;
}



header {
  position: sticky;
  top: 0;
  height: 3rem;
  width: 100%;
  z-index: 1000;
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 1rem;
  background: var(--n-green);
  border-bottom: white solid .1rem;
  box-shadow: 0 .2rem 0 black;
}

header nav .logo {
  font-size: 1.1rem;
}

header nav .menu-button {
  padding: .2rem .4rem;
  background: var(--b-green);
  box-shadow: var(--b-box-sw);
  border: var(--w-bor);
}

header nav .menu-button:hover {
  background: var(--n-green);
}

header nav .menu-button[aria-expanded="true"] {
  background: var(--d-green);
  color: white;
}




header nav .nav-links {
  position: fixed;
  top: 0;
  left: -100%;
  list-style: none;
  transition: left 0.3s ease;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow-y: auto;
  border-right: var(--w-bor);
  border-bottom: var(--w-bor);
  background: var(--n-green);
  box-shadow: var(--box-sw);
  color: white;
  border-radius: 0 0 .2rem;
}

header nav .nav-links.active {
  left: 0;
}


header nav .nav-links a {
  text-decoration: none;
  display: block;
  padding: .2rem .4rem;
  text-align: center;
  border-radius: .2rem;
  background: var(--l-green);
  box-shadow: var(--b-box-sw);
  color: black;
  border: var(--bb-bor);
}

header nav .nav-links a:hover {
  background: white;
}


header nav .nav-links .channel-btn {
  background: rgb(255, 136, 136);
  color: white;
}

header nav .nav-links .channel-btn:hover {
  background: rgb(255, 169, 169);
}




header nav .donate-link {
  text-decoration: underline;
  color: white;
  font-size: .9rem;
}

header nav .donate-link:hover {
  transform: scale(1.05);
  color: var(--l-green);
}




header nav .nav-links .dropdown {
  position: relative;
}

header nav .nav-links .dropdown-toggle {
  padding: .2rem .4rem;
  background: white;
  box-shadow: var(--b-box-sw);
  border: var(--bb-bor);
  border-radius: .2rem;
  cursor: pointer;
  color: black;
  font-family: inherit;
  font-size: inherit;
}

header nav .nav-links .dropdown-toggle:hover {
  background: var(--b-green);
  color: black;
}

header nav .nav-links .dropdown .dropdown-menu {
  position: fixed;
  top: auto;
  margin: 0 .7rem 0;
  display: none;

  background: var(--n-green);
  border: var(--w-bor);
  box-shadow: var(--box-sw);
  border-radius: 0 .2rem .2rem 0;
  z-index: 1100;
}


header nav .nav-links .dropdown .dropdown-menu li {
  margin: .5rem;
  list-style: none;
}

header nav .nav-links .dropdown .dropdown-menu a {
  display: block;
  padding: .2rem .4rem;
  text-decoration: none;
  color: black;
  background: white;
  border: var(--bb-bor);
}

header nav .nav-links .dropdown .dropdown-menu a:hover {
  background: var(--b-green);
}






header nav .login-menu-toggle {
  padding: .2rem .4rem;
  background: white;
  box-shadow: var(--b-box-sw);
  border: var(--bb-bor);
  border-radius: .2rem;
  cursor: pointer;
  color: black;
  font-family: inherit;
  font-size: inherit;
}

header nav .login-menu-toggle:hover {
  background: var(--b-green);
  color: black;
}

header nav .login-menu-toggle[aria-expanded="true"] {
  background: black;
  color: white;
  border: var(--bw-bor);
}

header nav .dropdown .login-menu {
  position: fixed;
  top: auto;
  margin: 0 .7rem 0;
  display: none;
  padding: .5rem;
  background: var(--n-green);
  border: var(--w-bor);
  box-shadow: var(--b-box-sw);
  border-radius: 0 0 .2rem 0;
  z-index: 1100;

}


header nav .dropdown .login-menu li {
  list-style: none;
}

header nav .dropdown .login-menu li a {
  text-decoration: none;
  padding: .2rem .4rem;
  color: black;
  background: var(--l-green);

  box-shadow: var(--b-box-sw);
  border: var(--bb-bor);
  border-radius: .1rem;
}

header nav .dropdown .login-menu li a:hover {
  background: var(--b-green);

}






main.login {
  margin: 2rem auto;
  padding: .7rem;
  background: var(--n-green);
  border: var(--b-bor);
  border-radius: .5rem;
}

main.login h1 {
  text-align: center;
}

main.login .tabs {
  display: flex;
  gap: 1rem;
  margin: .2rem auto .7rem;
  justify-content: center;
}

main.login .tab {
  padding: 0.3rem .6rem;
  cursor: pointer;
  color: var(--d-green);
  background: white;
  border: var(--bb-bor);
  box-shadow: var(--b-box-sw);
}

main.login .tab:hover {
  color: var(--d-green);
  background: var(--l-green);
}

main.login .tab.active {
  background: var(--d-green);
  color: white;
}

main.login .form-group {
  margin-bottom: 1rem;
}

main.login .form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

main.login .form-group input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: var(--bb-bor);
  outline: none;
}

main.login .form-group input.error {
  border-color: #ff5667;
}

main.login .error-text {
  color: #ff5667;
  margin-top: 0.25rem;
  text-align: center;
}

main.login .hidden {
  display: none !important;
}

main.login button {
  background: #3396ff;
  color: white;
  padding: .5rem 1rem;
  font-size: 1rem;
  margin: 0 auto;
  display: block;
  border: var(--bw-bor);
  box-shadow: var(--b-box-sw);
  cursor: pointer;
}

main.login button:hover {
  background: #0056b3;
}

main.login button:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

main.login button.secondary-btn {
  background: #ff5667;
  color: white;
  padding: .5rem 1rem;
  font-size: 1rem;
  margin: .5rem auto 0;
  display: block;
  border: var(--bb-bor);
  box-shadow: var(--b-box-sw);
  cursor: pointer;
}

main.login button.secondary-btn:hover {
  background: #ce4552;
}

main.login .auth-status {
  padding: .5rem;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1rem;
}

main.login .auth-status.info {
  background: var(--l-green);
  color: #0c5460;
  border: var(--bb-bor);
}

main.login .auth-status.success {
  background: var(--l-green);
  color: black;
}

main.login .auth-status.error {
  background: #ff838f;
  color: black;
}

main.login .auth-status.warning {
  background: #fff3cd;
  color: black;
}

main.login .button-group {
  margin-top: 1rem;
}

main.login .user-info h2 {
  margin: 0;
  text-align: center;
}

main.login .user-info p {
  margin: 0.5rem 0;
  text-align: center;
}







footer {
  position: sticky;
  bottom: 0;
  height: 4rem;
  width: 100%;
  padding: 1rem;
  background: var(--n-green);
  border-top: white solid .1rem;
  box-shadow: 0 -.2rem 0 black;
  align-content: center;
}


footer .footer-content p {
  text-align: center;
  margin: 0;
  padding: 0;
}


main {
  flex: 1;
}








.about {
  background: var(--l-green);
  margin: 0 0 1rem;
  padding: .5rem;
}

.about h1 {
  text-align: center;
  margin: 0 0 .5rem;

}

.about p {
  margin: 0;
  background: white;
  padding: .5rem;
  box-shadow: var(--box-sw);
  border: var(--bb-bor);
}





main.update-logs {
  background: var(--l-green);
  margin: 1rem 0 1rem;
  padding: .5rem;
}

main.update-logs .update-logs-section h1 {
  text-align: center;
  margin: 0 0 .5rem;
  background: var(--b-green);
  padding: .5rem;
  color: black;
}



main.update-logs .update-logs-section ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  display: block;
  margin: 1rem auto 0;
  text-align: center;

  background: white;
  padding: .5rem;
  box-shadow: var(--box-sw);
  border: var(--bb-bor);
}





main.site-guide {
  background: white;
  margin: 1rem 0 1rem;
  padding: .5rem;
}

main.site-guide .site-guide-section h1 {
  text-align: center;
  margin: 0 0 .5rem;
  background: var(--d-green);
  padding: .5rem;
  color: white;
}




main.site-guide .site-guide-section ul li {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  display: block;
  margin: 1rem auto 0;
  text-align: center;
  background: var(--l-green);
  padding: .5rem;
  box-shadow: var(--box-sw);
  border: var(--bb-bor);
}


main.home .welcome {
  text-align: center;
  display: flex;
  flex-direction: row;
  padding: .5rem;
  justify-content: center;
  gap: 1rem;
  background: var(--n-green);
  margin: 2rem 0 2rem;
  width: 100%;
}

main.home .welcome .hi {
  background: var(--b-green);
}

main.home .other_games {
  background: white;
  margin: 2em auto;
  text-align: center;
}

main.home .other_games a{
  margin: 1em auto 0;
}

main.home .welcome .hi,
main.home .welcome .games,
main.home .other_games {

  padding: .5rem;
  border: var(--w-bor);
  box-shadow: var(--box-sw);
  width: 50%;
}



main.home .welcome .games {
  border-radius: .8rem;
  background-image: url('/context-pictures/home-games-pic.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
}

main.home .welcome .games a {
  padding: .2rem .4rem;
  background: black;
  box-shadow: var(--bw-box-sw);
  text-decoration: none;
  color: white;
  width: 50%;
  margin: 1rem auto 0;
  text-align: center;
  border: var(--bw-bor);
}

main.home .welcome .games a:hover {
  background: var(--l-green);
  color: black;
  transform: scale(1.03);
  box-shadow: var(--b-box-sw);
  border: var(--bb-bor);
}

main.home .welcome .games h2,
main.home .welcome .games p
{
text-shadow: 0 0 8px black, 0 0 8px black, 0 0 8px black;
}







main.home .welcome .hi,
main.home .other_games {
  align-content: center;
  justify-items: center;
}





main.home .second {
  text-align: center;
  padding: 1rem;
  background: var(--b-green);
  margin: 2rem 0 2rem;
}

main.home .second h2,
main.home .second p
{
text-shadow: 0 0 8px black, 0 0 8px black, 0 0 8px black;
}

main.home .second .items {
  padding: .5rem;
  border: var(--w-bor);
  box-shadow: var(--box-sw);
  background-image: url('/context-pictures/home-accessories-pic.jpg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
}



main.home .second .items a {
  padding: .2rem .4rem;
  background: white;
  box-shadow: var(--b-box-sw);
  text-decoration: none;
  color: black;
  width: 50%;
  margin: 1rem auto 0;
  text-align: center;
  border: var(--bb-bor);
}


main.home .second .items a:hover {
  background: var(--l-green);
  transform: scale(1.03);
}









main.games {

  margin: 1rem auto 1rem;
}


main.games .heading {
  background: var(--n-green);
  display: flex;
  flex-direction: row;
  padding: .5rem;
  justify-content: center;
  gap: 1rem;
  margin: 1rem auto 2rem;
  align-items: stretch;
  width: 100%;
}



main.games .heading .title {
  width: 40%;
  background: var(--l-green);
  padding: .5rem;
  border: var(--w-bor);
  box-shadow: var(--box-sw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}




main.games .heading .picture {
  width: 60%;
  background: white;
  border: var(--bb-bor);
  border-radius: .5rem;
  box-shadow: var(--box-sw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

main.games .heading .picture figure {
  width: 100%;
  padding: 0.3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

main.games .heading .picture figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  flex-grow: 1;
}

main.games .heading .picture figure figcaption {
  text-align: center;
  margin-bottom: auto;
  margin-top: auto;
  background: var(--d-green);
  color: white;
}




main.games .games-section {
  margin: 2rem auto 2rem;
}

main.games .games-section .games-box {
  background: var(--trnspr-g);
  padding: .5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 350px), 1fr));
  gap: .5rem;
  align-items: start;
  width: 100%;
}

main.games .games-section .games-box .loading {
  font-size: 1.2em;
  text-align: center;
  background: white;
  padding: .3em;
  box-shadow: var(--b-box-sw);
  color: black;
}

main.games .games-section .games-box .no-results {
  font-size: 1.2em;
  text-align: center;
  background: white;
  padding: .3em;
  box-shadow: var(--b-box-sw);
  color: black;
}

main.games .games-section .games-box .game {
  background: white;
  padding: .5rem;
  box-shadow: var(--box-sw);
  border: var(--bb-bor);
}


main.games .games-section .games-box .game h2 {
  margin: 0 auto 0;
  display: block;
  padding: 0;
  text-align: center;
}


main.games .games-section .games-box .game img {
  height: auto;
  width: 100%;
  box-shadow: var(--box-sw);
  border: .1rem black solid;
  display: block;
  margin: .2rem auto 1rem;
  border-radius: .3rem;
}





main.games .games-section .games-box .game a {
  background: var(--l-green);
  padding: .2rem .4rem;
  box-shadow: var(--b-box-sw);
  border: var(--bb-bor);
  text-decoration: none;
  text-align: center;
  width: 40%;
  margin: 0 auto .7rem;
  color: black;
}

main.games .games-section .games-box .game a:hover {
  background: var(--b-green);

}



main.games .games-section .games-box .game .details p {
  margin: 0 auto 0;
  display: block;
  padding: 0;
}

main.games .games-section .games-box .game .details .specs {
  background: var(--l-green);
  color: black;
  padding: .5rem;
  margin: .5rem auto 0;
  box-shadow: var(--box-sw);
  border: var(--bb-bor);

}

main.games .games-section .games-box .game .details .specs h3 {
  text-align: center;
  display: block;
  margin: .0rem auto .5rem;
}


main.games .games-section .games-box .game .details .specs ul li {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  display: block;
  margin: .2rem auto .2rem;
  text-align: center;
}



main.games .games-section .games-box .game .toggle {
  margin: 0 auto 0;
  display: block;
  padding: .2rem .4rem;
  background: var(--n-green);
  color: black;
  border: var(--bb-bor);
  box-shadow: var(--b-box-sw);
}

main.games .games-section .games-box .game .toggle:hover {
  background: var(--b-green);
}

main.games .games-section .games-box .game .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

main.games .games-section .games-box .game .details {
  overflow: hidden;
  transition:
    opacity 0.3s ease,
    max-height 0.3s ease,
    margin 0.3s ease;
  opacity: 0;
  max-height: 0;
  margin: 0;
}

main.games .games-section .games-box .game .details.show {
  opacity: 1;
  max-height: 3000px;
  margin: .7rem 0 0;
}

main.games .games-section .games-box .game .details.hide {
  opacity: 0;
  max-height: 0;
  margin: 0;
}




main.games .games-section .game-search-container {
  background: white;
  width: 100%;
  margin: 0 auto 1rem;
  text-align: center;
  padding: .5rem;
}

main.games .games-section .game-search-container input {
  border-radius: .2rem;
  padding: .3rem;
  margin: 0 auto .5rem;
  background: var(--n-green);
  color: black;
  border: var(--bb-bor);
  box-shadow: var(--b-box-sw);
  outline: none;
  transition: box-shadow .3s ease-out;
}

main.games .games-section .game-search-container input:focus {
  box-shadow: none;
  background: var(--l-green);
}

main.games .games-section .game-search-container .search-filters .filter-btn {
  padding: .2rem .4rem;
  background: var(--l-green);
  color: black;
  border: var(--bb-bor);
  box-shadow: var(--b-box-sw);
  cursor: pointer;
}

main.games .games-section .game-search-container .search-filters .filter-btn:hover {
  background: var(--n-green);
  color: black;
}

main.games .games-section .game-search-container .search-filters .filter-btn.active {
  background: var(--d-green);
  color: white;

}

main.games .games-section .game-search-container button:hover {
  background: var(--n-green);
  color: black;
}

main.games .games-section .game-search-container button:active {
  background: var(--b-green);
}

main.games .games-section .game-search-container button,
main.games .games-section .game-search-container input {
  font-size: 1rem;
}






main.games .tabs {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  background: var(--n-green);
  padding: 0.5rem;
  width: 100%;
}

main.games .tab-button {
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  background: var(--l-green);
  border: var(--bb-bor);
  box-shadow: var(--b-box-sw);
  cursor: pointer;
  font-size: 1rem;
  color: black;
}

main.games .tab-button:hover {
  background: var(--b-green);
}

main.games .tab-button.active {
  background: var(--d-green);
  color: white;
  border: var(--bw-bor);
}

/* Tab Content */
main.games .tab-content {
  display: none;
}

main.games .tab-content.active {
  display: block;
}






main.games .posts-section h2 {
  margin: 0 0 1rem;
}



main.games .post-form {
  margin-bottom: 1rem;
}

main.games .post-form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: var(--bb-bor);
  box-shadow: var(--b-box-sw);
  font-family: inherit;
  resize: vertical;
}

main.games .post-button {
  padding: 0.5rem 1rem;
  background: var(--d-green);
  color: white;
  border: var(--bw-bor);
  box-shadow: var(--b-box-sw);
  cursor: pointer;
  margin: .5rem auto;
  display: block;
}

main.games .post-button:hover {
  background: var(--n-green);
  color: black;
}


main.games .create-post-form .image-preview {
  width: 100%;
}



main.games .create-post-form .title,
main.games .create-post-form .content {
  font-size: 1rem;
  width: 100%;
  padding: .3rem;
  border: var(--bb-bor);

}


main.games .create-post-form .post-image {
  display: none;
}

main.games .create-post-form .form-group {
  margin: 1rem 0 1rem;
}


main.games .create-post-form label.image-btn {
  margin: 1rem auto 1rem;
  font-size: 1rem;
  padding: .3rem;
  border: var(--bw-bor);
  display: block;
  text-align: center;
  width: 10rem;
  background: var(--n-green);
  cursor: pointer;
  box-shadow: var(--b-box-sw);
}


main.games .create-post-form label.image-btn:hover {
  background: var(--b-green);
}


main.games .create-post-form .content {

  resize: vertical;
}



main.games .posts-section {
  background: var(--trnspr-g);
  padding: 1rem;
  margin: 1rem 0;

}


main.games .posts-container {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 350px), 1fr));
  gap: .5rem;
  align-items: start;
}


main.games .post {
  background: white;
  padding: 1rem;
  margin-bottom: 1rem;
  border: var(--bb-bor);
  box-shadow: var(--box-sw);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  word-break: break-word;
}

main.games .post .toggle {
  margin: .5em .5em;
  background: var(--n-green);
  color: black;
  border: var(--bb-bor);
  box-shadow: var(--b-box-sw);
  padding: .3em;
  cursor: pointer;
}

main.games .post .toggle:hover{
  background: var(--b-green);
  color: black;
}

main.games .post .toggle[aria-expanded=true]{
  background: var(--d-green);
  color: white;
  padding: .5em;
}

main.games .post .toggle[aria-expanded=true]:hover{
  background: black;
  color: white;
}


main.games .post p {
  text-align: center;
}

main.games .post-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #666;
}



main.games .post .post-content {
  width: 100%;
  word-wrap: break-word;
  /* Better than word-break: break-all */
  overflow-wrap: break-word;
  /* Modern alternative */
  hyphens: auto;
  margin-bottom: 0.5rem;
  min-width: 0;
}


main.games .post .post-details {
  width: 100%;
  word-wrap: break-word;
  /* Better than word-break: break-all */
  overflow-wrap: break-word;
  /* Modern alternative */
  hyphens: auto;
  min-width: 0;
  display: none;
}

main.games .post-details[hidden] {
  display: none;
}

main.games .post-details:not([hidden]) {
  display: block;
  width: 100%;
  min-width: 0;
}



main.games .post-actions {
  display: flex;
  gap: 1rem;
}

main.games .post-actions button {
  background: none;
  border: none;
  color: var(--d-green);
  cursor: pointer;
  font-size: 0.9rem;
}

main.games .post-actions button:hover {
  text-decoration: underline;
}

main.games .post-image {
  width: 100%;
}










main.accessories .heading {
  background: var(--n-green);
  display: flex;
  flex-direction: row;
  padding: .5rem;
  gap: 1rem;
  margin: 2rem auto 2rem;
  align-items: stretch;
}

main.accessories .title {
  width: 40%;
  background: var(--l-green);
  padding: .5rem;
  border: var(--w-bor);
  box-shadow: var(--box-sw);
  display: flex;

  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

main.accessories .title h1 {
  text-align: center;
}

main.accessories .heading .picture {
  width: 60%;
  background: white;
  border: var(--bb-bor);
  border-radius: 0.5rem;
  box-shadow: var(--box-sw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

main.accessories .heading .picture figure {
  width: 100%;
  margin: 0;
  padding: 0;
  padding: 0.3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

main.accessories .heading .picture figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  flex-grow: 1;
}

main.accessories .heading .picture figure figcaption {

  background: var(--d-green);
  color: white;
  text-align: center;
  margin-bottom: auto;
  margin-top: auto;
}


main.accessories .accessories-section {
  margin: 2rem auto 2rem;
}

main.accessories .accessories-section .accessorie-search-container {
  background: var(--n-green);
  width: 100%;
  margin: 0 auto 1rem;
  text-align: center;
  padding: .5rem;
}

main.accessories .accessories-section .accessorie-search-container input {
  border-radius: .2rem;
  padding: .3rem;
  margin: 0 auto .5rem;
  background: white;
  color: black;
  border: var(--bb-bor);
  box-shadow: var(--b-box-sw);
  outline: none;
  transition: box-shadow .3s ease-out;
}

main.accessories .accessories-section .accessorie-search-container input:focus {
  box-shadow: none;
}

main.accessories .accessories-section .accessorie-search-container .filter-btn {
  padding: .2rem .4rem;
  background: var(--b-green);
  color: black;
  border: var(--bb-bor);
  box-shadow: var(--b-box-sw);
  cursor: pointer;
}

main.accessories .accessories-section .accessorie-search-container .filter-btn:hover {
  background: var(--l-green);
  color: black;
}

main.accessories .accessories-section .accessorie-search-container .filter-btn.active {
  color: white;
  background: var(--d-green);
}



main.accessories .accessories-section .accessorie-search-container button,
main.accessories .accessories-section .accessorie-search-container input {
  font-size: 1rem;
}



main.accessories .accessories-section h5 {
  background: white;
}

main.accessories .accessories-section .accessories-box {
  background: var(--trnspr-g);
  padding: .5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 250px), 1fr));
  gap: .5rem;
  align-items: start;
}

main.accessories .accessories-section .accessories-box .loading {
  font-size: 1.2em;
  text-align: center;
  background: white;
  padding: .3em;
  box-shadow: var(--b-box-sw);
  color: black;
}


main.accessories .accessories-section .accessories-box .no-results {
  font-size: 1.2em;
  text-align: center;
  background: var(--d-green);
  padding: .3em;
  box-shadow: var(--b-box-sw);
  color: white;
}

main.accessories .accessories-section .accessories-box .accessorie {
  background: white;
  padding: .5rem;
  box-shadow: var(--box-sw);
  border: var(--bb-bor);
}


main.accessories .accessories-section .accessories-box .accessorie h2 {
  margin: 0 auto 0;
  display: block;
  padding: 0;
  text-align: center;
}


main.accessories .accessories-section .accessories-box .accessorie img {
  height: auto;
  width: 100%;
  box-shadow: var(--box-sw);
  border: .1rem black solid;
  display: block;
  margin: .2rem auto 1rem;
  border-radius: .3rem;
}



main.accessories .accessories-section .accessories-box .accessorie a {
  background: var(--l-green);
  padding: .2rem .4rem;
  box-shadow: var(--b-box-sw);
  border: var(--bb-bor);
  text-decoration: none;
  text-align: center;
  width: 40%;
  margin: 0 auto .7rem;
  color: black;
}

main.accessories .accessories-section .accessories-box .accessorie a:hover {
  background: var(--b-green);

}



main.accessories .accessories-section .accessories-box .accessorie .details p {
  margin: 0 auto 0;
  display: block;
  padding: 0;
}

main.accessories .accessories-section .accessories-box .accessorie .details .specs {
  background: var(--l-green);
  color: black;
  padding: .5rem;
  margin: .5rem auto 0;
  box-shadow: var(--box-sw);
  border: var(--bb-bor);

}

main.accessories .accessories-section .accessories-box .accessorie .details .specs h3 {
  text-align: center;
  display: block;
  margin: .0rem auto .5rem;
}


main.accessories .accessories-section .accessories-box .accessorie .details .specs ul li {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  display: block;
  margin: .2rem auto .2rem;
  text-align: center;
}





main.accessories .accessories-section .accessories-box .accessorie .toggle {
  margin: 0 auto 0;
  display: block;
  padding: .2rem .4rem;
  background: var(--b-green);
  border: var(--bb-bor);
  box-shadow: var(--b-box-sw);
}

main.accessories .accessories-section .accessories-box .accessorie .toggle:hover {
  background: var(--n-green);
}

main.accessories .accessories-section .accessories-box .accessorie .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

main.accessories .accessories-section .accessories-box .accessorie .details {
  overflow: hidden;
  transition:
    opacity 0.3s ease,
    max-height 0.3s ease,
    margin 0.3s ease;
  opacity: 0;
  max-height: 0;
  margin: 0;
}

main.accessories .accessories-section .accessories-box .accessorie .details.show {
  opacity: 1;
  max-height: 3000px;
  margin: .7rem 0 0;
}

main.accessories .accessories-section .accessories-box .accessorie .details.hide {
  opacity: 0;
  max-height: 0;
  margin: 0;
}









main.news {

  margin: 1rem auto 1rem;
}



main.news .heading {
  background: var(--d-green);
  display: flex;
  flex-direction: row;
  padding: .5rem;
  gap: 1rem;
  margin: 2rem auto 2rem;
  align-items: stretch;
}

main.news .title {
  width: 40%;
  background: var(--b-green);
  padding: .5rem;
  border: var(--w-bor);
  box-shadow: var(--box-sww);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: .5em .5em 0 0;
}

main.news .title h1 {
  background: black;
  color: white;
  padding: .2em;
  border-radius: .3em;
}


main.news .title h3 {
  background: white;
  color: black;
  padding: .2em;
  border-radius: .3em;
  margin-top: .5em;
}


main.news .heading .picture {
  width: 60%;
  background: black;
  border: var(--w-bor);
  border-radius: .5rem;
  box-shadow: var(--box-sww);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

main.news .heading .picture figure {
  width: 100%;
  padding: 0.3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

main.news .heading .picture figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  flex-grow: 1;
}

main.news .heading .picture figure figcaption {
  text-align: center;
  margin-bottom: auto;
  margin-top: auto;
  background: white;
  color: black;
}



main.news .news-box {
  margin: 2rem auto 2rem;
  background: white;
  padding: .5em;
}


main.news .news-box div {
  margin: 1rem auto 1rem;
  background: var(--b-green);
  padding: .5em;
  box-shadow: var(--box-sw);
  border: var(--bb-bor);
}


main.news .news-box div a {
  color: white;
  background: var(--d-green);
  margin: .5em auto 0;
  text-align: center;
  width: 40%;
  padding: .3em;
  box-shadow: var(--b-box-sw);
  border: var(--bb-bor);
  transition: background .3s ease;
}

main.news .news-box div a:hover {
  color: white;
  background: black;
  box-shadow: var(--bw-box-sw);
  border: var(--bw-bor);

}


main.news .news-box div h2 {
  margin: 0 0 .3em;

}

main.news .news-box div p {
  background: white;
  padding: .3em;
  border-radius: .2em;
}







@media (max-width: 600px) {
  main.home .welcome {
    text-align: center;
    display: flex;
    flex-direction: column;
  }


  main.home .other_games,
  main.home .welcome .hi,
  main.home .welcome .games {
    width: 100%;
  }

  main.home .welcome .hi {
    align-content: unset;
    justify-items: unset;
  }

  main.games .heading {
    display: flex;
    flex-direction: column;
  }

  main.games .heading .title {
    width: 100%;
  }

  main.games .heading .picture {
    width: 100%;
  }



  main.accessories .heading {
    display: flex;
    flex-direction: column;
  }

  main.accessories .title {
    width: 100%;
  }

  main.accessories .heading .picture {
    width: 100%;
  }

  main.news .heading {
    display: flex;
    flex-direction: column;
  }

  main.news .heading .picture {
    width: 100%;
  }

  main.news .heading .title {
    width: 100%;
  }


  main.news .title h1 {
    font-size: 2em;
  }

  main.news .title p {
    font-size: 1.1em;
  }


}