/* ----- NAVBAR ----- */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@400;800&display=swap");

.navbar {
  display: flex;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 50%;
  align-items: center;
  width: 98%;
  max-width: 2500px;
  min-height: 8vh;
  margin-top: 1%;
  padding: 20px;
  color: #43ff64;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  background-color: rgba(13, 13, 17, 0.95);
  border-radius: 15px;
  background-clip: padding-box;
}

.navbar a {
  text-decoration: none;
}

.navbar li {
  list-style: none;
}

.nav-links {
  position: fixed;
  right: 40px;
}

.nav-links a {
  color: #43ff64;
}

.search-icon {
  height: 18px;
  filter: brightness(0) saturate(100%) invert(90%) sepia(77%) saturate(676%) hue-rotate(55deg) brightness(103%) contrast(104%);
  -webkit-filter: brightness(0) saturate(100%) invert(90%) sepia(77%) saturate(676%) hue-rotate(55deg) brightness(103%) contrast(104%);
}

.logo img {
  width: 50px;
  height: auto;
  margin-top: 5px;
  border-radius: 20px;
  background-clip: padding-box;
}

.site-name {
  margin-left: 20px;
  font-size: 30px;
  text-transform: lowercase;
  letter-spacing: 3px;
}

.site-name a {
  color: #43ff64;
  text-decoration: none;
}

.menu {
  display: flex;
  font-size: 18px;
  border-radius: 15px;
  background-clip: padding-box;
}

.menu li a:hover {
  background-color: rgba(57, 57, 57, 0.7137254902);
  transition: 0.3s ease;
  border-radius: 8px;
  background-clip: padding-box;
}

.menu li a {
  padding: 5px 14px;
  display: flex;
}

.nav-download {
  font-weight: bold;
  background-color: rgba(75, 215, 101, 0.3019607843);
  border-radius: 8px;
  background-clip: padding-box;
}

input[type=checkbox] {
  display: none;
}

.hamburger {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  display: none;
  z-index: 999;
  color: #43ff64;
  cursor: pointer;
  user-select: none;
}

@media screen and (max-width: 1160px) {
  .navbar {
    justify-content: space-around;
  }

  .nav-links {
    position: static;
    right: 0px;
  }

  .site-name {
    margin-left: 0px;
  }

  .menu {
    display: none;
    z-index: 999;
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 38px;
    padding: 20px 0;
    text-align: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: rgba(13, 13, 17, 0.95);
  }

  .menu li a {
    display: inline;
  }

  .menu li a:hover {
    color: #ffffff;
    background-color: rgba(57, 57, 57, 0.7137254902);
    transition: 0.3s ease;
  }

  .menu li {
    margin-top: 20px;
  }

  input[type=checkbox]:checked~.menu {
    display: block;
  }

  .hamburger {
    display: block;
  }
}

@media screen and (max-width: 720px) {
  .navbar {
    padding: 10px;
  }

  .menu {
    margin-top: 28px;
  }
}

/* ----- COOKIE CONSENT ----- */
.termsfeed-com---reset button:focus {
  border-radius: 0px;
  background-clip: padding-box;
}

.termsfeed-com---palette-dark .cc-cp-body-tabs-item-link:focus {
  box-shadow: none;
}

.termsfeed-com---nb {
  border: 2px solid #181820;
  border-color: #43ff64;
  outline: none;
  color: #43ff64;
  background-color: #0d0d11;
  border-radius: 8px;
  background-clip: padding-box;
}

.termsfeed-com---nb .cc-nb-title {
  color: #43ff64;
}

.termsfeed-com---nb .cc-nb-okagree {
  background-color: #43ff64;
}

.termsfeed-com---nb .cc-nb-reject {
  background-color: red;
}

.termsfeed-com---nb .cc-nb-changep {
  background-color: #ffffff;
}

.cc-nb-buttons-container button {
  border-radius: 8px;
  background-clip: padding-box;
}

.termsfeed-com---pc-dialog {
  border-radius: 8px;
  background-clip: padding-box;
}

.termsfeed-com---palette-dark .cc-pc-head-title-text {
  color: #43ff64;
}

.termsfeed-com---palette-dark .cc-pc-head-close {
  color: #43ff64;
}

.termsfeed-com---pc-overlay .cc-cp-foot-save {
  background-color: #43ff64;
  border-radius: 8px;
  background-clip: padding-box;
}

.termsfeed-com---palette-dark .cc-pc-head-lang select {
  border-radius: 4px;
  background-clip: padding-box;
}

.termsfeed-com---palette-dark .cc-pc-head-lang select:focus {
  box-shadow: none;
  border-radius: 4px;
  background-clip: padding-box;
}

.termsfeed-com---palette-dark .cc-cp-body-content-entry-title {
  color: #43ff64;
}

/* ----- FOOTER ----- */
.footer {
  z-index: 999;
  left: 50%;
  width: 100%;
  width: 98%;
  max-width: 2500px;
  min-height: 100%;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: 1%;
  margin-left: auto;
  padding: 10px 0;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  background-color: rgba(13, 13, 17, 0.8);
  border-radius: 15px;
  background-clip: padding-box;
}

.footer .social {
  padding-bottom: 5px;
  color: #b0b2b8;
  text-align: center;
}

.footer .social a {
  display: inline-block;
  opacity: 0.5;
  width: 28px;
  height: 28px;
  margin: 0 8px;
  border: 1px solid #b0b2b8;
  color: #b0b2b8;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background-clip: padding-box;
}

.footer .social a:hover {
  opacity: 0.9;
}

.footer .list {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  color: #b0b2b8;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.footer ul li a {
  opacity: 0.8;
  color: #b0b2b8;
  text-decoration: none;
}

.footer ul li {
  display: inline-block;
  padding: 0 5px;
}

.footer ul li a:hover {
  opacity: 1;
}

.footer .copyright {
  margin-top: 5px;
  color: #b0b2b8;
  font-size: 10px;
  text-align: center;
}

.social-icon {
  height: 18px;
  filter: brightness(0) saturate(100%) invert(78%) sepia(8%) saturate(171%) hue-rotate(187deg) brightness(91%) contrast(87%);
  -webkit-filter: brightness(0) saturate(100%) invert(78%) sepia(8%) saturate(171%) hue-rotate(187deg) brightness(91%) contrast(87%);
  margin-top: 4px;
}

