* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #000A22;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex; 
  flex-direction: row;
}


button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.sidebar {
  position: relative; 
  flex: 0 0 260px;
  margin-left: 100px;
  margin-right: 50px;
  margin-bottom: 50px;
  top: 24px;
  left: 0;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 16px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 8%);
  background: rgba(255, 255, 255, 0.068);
  backdrop-filter: blur(20px);
  
}

.sidebar header {
  display: flex;
  align-items: center;
  height: 72px;
  padding: 0 1.25rem 0 0;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.sidebar header button {
  width: 52px;
}

.sidebar header img {
  height: 24px;
}

.sidebar button {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;
  height: 50px;
  width: 100%;
  border-radius: 6px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 0 16px;
  color: rgb(255 255 255 / 95%);
}

.sidebar button p:nth-child(2) {
  flex: 1 1 auto;
}

.sidebar button:is(.active, :hover) {
  background: rgb(0 0 0 / 30%);
}

.sidebar button i {
  transition: 0.3s;
}

.sidebar button.active > i:nth-child(3) {
  rotate: -180deg;
}

.sidebar button:not(.active):hover {
  background: rgb(0 0 0 / 10%);
}

.sidebar ul {
  display: grid;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.sub-menu {
  position: relative;
  overflow: hidden;
  height: 0;
  transition: 0.5s;
}

.sub-menu ul {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
}

.sub-menu button {
  padding-left: 52px;
}

.sub-menu button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 24px;
  translate: 0 -50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgb(255 255 255 / 35%);
}

.sidebar .material-symbols-outlined {
  font-size: 16px;
}

.sidebar i {
  font-size: 20px;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
}

.maincontent {
  flex: 1; 
  margin: 24px 16px; 
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.068);
  color: rgb(255 255 255 / 95%);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  overflow-y: auto;
  margin-right: 100px;
}

.welcome {
  text-align: center;
}

.welcome > .loader {
  display: flex;
  justify-content: center;
}


.desc > p {
  border: 3px solid rgb(255, 255, 255);
  border-radius: 20px;
  padding: 20px;
  margin: 20px 10px;
}


.hidden {
  color: #000A22;
  text-decoration: none;
  font-size: xx-small;
  margin: 0;
}

/* Anime Slider */
.container {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 1em;
	width: 800px;
	height: 500px;
	transition: all 400ms;
  max-width: 75rem;
  padding: 3em 1.5em;
}

.container:hover .box {
	filter: grayscale(100%) opacity(24%);
}

.box {
	position: relative;
	background: var(--img) center center;
	background-size: cover;
	transition: all 400ms;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container .box:hover {
	filter: grayscale(0%) opacity(100%);
}

.container:has(.box-1:hover) {
	grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
}

.container:has(.box-2:hover) {
	grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
}

.container:has(.box-3:hover) {
	grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
}

.container:has(.box-4:hover) {
	grid-template-columns: 1fr 1fr 1fr 3fr 1fr;
}

.container:has(.box-5:hover) {
	grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
}

.box:nth-child(odd) {
	transform: translateY(-16px);
}

.box:nth-child(even) {
	transform: translateY(16px);
}

.box::after {
	content: attr(data-text);
	position: absolute;
	bottom: 20px;
	background: #000;
	color: #fff;
	padding: 10px 10px 10px 14px;
	letter-spacing: 4px;
	text-transform: uppercase;
	transform: translateY(60px);
	opacity: 0;
	transition: all 400ms;
}

.box:hover::after {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 400ms;
}

.hidden {
  color: inherit;
  text-decoration: none;
  text-align: right;
}


/* Version Box */
.grid.grid.two-col > div {
  height: 72px;
  width: 88px;
}

.frame {
  translate: 0 10px;
}

.frame header {
  top: -60px;
}

.frame h3 {
  bottom: -24px;
}

html.modal-active,
body.modal-active {
  overflow: hidden;
}

#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 1;
  color: #222222;
}

#modal-container.six {
  transform: scale(1);
}
#modal-container.six .modal-background {
  background: rgba(252, 1, 1, 0);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.six .modal-background .modal {
  background-color: transparent;
  animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.six .modal-background .modal h2,
#modal-container.six .modal-background .modal p {
  opacity: 0;
  position: relative;
  animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}
#modal-container.six .modal-background .modal .modal-svg rect {
  animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.six.out {
  animation: quickScaleDown 0s 0.5s linear forwards;
}
#modal-container.six.out .modal-background {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.six.out .modal-background .modal {
  animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.six.out .modal-background .modal h2,
#modal-container.six.out .modal-background .modal p {
  animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}
#modal-container.six.out .modal-background .modal .modal-svg rect {
  animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container .modal-background {
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: middle;
}
#modal-container .modal-background .modal {
  background: #000000;
  width: 226px;
  height: 162px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  font-weight: 300;
  position: relative;
}
#modal-container .modal-background .modal h2 {
  font-size: 25px;
  line-height: 25px;
  margin-bottom: 0px;
  color: #f9f9f9;
}
#modal-container .modal-background .modal p {
  font-size: 18px;
  line-height: 22px;
  color: lightgreen;
}
#modal-container .modal-background .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}
#modal-container .modal-background .modal .modal-svg rect {
  stroke: #00ffb7;
  stroke-width: 2px;
  stroke-dasharray: 778;
  stroke-dashoffset: 778;
}