/* ----- COMPONENTS ----- */
.code {
  overflow-wrap: break-word;
  padding: 0 3px;
  border: 1px solid #43ff64;
  color: #43ff64;
  font-family: courier, monospace;
  background-color: #181820;
  border-radius: 3px;
  background-clip: padding-box;
}

.important {
  overflow-wrap: break-word;
  color: #fb8368;
}

.droptop {
  color: #43ff64;
}

.bold {
  font-weight: bold;
}

.underline {
  overflow-wrap: break-word;
  color: #b0b2b8;
  text-decoration: underline;
}

.link {
  overflow-wrap: break-word;
  color: #43ff64;
}

.hidden {
  display: none;
}

.pointer {
  cursor: pointer;
}

.body-divider {
  width: 100%;
  height: 65px;
  padding: 30px;
}

.body-divider hr {
  border-color: rgba(0, 0, 0, 0);
}

/* Skip-to-main-content */
.skip-to-main-content {
  z-index: 1000;
  position: absolute;
  left: 0.5rem;
  padding: 0.5rem 0.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
  color: #43ff64;
  background: #181820;
  transition: transform 325ms ease-in;
  transform: translateY(-120%);
}

.skip-to-main-content:focus {
  transform: translateY(0%);
}

/* scroll-to-top */
.scroll-to-top {
  display: none;
  opacity: 0.7;
  z-index: 999;
  position: fixed;
  right: 30px;
  bottom: 20px;
  padding: 17px 12px 17px 12px;
  border: 2px solid #181820;
  outline: none;
  color: #181820;
  font-size: 18px;
  cursor: pointer;
  background-color: rgba(67, 255, 100, 0.9019607843);
  border-radius: 10px;
  background-clip: padding-box;
}

.scroll-to-top a {
  color: #43ff64;
}

.up-arrow-icon {
  height: 18px;
  filter: brightness(0) saturate(100%) invert(5%) sepia(7%) saturate(3256%) hue-rotate(201deg) brightness(94%) contrast(89%);
  -webkit-filter: brightness(0) saturate(100%) invert(5%) sepia(7%) saturate(3256%) hue-rotate(201deg) brightness(94%) contrast(89%);
}

@media (hover: hover) {

  .scroll-to-top:hover,
  .scroll-to-top:active {
    border-color: #43ff64;
    color: #43ff64;
    background-color: #0d0d11;
  }

  .scroll-to-top:hover .up-arrow-icon,
  .scroll-to-top:active .up-arrow-icon {
    height: 18px;
    filter: brightness(0) saturate(100%) invert(90%) sepia(77%) saturate(676%) hue-rotate(55deg) brightness(103%) contrast(104%);
    -webkit-filter: brightness(0) saturate(100%) invert(90%) sepia(77%) saturate(676%) hue-rotate(55deg) brightness(103%) contrast(104%);
  }
}

@media screen and (max-width: 480px) {
  .scroll-to-top {
    right: 10px;
    bottom: 10px;
  }
}

.latest-changenotes-container {
  color: #ffffff;
}

.latest-changenotes-text {
  margin-bottom: 30px;
  font-size: 30px;
}

/* image modal */
.image-modal {
  display: flex;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9019607843);
}

.image-modal-content {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  overflow: hidden;
}

.image-modal-content img {
  border-radius: 10px;
  background-clip: padding-box;
  max-width: 100%;
  max-height: 100%;
}

.image-modal-close {
  display: flex;
  position: absolute;
  top: 2%;
  right: 6%;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-clip: padding-box;
  width: 50px;
  height: 50px;
  color: #000;
  font-size: 50px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #27af40;
}

.image-modal-close:hover {
  -webkit-box-shadow: 0 0 10px #43ff66;
  background-color: #43ff64;
  box-shadow: 0 0 10px #43ff66;
  transition: 0.3s ease;
}

/* readme modal */
.readme-modal {
  display: flex;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.readme-modal-container {
  -webkit-box-shadow: 0 0 10px #43ff66;
  overscroll-behavior: contain;
  position: relative;
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  background-clip: padding-box;
  border: 1px solid #43ff64;
  overflow: auto;
  color: white;
  background-color: #181820;
  box-shadow: 0 0 10px #43ff66;
}

.readme-modal-container::-webkit-scrollbar {
  width: 20px;
  border-radius: 0 10px 10px 0;
  background-color: #181820;
}

.readme-modal-container::-webkit-scrollbar-thumb {
  border: 5px solid transparent;
  border-radius: 6px 9px 9px 6px;
  background: #27af40;
  background-clip: content-box;
}

.readme-modal-container::-webkit-scrollbar-thumb:hover {
  background-color: #43ff64;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.readme-modal-content {
  max-width: 90%;
  margin: auto;
}

.readme-modal-content h1 {
  margin-bottom: 2%;
}

.readme-modal-content h1 img {
  width: 20%;
  height: auto;
  margin-bottom: 2%;
}

.readme-modal-content h2 {
  margin-top: 3%;
  margin-bottom: 3%;
}

.readme-modal-content h4 {
  margin-bottom: 2%;
}

.readme-modal-content p {
  margin-bottom: 2%;
}

.readme-modal-content p a {
  text-decoration: none;
}

.readme-modal-content p img {
  max-width: 100%;
  border-radius: 10px;
  background-clip: padding-box;
}

.readme-modal-content ol li,
.readme-modal-content ul li {
  margin-bottom: 2%;
  margin-left: 4%;
}

.readme-modal-content a:link {
  color: #43ff64;
}

.readme-modal-content a:visited {
  color: #43ff64;
}

.readme-modal-close {
  display: flex;
  position: absolute;
  top: 2%;
  right: 3%;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-clip: padding-box;
  width: 50px;
  height: 50px;
  color: #000;
  font-size: 50px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #27af40;
}

.readme-modal-close:hover {
  -webkit-box-shadow: 0 0 10px #43ff66;
  background-color: #43ff64;
  box-shadow: 0 0 10px #43ff66;
  transition: 0.3s ease;
}

.skeleton {
  background-color: rgba(255, 255, 255, 0.02);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150px;
  height: 100%;
  width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  animation: skeleton-pulse 1.2s infinite;
}

.skeleton-thumb {
  height: 160px;
  width: 80%;
  border-radius: 8px;
  margin: 20px auto 8px auto;
  background-color: rgba(255, 255, 255, 0.015);
}

.skeleton-line {
  height: 18px;
  width: 60%;
  margin: 12px auto;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.015);
}

.skeleton-line.title {
  height: 28px;
  width: 50%;
}

.skeleton-line.meta {
  width: 30%;
}

.skeleton-line.desc {
  height: 14px;
  width: 80%;
  margin-bottom: 20px;
}

.skeleton-button {
  height: 36px;
  width: 120px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.015);
  margin: 12px auto;
}

@keyframes skeleton-pulse {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(300px);
  }
}

.pulse {
  animation: pulse-animation 1s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgb(21, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.card-hover {
  border-color: #43ff64 !important;
  background-color: rgba(67, 255, 100, 0.3019607843) !important;
}

/* ----- 404 PAGE ----- */
.p404-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  margin-top: calc(20px + 10vh);
  padding: 30px 65px;
  overflow: hidden;
  color: #43ff64;
  font-size: 40px;
}

.p404-container img {
  opacity: 0.3;
  width: 100%;
}

.p404-banner-text {
  -ms-transform: translate(-50%, -50%);
  display: flex;
  position: absolute;
  top: 50%;
  right: -50%;
  flex-direction: row;
  width: 80%;
  transform: translate(-50%, -50%);
}

.p404-banner-title {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.p404-banner-title h1 {
  justify-content: center;
  margin-bottom: 20px;
  font-size: 75px;
  text-align: center;
  text-shadow: 0px 0px 6px rgba(17, 13, 13, 0.5450980392);
}

.p404-banner-title h2 {
  justify-content: center;
  width: 80%;
  padding-left: 20%;
  color: #b0b2b8;
  font-size: 30px;
  text-align: center;
}

@media screen and (max-width: 1160px) {
  .p404-banner {
    padding-top: 80px;
  }

  .p404-banner-text {
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    top: 60%;
    left: 50%;
    width: 80%;
    padding: 12px 24px;
    transform: translate(-50%, -50%);
  }

  .p404-banner-title {
    width: 100%;
    margin-bottom: 20px;
  }

  .p404-banner-title h1 {
    position: relative;
    top: -25px;
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 720px) {
  .p404-banner {
    margin-top: 120px;
    padding: 0px 10px;
  }

  .p404-banner-title h1 {
    font-size: 50px;
  }

  .p404-banner-title h2 {
    font-size: 25px;
  }
}

@media screen and (max-width: 480px) {
  .p404-banner {
    margin-top: 120px;
  }

  .p404-banner-text {
    width: 100%;
  }

  .p404-banner-text h1 {
    font-size: 45px;
  }

  .p404-banner {
    margin-top: 120px;
  }
}

/* ----- HOME PAGE ----- */
.home-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  margin-top: calc(20px + 15vh);
  padding: 30px 65px;
  overflow: hidden;
  color: #43ff64;
  font-size: 40px;
}

.home-contents {
  left: 50%;
  width: 90%;
  max-width: 2500px;
  margin-right: auto;
  margin-left: auto;
}

.showcase-container {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 90%;
}

.showcase-container img {
  -o-object-fit: cover;
  -o-object-position: left top;
  object-fit: cover;
  object-position: left top;
  width: 100%;
  height: 600px;
  filter: brightness(60%);
  border-radius: 8px;
  background-clip: padding-box;
}

.home-banner-text {
  -ms-transform: translate(-50%, -50%);
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  flex-direction: row;
  width: 100%;
  padding: 12px 24px;
  border: none;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background-clip: padding-box;
}

.home-banner-title {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.home-banner-title h1 {
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  font-size: 75px;
  text-align: center;
  text-shadow: 2px 2px 6px rgba(17, 13, 13, 0.8);
}

.home-banner-title h2 {
  justify-content: center;
  align-items: center;
  width: 80%;
  padding-left: 20%;
  color: #b0b2b8;
  font-size: 30px;
  text-align: center;
  text-shadow: 2px 2px 6px rgba(17, 13, 13, 0.8);
}

.home-button-container {
  display: flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  float: right;
  width: 45%;
  border: none;
  text-align: center;
}

.home-download-button {
  position: absolute;
  top: 50%;
  padding: 21px 30px;
  border: none;
  color: #43ff64;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #181820;
  border-radius: 8px;
  background-clip: padding-box;
  box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1882352941);
  transition: all 200ms linear;
  transform: translateY(-50%);
}

.home-download-button:hover {
  color: #ffffff;
  background-color: rgba(57, 57, 57, 0.7137254902);
  transition: 0.3s ease;
}

.home-download-button:active {
  color: #ffffff;
  background-color: rgba(57, 57, 57, 0.7137254902);
  transition: 0.3s ease;
}

.release-info {
  opacity: 0.5;
  color: #b0b2b8;
  font-size: 15px;
}

.home-contents {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.home-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  padding: 0px 65px;
  font-size: 25px;
  text-align: center;
}

.droptop-info-1 {
  position: relative;
  width: 100%;
}

.image-block-1 {
  -o-object-fit: cover;
  -o-object-position: left top;
  object-fit: cover;
  object-position: left top;
  opacity: 0.6;
  width: 100%;
  max-width: 90%;
  height: 600px;
  border-radius: 8px;
  background-clip: padding-box;
}

.text-block-c {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  max-width: 1000px;
  padding: 10px;
  border-style: solid;
  border-color: #43ff64;
  background-color: rgba(0, 0, 0, 0.7019607843);
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background-clip: padding-box;
}

.text-block-c h1 {
  padding-bottom: 10px;
  color: #43ff64;
  font-size: 40px;
}

.text-block-c p {
  padding-bottom: 10px;
  color: #ffffff;
  line-height: 1.4;
}

.droptop-info-2 {
  position: relative;
  width: 100%;
}

.image-block-2 {
  -o-object-fit: cover;
  -o-object-position: left top;
  object-fit: cover;
  object-position: left top;
  opacity: 0.6;
  width: 100%;
  max-width: 90%;
  height: 600px;
  border-radius: 8px;
  background-clip: padding-box;
}

.text-block-r {
  position: absolute;
  top: 50%;
  left: 69%;
  width: 50%;
  max-width: 1000px;
  padding: 10px;
  border-style: solid;
  border-color: #43ff64;
  background-color: rgba(0, 0, 0, 0.7019607843);
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background-clip: padding-box;
}

.text-block-r h1 {
  padding-bottom: 10px;
  color: #43ff64;
  font-size: 40px;
}

.text-block-r p {
  padding-bottom: 10px;
  color: #ffffff;
  line-height: 1.4;
}

.droptop-info-3 {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.slideshow-container-1 {
  width: 90%;
  border-radius: 8px;
  background-clip: padding-box;
}

.slideshow-container-2 {
  position: relative;
  padding: 10px;
  border-style: solid;
  border-color: #43ff64;
  border-radius: 8px;
  background-clip: padding-box;
}

.Slide {
  display: none;
}

.Slide img {
  -o-object-fit: cover;
  -o-object-position: left top;
  object-fit: cover;
  object-position: left top;
  border-radius: 8px;
  background-clip: padding-box;
}

.fade {
  animation: fadein 0.75s 0s, fadeout 0.5s 3s;
}

.fade2 {
  animation: fadein 0.2s 0s, fadeout 0.25s 3.3s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.theme-number {
  z-index: 500;
  position: absolute;
  top: 2px;
  padding: 8px 12px;
  color: #b0b2b8;
  font-size: 12px;
}

.prev,
.next {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  display: inline;
  position: relative;
  width: auto;
  padding: 12px;
  color: #ffffff;
  font-weight: bold;
  font-size: 18px;
  user-select: none;
  transition: 0.6s ease;
  border-radius: 8px;
  background-clip: padding-box;
}

@media (hover: hover) {

  .prev:hover,
  .prev:active,
  .next:hover,
  .next:active {
    background-color: rgba(0, 0, 0, 0.8);
  }
}

.theme-name {
  display: inline;
  position: relative;
  width: 100%;
  padding: 8px 12px;
  color: #b0b2b8;
  font-size: 15px;
  text-align: center;
}

.text-block-s {
  position: inherit;
  width: 75%;
  margin-top: 10px;
}

.text-block-s h1 {
  padding-bottom: 10px;
  color: #43ff64;
  font-size: 40px;
}

.text-block-s p {
  padding-bottom: 10px;
  color: #ffffff;
  line-height: 1.4;
}

.droptop-info-4 {
  position: relative;
  width: 100%;
}

.image-block-4 {
  -o-object-fit: cover;
  -o-object-position: right top;
  object-fit: cover;
  object-position: right top;
  opacity: 0.6;
  width: 100%;
  max-width: 90%;
  height: 600px;
  border-radius: 8px;
  background-clip: padding-box;
}

.droptop-info-5 {
  position: relative;
  width: 100%;
}

.image-block-5 {
  -o-object-fit: cover;
  -o-object-position: left top;
  object-fit: cover;
  object-position: left top;
  opacity: 0.6;
  width: 100%;
  max-width: 90%;
  height: 600px;
  border-radius: 8px;
  background-clip: padding-box;
}

.droptop-info-6 {
  position: relative;
  width: 100%;
}

.image-block-6 {
  -o-object-fit: cover;
  -o-object-position: center center;
  object-fit: cover;
  object-position: center center;
  opacity: 0.6;
  width: auto;
  max-width: 90%;
  height: auto;
  border-radius: 8px;
  background-clip: padding-box;
}

.discord-invite {
  text-align: center;
}

.discord-invite img {
  border-radius: 8px;
  background-clip: padding-box;
}

@media screen and (max-width: 1160px) {
  .home-banner {
    padding-top: 30px;
  }

  .home-banner-title h2 {
    width: 100%;
    margin-bottom: 15px;
    padding-left: 0%;
  }

  .home-banner-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .home-banner-title {
    width: 100%;
    margin-bottom: 20px;
  }

  .home-banner-title h1 {
    position: relative;
    top: -25px;
    width: 100%;
    margin-bottom: 0px;
    text-align: center;
  }

  .home-banner-title h2 {
    width: 100%;
    margin-bottom: 15px;
    padding-left: 0%;
  }

  .home-button-container {
    margin-top: 20px;
  }

  .home-download-button {
    position: inherit;
    top: 10px;
    padding: 21px 30px;
    font-size: 30px;
    transform: translateY(0);
  }

  .home-container {
    min-height: auto;
  }

  .droptop-info-1 {
    padding-top: 35px;
    border-style: solid;
    border-color: #43ff64;
    border-radius: 8px;
    background-clip: padding-box;
  }

  .image-block-1 {
    opacity: 1;
    height: 200px;
  }

  .text-block-c {
    position: inherit;
    top: 0;
    left: 50%;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    transform: translateX(-50%);
  }

  .droptop-info-2 {
    padding-top: 35px;
    border-style: solid;
    border-color: #43ff64;
    border-radius: 8px;
    background-clip: padding-box;
  }

  .image-block-2 {
    opacity: 1;
    height: 200px;
  }

  .text-block-r {
    position: inherit;
    top: 0;
    left: 50%;
    width: 75%;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    transform: translateX(-50%);
  }

  .droptop-info-3 {
    padding: 0 10px;
    border-style: solid;
    border-color: #43ff64;
    border-radius: 8px;
    background-clip: padding-box;
  }

  .slideshow-container-2 {
    border: none;
  }

  .Slide img {
    -o-object-fit: cover;
    -o-object-position: left top;
    object-fit: cover;
    object-position: left top;
    width: auto;
    height: 100px;
  }

  .droptop-info-4 {
    padding-top: 35px;
    border-style: solid;
    border-color: #43ff64;
    border-radius: 8px;
    background-clip: padding-box;
  }

  .image-block-4 {
    opacity: 1;
    height: 200px;
  }

  .droptop-info-5 {
    padding-top: 35px;
    border-style: solid;
    border-color: #43ff64;
    border-radius: 8px;
    background-clip: padding-box;
  }

  .image-block-5 {
    opacity: 1;
    height: 200px;
  }

  .droptop-info-6 {
    padding-top: 35px;
    border-style: solid;
    border-color: #43ff64;
    border-radius: 8px;
    background-clip: padding-box;
  }

  .image-block-6 {
    opacity: 1;
    height: 200px;
  }
}

@media screen and (max-width: 720px) {
  .home-banner {
    padding: 0px 30px;
  }

  .home-banner-title h1 {
    font-size: 50px;
  }

  .home-banner-title h2 {
    font-size: 25px;
  }

  .home-container {
    padding: 0px 30px;
  }

  .home-download-button {
    font-size: 25px;
  }

  .Slide img {
    -o-object-fit: cover;
    -o-object-position: left top;
    object-fit: cover;
    object-position: left top;
    width: auto;
    height: 100px;
  }
}

@media screen and (max-width: 480px) {
  .home-banner {
    padding: 0px 15px;
  }

  .showcase-container img {
    max-width: 100%;
  }

  .home-banner-text {
    width: 100%;
  }

  .home-banner-text h1 {
    font-size: 45px;
  }

  .home-container {
    padding: 0px 15px;
  }

  .text-block-c {
    width: 100%;
  }

  .text-block-c p {
    line-height: 1.2;
  }

  .text-block-r {
    width: 100%;
  }

  .text-block-r p {
    line-height: 1.2;
  }

  .Slide img {
    -o-object-fit: cover;
    -o-object-position: left top;
    object-fit: cover;
    object-position: left top;
    width: auto;
    height: 100px;
  }

  .text-block-s {
    width: 100%;
  }

  .text-block-s p {
    line-height: 1.2;
  }
}

/* ----- DOWNLOAD PAGE ----- */
.download-contents {
  display: flex;
  left: 50%;
  flex-direction: column;
  align-items: center;
  align-content: center;
  width: 90%;
  max-width: 2500px;
  margin-top: 10vh;
  margin-right: auto;
  margin-left: auto;
}

.download-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  max-width: 90%;
  height: -moz-max-content;
  height: max-content;
  color: #ffffff;
  font-size: 20px;
}

.download-card {
  -webkit-backdrop-filter: blur(5px);
  -webkit-box-shadow: 0 0 10px rgba(67, 255, 102, 0.3019607843);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  width: 40%;
  margin: 30px;
  padding: 30px;
  border-radius: 20px;
  background-clip: padding-box;
  border-style: solid;
  border-color: #155b22;
  text-align: center;
  background-color: rgba(67, 255, 100, 0.1490196078);
  box-shadow: 0 0 10px rgba(67, 255, 102, 0.3019607843);
}

.download-card:hover {
  -webkit-box-shadow: 0 0 10px #43ff66;
  border-color: #43ff64;
  box-shadow: 0 0 10px #43ff66;
}

.download-card-image img {
  width: 60px;
}

.download-card-title {
  align-self: left;
  margin-top: 30px;
  margin-bottom: 10px;
  margin-left: 10%;
  font-weight: bold;
  text-align: left;
  text-shadow: 2px 2px 6px rgba(17, 13, 13, 0.8);
}

.download-card-price {
  align-self: left;
  margin-left: 10%;
  color: #b0b2b8;
  font-size: 60px;
  text-align: left;
  text-shadow: 2px 2px 6px rgba(17, 13, 13, 0.8);
}

.download-card-price-supporter {
  align-self: left;
  margin-left: 10%;
  color: #43ff64;
  font-size: 60px;
  text-align: left;
  text-shadow: 2px 2px 6px rgba(17, 13, 13, 0.8);
}

.download-button {
  align-self: center;
  width: 80%;
  margin: 40px 0;
  padding: 15px 40px;
  border: none;
  color: #181820;
  font-weight: 600;
  font-size: 25px;
  line-height: 1.8;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  background-clip: padding-box;
  background-color: #27af40;
}

.download-button:hover {
  -webkit-box-shadow: 0 0 10px #43ff66;
  background-color: #43ff64;
  box-shadow: 0 0 10px #43ff66;
  transition: 0.3s ease;
}

.download-button:active {
  -webkit-box-shadow: 0 0 10px #43ff66;
  background-color: #43ff64;
  box-shadow: 0 0 10px #43ff66;
  transition: 0.3s ease;
}

.download-counter {
  align-self: center;
  margin-bottom: 30px;
  color: #b0b2b8;
  font-size: 20px;
  text-align: center;
}

.sales-counter {
  align-self: center;
  margin-bottom: 30px;
  color: #b0b2b8;
  font-size: 20px;
  text-align: center;
}

.download-card-infos {
  height: 30px;
  margin-bottom: 30px;
  margin-left: 10%;
  font-size: 20px;
  text-align: left;
  text-shadow: 2px 2px 6px rgba(17, 13, 13, 0.8);
}

.download-update-container {
  justify-content: center;
  margin-top: 20px;
  padding: 0px 65px;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
}

.download-alert-title {
  color: #43ff64;
}

.download-alert-text {
  color: #b0b2b8;
}

.agent-alert-title {
  color: #d5273e;
}

.agent-alert-text {
  color: #b0b2b8;
}

@media screen and (min-width: 1580px) {
  .download-card {
    font-size: 300%;
  }

  .download-card-infos {
    font-size: 50%;
  }
}

@media screen and (max-width: 1160px) {
  .download-container {
    max-width: 100%;
    min-height: auto;
  }

  .download-card {
    width: 40%;
  }

  .download-button {
    font-size: 20px;
  }
}

@media screen and (max-width: 720px) {
  .download-container {
    flex-direction: column;
  }

  .download-card {
    align-self: center;
    width: 60%;
  }

  .download-button {
    margin: 20px 0;
  }

  .download-cost {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .download-card {
    width: 90%;
  }
}

@media screen and (max-width: 360px) {
  .download-card {
    width: 90%;
  }

  .download-cost {
    font-size: 10px;
  }
}

/* ----- UPDATE PAGE ----- */
.update-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  margin-top: 10vh;
  left: 50%;
  width: 90%;
  max-width: 2500px;
  margin-right: auto;
  margin-left: auto;
}

.update-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  color: #ffffff;
  font-size: 30px;
}

.update-button-container {
  display: flex;
  flex-direction: column;
  width: 30%;
  margin: 30px;
  padding: 30px;
  text-align: center;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  background-color: rgba(13, 13, 17, 0.3);
  border-radius: 20px;
  background-clip: padding-box;
}

.update-card {
  -webkit-backdrop-filter: blur(5px);
  -webkit-box-shadow: 0 0 10px rgba(67, 255, 102, 0.3019607843);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  width: 30%;
  margin: 30px;
  padding: 30px;
  border-radius: 20px;
  background-clip: padding-box;
  border-style: solid;
  border-color: #155b22;
  text-align: center;
  background-color: rgba(67, 255, 100, 0.1490196078);
  box-shadow: 0 0 10px rgba(67, 255, 102, 0.3019607843);
}

.update-card:hover {
  -webkit-box-shadow: 0 0 10px #43ff66;
  border-color: #43ff64;
  box-shadow: 0 0 10px #43ff66;
}

.update-card-title {
  align-self: left;
  margin-top: 30px;
  margin-bottom: 10px;
  margin-left: 10%;
  font-weight: bold;
  text-align: left;
  text-shadow: 2px 2px 6px rgba(17, 13, 13, 0.8);
}

.update-card-image img {
  width: 60px;
  margin-bottom: auto;
}

.update-card-infos {
  align-self: left;
  margin-bottom: 20px;
  margin-left: 10%;
  color: #b0b2b8;
  font-size: 20px;
  text-align: left;
  text-shadow: 2px 2px 6px rgba(17, 13, 13, 0.8);
}

.update-button {
  align-self: center;
  width: 80%;
  margin: 40px 0;
  padding: 15px 40px;
  border: none;
  color: #181820;
  font-weight: 600;
  font-size: 25px;
  line-height: 1.8;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  background-clip: padding-box;
  background-color: #27af40;
}

.update-button:hover {
  -webkit-box-shadow: 0 0 10px #43ff66;
  background-color: #43ff64;
  box-shadow: 0 0 10px #43ff66;
  transition: 0.3s ease;
}

.update-button:active {
  -webkit-box-shadow: 0 0 10px #43ff66;
  background-color: #43ff64;
  box-shadow: 0 0 10px #43ff66;
  transition: 0.3s ease;
}

@media screen and (max-width: 1160px) {
  .update-container {
    min-height: auto;
  }

  .update-card {
    width: 40%;
  }

  .update-button {
    font-size: 20px;
  }
}

@media screen and (max-width: 720px) {
  .update-container {
    flex-direction: column;
  }

  .update-card {
    align-self: center;
    width: 60%;
  }

  .update-button {
    margin: 20px 0;
  }

  .update-cost {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .update-card {
    width: 90%;
  }
}

@media screen and (max-width: 360px) {
  .update-card {
    width: 90%;
  }

  .update-cost {
    font-size: 10px;
  }
}

/* ----- DIRECT DOWNLOAD PAGE ----- */
.direct-download-title {
  color: #43ff64;
}

.direct-download-contents {
  display: flex;
  left: 50%;
  flex-direction: column;
  align-items: center;
  align-content: center;
  width: 90%;
  max-width: 2500px;
  margin-top: 10vh;
  margin-right: auto;
  margin-left: auto;
}

.direct-download-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.4;
  text-align: center;
}

.direct-download-suppport {
  margin-top: 10px;
  color: #43ff64;
  line-height: 2;
}

@media screen and (max-width: 1160px) {
  .direct-download-container {
    max-width: 100%;
    min-height: auto;
  }
}

/* ----- COMMUNITY APPS PAGE ----- */
.community-apps-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(20px + 10vh);
  padding-top: 50px;
  color: #43ff64;
  font-size: 50px;
}

.community-apps-banner h1 {
  text-align: center;
}

.community-apps-contents {
  left: 50%;
  width: 100%;
  max-width: 2500px;
  margin-right: auto;
  margin-left: auto;
}

.app-making {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
}

.sorting-options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.sorting-options label {
  color: #43ff64;
}

.sorting-options select {
  margin-left: 10px;
  padding: 6px;
  border: solid 2px;
  border-color: #43ff64;
  border-radius: 8px;
  font-size: 15px;
  background-color: #b0b2b8;
}

.appsList {
  grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
  display: grid;
}

.appsList div {
  margin-bottom: 20px;
}

.app-card {
  -webkit-backdrop-filter: blur(5px);
  -webkit-box-shadow: 0 0 10px rgba(67, 255, 102, 0.3019607843);
  backdrop-filter: blur(5px);
  position: relative;
  left: 50%;
  max-width: 500px;
  padding-top: 20px;
  padding-bottom: 5px;
  border-style: solid;
  border-radius: 25px;
  background-clip: padding-box;
  border-color: #155b22;
  text-align: center;
  background-color: rgba(67, 255, 100, 0.1490196078);
  box-shadow: 0 0 10px rgba(67, 255, 102, 0.3019607843);
  transform: translateX(-50%);
}

.app-card:hover {
  -webkit-box-shadow: 0 0 10px #43ff66;
  border-color: #43ff64;
  background-color: rgba(67, 255, 100, 0.3019607843);
  box-shadow: 0 0 10px #43ff66;
}

.app-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.app-card-name {
  margin: 10px;
  color: #43ff64;
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
  text-shadow: 2px 2px 6px #110d0d;
}

.app-card-share {
  z-index: 100;
  color: #43ff64;
  font-size: 20px;
  text-shadow: 2px 2px 6px #110d0d;
  cursor: pointer;
}

.app-share-button {
  height: 20px;
  filter: brightness(0) saturate(100%) invert(90%) sepia(77%) saturate(676%) hue-rotate(55deg) brightness(103%) contrast(104%);
  -webkit-filter: brightness(0) saturate(100%) invert(90%) sepia(77%) saturate(676%) hue-rotate(55deg) brightness(103%) contrast(104%);
}

.tooltip-share {
  position: absolute;
  top: 15px;
  right: 15px;
}

.tooltip-share .tooltiptext-share {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  position: absolute;
  bottom: 150%;
  left: 50%;
  width: 140px;
  margin-left: -75px;
  padding: 5px;
  border-style: solid;
  border-color: #155b22;
  border-radius: 6px;
  color: #43ff64;
  text-align: center;
  background-color: #181820;
  transition: opacity 0.3s;
}

.tooltip-share .tooltiptext-share::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(67, 255, 102, 0.3019607843) transparent transparent transparent;
  content: "";
}