#modal-container.side {
  transform: scale(1);
}

#modal-container.side .modal {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 240px;
  position: fixed;
  right: 0;
  top: 0;
  border-radius: 0;
  transform: scale(1);
  padding: 0;
  left: auto;
}

#modal-container.side .modal .modal-background {
  transform: scale(1);
}

#modal-container.side {
  animation: sideIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.side .modal-background .modal {
  animation: sideModalIn 0.75s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.side.out {
  transform: scale(1);
  animation: sideOut 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.side.out .modal-background .modal {
  animation: sideModalOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes sideIn {
  0% {
    opacity: 0;
    background: rgba(0 0 0 / 0%);
  }
  100% {
    opacity: 1;
    background: rgba(0 0 0 / 50%);
  }
}

@keyframes sideOut {
  100% {
    opacity: 0;
    visibility: hidden;
    transform: scale(1);
  }
}

@keyframes sideModalIn {
  0% {
    opacity: 0;
    transform: scale(1) translateX(240px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

@keyframes sideModalOut {
  100% {
    transform: translateX(240px);
  }
}

@keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}
@keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.7);
  }
}
@keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, 0.7);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}
@keyframes scaleUp {
  0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}
@keyframes scaleDown {
  0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
}
@keyframes scaleBack {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.85);
  }
}
@keyframes scaleForward {
  0% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes quickScaleDown {
  0% {
    transform: scale(1);
  }
  99.9% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes slideUpLarge {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes slideDownLarge {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes moveUp {
  0% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes moveDown {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(150px);
  }
}
@keyframes blowUpContent {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  99.9% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(0);
  }
}
@keyframes blowUpContentTwo {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes blowUpModal {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blowUpModalTwo {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes roadRunnerIn {
  0% {
    transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
  }
  70% {
    transform: translateX(30px) skewX(0deg) scaleX(0.9);
  }
  100% {
    transform: translateX(0px) skewX(0deg) scaleX(1);
  }
}
@keyframes roadRunnerOut {
  0% {
    transform: translateX(0px) skewX(0deg) scaleX(1);
  }
  30% {
    transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
  }
  100% {
    transform: translateX(1500px) skewX(30deg) scaleX(1.3);
  }
}
@keyframes sketchIn {
  0% {
    stroke-dashoffset: 778;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes sketchOut {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 778;
  }
}
@keyframes modalFadeIn {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: #201e22;
  }
}
@keyframes modalFadeOut {
  0% {
    background-color: #201e22;
  }
  100% {
    background-color: transparent;
  }
}
@keyframes modalContentFadeIn {
  0% {
    opacity: 0;
    top: -20px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes modalContentFadeOut {
  0% {
    opacity: 1;
    top: 0px;
  }
  100% {
    opacity: 0;
    top: -20px;
  }
}
@keyframes bondJamesBond {
  0% {
    transform: translateX(1000px);
  }
  80% {
    transform: translateX(0px);
    border-radius: 75px;
    height: 75px;
    width: 75px;
  }
  90% {
    border-radius: 3px;
    height: 182px;
    width: 247px;
  }
  100% {
    border-radius: 3px;
    height: 162px;
    width: 227px;
  }
}
@keyframes killShot {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(240px) rotate(45deg);
    opacity: 0;
  }
}
@keyframes fadeToRed {
  0% {
    background-color: rgba(0, 0, 0, 0.6);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.8);
  }
}
@keyframes slowFade {
  0% {
    opacity: 1;
  }
  99.9% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}


/* welcome glitch animation */
.glitch {
  position: relative;
  font-size: 70px;
  font-weight: 700;
  line-height: 1.2;
  font-family: "Jersey 15";
  color: #fff;
  letter-spacing: 5px;
  z-index: 1;
  animation: shift 1s ease-in-out infinite alternate;
  display: flex;
  align-items: center;
}

.glitch:before,
.glitch:after {
  display: block;
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.glitch:before {
  animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  color: #8b00ff;
  z-index: -1;
}

.glitch:after {
  animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
  color: #00e571;
  z-index: -2;
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-3px, 3px);
  }

  40% {
    transform: translate(-3px, -3px);
  }

  60% {
    transform: translate(3px, 3px);
  }

  80% {
    transform: translate(3px, -3px);
  }

  to {
    transform: translate(0);
  }
}

@keyframes shift {
  0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
    transform: skewX(0deg);
  }

  41% {
    transform: skewX(10deg);
  }

  42% {
    transform: skewX(-10deg);
  }

  59% {
    transform: skewX(40deg) skewY(10deg);
  }

  60% {
    transform: skewX(-40deg) skewY(-10deg);
  }

  63% {
    transform: skewX(10deg) skewY(-5deg);
  }

  70% {
    transform: skewX(-50deg) skewY(-20deg);
  }

  71% {
    transform: skewX(10deg) skewY(-10deg);
  }
}