.tooltip-share:hover .tooltiptext-share {
  opacity: 1;
  visibility: visible;
}

.app-card-version {
  opacity: 0.5;
  margin-bottom: 10px;
  color: #b0b2b8;
  text-shadow: 2px 2px 6px #110d0d;
}

.app-card-image {
  opacity: 0.8;
  width: 80%;
  height: auto;
  margin-top: 20px;
  border-radius: 8px;
  background-clip: padding-box;
  cursor: pointer;
}

.app-card-author {
  color: #b0b2b8;
  text-shadow: 2px 2px 6px #110d0d;
}

.app-card-author-link {
  color: #b0b2b8;
}

.app-card-desc {
  align-items: center;
  max-width: 90%;
  padding: 10px 10px;
  color: #ffffff;
  line-height: 1.4;
  text-align: center;
  text-shadow: 2px 2px 6px #110d0d;
}

.tooltip-downloads {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted rgba(176, 178, 184, 0.5019607843);
}

.tooltip-downloads .tooltiptext-downloads {
  visibility: hidden;
  padding: 5px 0;
  border-radius: 6px;
  color: #b0b2b8;
  text-align: center;
  background-color: #181820;
  width: 200px;
  bottom: 100%;
  left: 50%;
  margin-left: -100px;
  position: absolute;
  z-index: 1;
}

.app-card-downloads {
  color: rgba(176, 178, 184, 0.5019607843);
  text-shadow: 2px 2px 6px #110d0d;
}

.tooltip-downloads:hover .tooltiptext-downloads {
  visibility: visible;
}

.app-card-buttons {
  padding: 0 5px;
}

.app-card-button {
  display: inline-block;
  margin: 20px 2px 0 2px;
  padding: 10px;
  border: none;
  color: #43ff64;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: rgba(24, 24, 32, 0.6);
  border-radius: 10px;
  background-clip: padding-box;
}

.app-card-button:hover {
  color: #ffffff;
  background-color: rgba(57, 57, 57, 0.7137254902);
  transition: 0.3s ease;
}

.app-card-button:active {
  color: #ffffff;
  background-color: rgba(57, 57, 57, 0.7137254902);
  transition: 0.3s ease;
}

.app-card-button:focus {
  outline: none;
}

@media screen and (max-width: 1580px) {
  .appsList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 1160px) {
  .community-apps-banner {
    padding-top: 80px;
  }

  .appsList {
    grid-template-columns: repeat(1, 1fr);
  }

  .create-an-app-banner {
    padding-top: 80px;
  }
}

@media screen and (max-width: 480px) {
  .app-making p {
    width: 90%;
  }

  .app-card {
    max-width: 90%;
  }

  .community-apps-banner-text {
    font-size: 38px;
  }

  .create-an-app-banner-text {
    font-size: 38px;
  }
}

/* ----- COMMUNITY THEMES PAGE ----- */
.community-themes-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(20px + 10vh);
  padding-top: 50px;
  color: #43ff64;
  font-size: 50px;
}

.community-themes-banner h1 {
  text-align: center;
}

.community-themes-contents {
  left: 50%;
  width: 100%;
  max-width: 2500px;
  margin-right: auto;
  margin-left: auto;
}

.theme-making {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  color: #84858a;
  font-size: 18px;
  text-align: center;
}

.theme-making p {
  width: 90%;
}

.sorting-options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.sorting-options label {
  color: #43ff64;
}

.sorting-options select {
  margin-left: 10px;
  padding: 6px;
  border: solid 2px;
  border-color: #43ff64;
  border-radius: 8px;
  font-size: 15px;
  background-color: #b0b2b8;
}

.themesList {
  grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
  display: grid;
}

.themesList div {
  margin-bottom: 20px;
}

.theme-card {
  -webkit-backdrop-filter: blur(5px);
  -webkit-box-shadow: 0 0 10px rgba(67, 255, 102, 0.3019607843);
  backdrop-filter: blur(5px);
  position: relative;
  left: 50%;
  max-width: 500px;
  padding-top: 20px;
  padding-bottom: 5px;
  border-style: solid;
  border-color: #155b22;
  border-radius: 25px;
  background-clip: padding-box;
  font-family: arial;
  text-align: center;
  background-color: rgba(67, 255, 100, 0.1490196078);
  box-shadow: 0 0 10px rgba(67, 255, 102, 0.3019607843);
  transform: translateX(-50%);
}

.theme-card:hover {
  -webkit-box-shadow: 0 0 10px #43ff66;
  border-color: #43ff64;
  background-color: rgba(67, 255, 100, 0.3019607843);
  box-shadow: 0 0 10px #43ff66;
}

.theme-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.theme-card-name {
  margin: 10px;
  color: #43ff64;
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
  text-shadow: 2px 2px 6px #110d0d;
}

.theme-card-share {
  z-index: 100;
  color: #43ff64;
  font-size: 20px;
  text-shadow: 2px 2px 6px #110d0d;
  cursor: pointer;
}

.theme-share-button {
  height: 20px;
  filter: brightness(0) saturate(100%) invert(90%) sepia(77%) saturate(676%) hue-rotate(55deg) brightness(103%) contrast(104%);
  -webkit-filter: brightness(0) saturate(100%) invert(90%) sepia(77%) saturate(676%) hue-rotate(55deg) brightness(103%) contrast(104%);
}

.tooltip {
  position: absolute;
  top: 15px;
  right: 15px;
}

.tooltip-share .tooltiptext-share {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  position: absolute;
  bottom: 150%;
  left: 50%;
  width: 140px;
  margin-left: -75px;
  padding: 5px;
  border-style: solid;
  border-color: #155b22;
  border-radius: 6px;
  color: #43ff64;
  text-align: center;
  background-color: #181820;
  transition: opacity 0.3s;
}

.tooltip-share .tooltiptext-share::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(67, 255, 102, 0.3019607843) transparent transparent transparent;
  content: "";
}

.tooltip-share:hover .tooltiptext-share {
  opacity: 1;
  visibility: visible;
}

.theme-card-image {
  width: 80%;
  height: auto;
  margin-top: 20px;
  border-radius: 8px;
  background-clip: padding-box;
  cursor: pointer;
}

.theme-card-author {
  color: #b0b2b8;
  text-shadow: 2px 2px 6px #110d0d;
}

.theme-card-author-link {
  color: #b0b2b8;
  text-shadow: 2px 2px 6px #110d0d;
}

.theme-card-desc {
  align-items: center;
  max-width: 90%;
  padding: 10px 10px;
  color: #ffffff;
  line-height: 1.4;
  text-align: center;
  text-shadow: 2px 2px 6px #110d0d;
}

.tooltip-downloads {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted rgba(176, 178, 184, 0.5019607843);
}

.tooltip-downloads .tooltiptext-downloads {
  visibility: hidden;
  padding: 5px 0;
  border-radius: 6px;
  color: #b0b2b8;
  text-align: center;
  background-color: #181820;
  width: 200px;
  bottom: 100%;
  left: 50%;
  margin-left: -100px;
  position: absolute;
  z-index: 1;
}

.theme-card-downloads {
  color: #b0b2b8;
  text-shadow: 2px 2px 6px #110d0d;
}

.tooltip-downloads:hover .tooltiptext-downloads {
  visibility: visible;
}

.theme-card-buttons {
  padding: 0 5px;
}

.theme-card-button {
  display: inline-block;
  margin: 20px 2px 0 2px;
  padding: 10px;
  border: none;
  color: #43ff64;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: rgba(24, 24, 32, 0.6);
  border-radius: 10px;
  background-clip: padding-box;
}

.theme-card-button:hover {
  color: #ffffff;
  background-color: rgba(57, 57, 57, 0.7137254902);
  transition: 0.3s ease;
}

.theme-card-button:active {
  color: #ffffff;
  background-color: rgba(57, 57, 57, 0.7137254902);
  transition: 0.3s ease;
}

.theme-card-button:focus {
  outline: none;
}

@media screen and (max-width: 1580px) {
  .themesList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 1160px) {
  .community-themes-banner {
    padding-top: 80px;
  }

  .themesList {
    grid-template-columns: repeat(1, 1fr);
  }

  .create-a-theme-banner {
    padding-top: 80px;
  }
}

@media screen and (max-width: 480px) {
  .theme-card {
    max-width: 90%;
  }

  .community-themes-banner-text {
    font-size: 38px;
  }

  .create-a-theme-banner-text {
    font-size: 38px;
  }
}

/* ----- CHANGELOG PAGE ----- */
.changelog-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(20px + 10vh);
  padding-top: 50px;
  color: #43ff64;
  font-size: 50px;
}

.changelog-banner h1 {
  text-align: center;
}

.changelog-contents {
  left: 50%;
  width: 90%;
  max-width: 2500px;
  margin-right: auto;
  margin-left: auto;
}

.changenotesList div {
  margin-bottom: 20px;
}

.changenote-card {
  position: relative;
  left: 50%;
  max-width: 700px;
  color: #ffffff;
  transform: translateX(-50%);
}

.changenote-card h2 {
  margin-bottom: 2%;
}

.changenote-card ol li,
.changenote-card ul li {
  margin-top: 2%;
  margin-left: 4%;
}

@media screen and (max-width: 1160px) {
  .changelog-banner {
    padding-top: 80px;
  }
}

@media screen and (max-width: 480px) {
  .changenote-card {
    max-width: 90%;
  }

  .changelog-banner-text {
    font-size: 38px;
  }
}

/* ----- SEARCH PAGE ----- */
.ribbon-app {
  position: absolute;
  top: 35px;
  right: 25px;
  width: 60px;
  padding: 4px;
  border-radius: 25px;
  color: white;
  font-size: 14px;
  text-align: center;
  background-color: #ff9800;
  transform: rotate(45deg);
}

.ribbon-theme {
  position: absolute;
  top: 35px;
  right: 25px;
  width: 60px;
  padding: 4px;
  border-radius: 25px;
  color: black;
  font-size: 14px;
  text-align: center;
  background-color: #00e5ff;
  transform: rotate(45deg);
}

.search-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(20px + 10vh);
  padding-top: 50px;
  color: #43ff64;
  font-size: 50px;
}

.search-banner h1 {
  text-align: center;
}

.search-contents {
  left: 50%;
  width: 90%;
  max-width: 2500px;
  margin-right: auto;
  margin-left: auto;
}

.search-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.search-bar input[type=search] {
  padding: 6px;
  border: solid 2px;
  border-color: #43ff64;
  border-radius: 8px;
  font-size: 20px;
  margin-right: 20px;
}

.search-bar input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
  background-size: 10px 10px;
  cursor: pointer;
}

.search-bar button {
  margin-left: 20px;
  padding: 6px 10px;
  border: solid 2px;
  border-color: #43ff64;
  border-radius: 8px;
  color: #43ff64;
  cursor: pointer;
  background: #0d0d11;
  display: flex;
}

.search-button {
  height: 24px;
  filter: brightness(0) saturate(100%) invert(90%) sepia(77%) saturate(676%) hue-rotate(55deg) brightness(103%) contrast(104%);
  -webkit-filter: brightness(0) saturate(100%) invert(90%) sepia(77%) saturate(676%) hue-rotate(55deg) brightness(103%) contrast(104%);
}

.searchList {
  grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
  display: grid;
}

.searchList div {
  margin-bottom: 20px;
}

@media screen and (max-width: 1580px) {
  .searchList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 1160px) {
  .search-banner {
    padding-top: 80px;
  }

  .searchList {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .search-banner-text {
    font-size: 38px;
  }
}

/* ----- PRIVACY POLICY PAGE ----- */
.privacy-policy-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(20px + 10vh);
  padding-top: 50px;
  color: #43ff64;
  font-size: 50px;
}

.privacy-policy-banner h1 {
  text-align: center;
}

.privacy-policy-contents {
  display: block;
  left: 50%;
  width: 60%;
  max-width: 2000px;
  min-height: auto;
  margin-right: auto;
  margin-left: auto;
  padding: 20px;
  color: #ffffff;
}

.privacy-policy-section {
  margin-bottom: 10px;
  padding: 20px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(13, 13, 17, 0.15);
  border-radius: 25px;
  background-clip: padding-box;
}

.last-updated {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #84858a;
  font-size: 15px;
}

.privacy-policy-contents h2 {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #43ff64;
  font-size: 30px;
}

.privacy-policy-contents h3 {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #43ff64;
  font-size: 25px;
}

.privacy-policy-contents h4 {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #43ff64;
  font-size: 20px;
}

.privacy-policy-contents p {
  padding-top: 10px;
  padding-bottom: 10px;
}

.privacy-policy-contents ul {
  padding-left: 25px;
}

@media screen and (max-width: 1160px) {
  .privacy-policy-banner {
    padding-top: 80px;
  }
}

@media screen and (max-width: 480px) {
  .privacy-policy-banner-text {
    font-size: 38px;
  }
}

@media screen and (max-width: 360px) {
  .privacy-policy-banner-text {
    font-size: 30px;
  }
}

html {
  height: 100%;
  scroll-behavior: smooth;
  width: auto !important;
  overflow-x: hidden;
  scroll-padding-top: 120px;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Urbanist", sans-serif;
}

body {
  background-color: #181820;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/*# sourceMappingURL=style.css.map */