* {
  margin: 0;
  padding: 0;
  border-radius: 5px;
  border: none;
  transition: all .5s;
}

body {
  width: calc(100vw);
  height: 100svh;
  border-radius: 0%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(200deg,#CEF3FF,#DEC8FF,#FFD3D3,#CEFFEF);
  overflow: hidden;
}

div,.div{
  backdrop-filter: blur(20px);
  background: linear-gradient(#D3D3D363,#A6A6A68F);
  position: absolute;
  width: calc(300px);
  height: 300px;
  padding: 10px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  box-shadow: inset -2px -3px 20px #A9A9A9;
}

.input{
  padding: 0 10px;
  height: 50px;
  width: 82%;
}

.footer {
  border-radius: 0%;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 270px;
  height: 50px;
  position: relative;
}
.nav1{
  display: none;
}
.nav{
  display: flex;
  backdrop-filter: blur(5px);
  border: #FFFFFF solid .1px;
  width: 100%;
  height: 100%;
  position: absolute;
  font-weight: 900;
  font-size: 2rem;
  color: #F00B0B;
  justify-content: center;
  align-items: center;
  transition: all .5s;
}

.button{
  width: 50px;
  height: 50px;
  box-shadow: inset -2px -3px 1px #393F3FF0,
                    -2px -2px 20px #EAEAEA69,
              inset 3px 3px 5px #FFFFFF;
  font-size: 1.5rem;
  background: linear-gradient(135deg,#FFFFFF,#ADADAD);
}

.button:hover{
  transform: scale(1.1);
  transition: all .5s;
  }

.clr {
  /*box-shadow: none;*/
  font-size: 2rem;
  font-weight: 900;
  /*text-align: center;
  background: transparent;
  border: none;*/
}

.p{
  position: relative;
  display: flex;
  justify-content: end;
  align-items: center;
  height: 50px;
  background: #3B3B3B26;
  overflow: hidden;
  padding: 0 5%;
  width: calc(83% - 5%);
  color: #3B3B3B;
  font-size: 2rem;
  /*font-family: 'Roboto Mono', monospace;*/
  font-family: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;
}
.blink{
  animation: blink 1s infinite linear;
}
@keyframes blink{
  from{
    color: #FFFFFF00;
  }to{
    color: #3B3B3B;
  }
}

h2{
  font-family: "Nerko One", cursive;
  font-weight: 400;
  font-style: normal;
}

.block{
  display: none;
}

.ps{
  font-family: "Handjet", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "ELGR" 1,
    "ELSH" 2;
  background: transparent;
  display: block;
  color: #000000;
  font-size: 1rem;
  position: absolute;
  top: 20%;
  left: 10%;
  /*backdrop-filter: blur(5px);*/
  min-height: 10px;
  min-width: 10px;
  max-width: fit-content;
  padding: 1% 2%;
  z-index: 1;
}


/* themes */

/* Game Theme Styles */
.game-div {
  background-color: #003F7F; /* Dark blue for game feel */
  box-shadow: 0px 8px 15px rgba(0, 255, 255, 0.5); /* Vibrant shadow */
  border-radius: 20px;
}

.game-input {
  background-color: #0074d9; /* Bright blue for input */
  color: #fff;
  font-family: 'Press Start 2P', cursive;
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.8);
}

.game-p {
  color: #39cccc; /* Neon cyan for text */
  font-family: 'Press Start 2P', cursive;
  font-size: 1.5rem;
}

.game-screen {
  background-color: #333;
  color: #0ff; /* Neon cyan for screen */
  border: 2px solid #0ff;
  font-family: 'Press Start 2P', cursive;
  font-size: 1.8rem;
  padding: 15px;
  box-shadow: inset 0px 0px 10px rgba(0, 255, 255, 0.5);
  text-align: right;
}
.game-button {
  background: linear-gradient(135deg, #3C3C3C, #EF1D1C);
  box-shadow: inset -2px -3px 5px #2D2A2A, 
              -2px -2px 20px #EF1D1C, 
              inset 3px 3px 5px #2D2A2A;
}
/* Arcade Theme Styles */
.arcade-div {
  background-color: #FFFFFF00; /* Dark background for arcade feel */
  box-shadow: 0px 8px 15px rgba(255, 0, 255, 0.5); /* Vibrant shadow */
  border-radius: 20px;
}

.arcade-input {
  background-color: #ff0066; /* Bright pink for input */
  color: #fff;
  font-family: 'Press Start 2P', cursive; /* Retro arcade font */
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.8);
}

.arcade-p {
  color: #00ffcc; /* Neon green for text */
  font-family: 'Press Start 2P', cursive;
  font-size: 1.5rem;
}

.arcade-screen {
  background-color: #333;
  color: #0f0; /* Neon green for screen */
  border: 2px solid #0f0;
  font-family: 'Press Start 2P', cursive;
  font-size: 1.8rem;
  padding: 15px;
  box-shadow: inset 0px 0px 10px rgba(0, 255, 0, 0.5);
  text-align: right;
}
.arcade-button {
  background: linear-gradient(135deg, #FF7F00, #FFB000);
  box-shadow: inset -2px -3px 5px #FF5A00, 
              -2px -2px 20px #FFB000, 
              inset 3px 3px 5px #FF5A00;
}

/* Retro Theme Styles */
.retro-div {
  background-color: #FFCC00; /* Yellow for retro feel */
  box-shadow: 0px 8px 15px rgba(255, 255, 0, 0.5); /* Vibrant shadow */
  border-radius: 20px;
}

.retro-input {
  background-color: #FF0000; /* Bright red for input */
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
}

.retro-p{
  color: #00FFCC; /* Neon green for text */
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
}

.retro-screen {
  background-color: #333333;
  color: #00FF00; /* Green for retro text */
  border: 2px solid #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 1.8rem;
  padding: 15px;
  text-align: right;
}

.retro-button {
  background: linear-gradient(135deg, #ff0000, #ffcc00);
  box-shadow: inset -2px -3px 5px #2D2A2A, 
              -2px -2px 20px #ff0000, 
              inset 3px 3px 5px #2D2A2A;
}

/* MinimalistBW Theme Styles */
.minimalistbw-div {
  background-color: #FFFFFF; /* White background for minimalist BW feel */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  border-radius: 0px;
}

.minimalistbw-input {
  background-color: #000000; /* Black input */
  color: #ffffff; /* White text */
  font-family: 'Arial', sans-serif;
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
}

.minimalist-p{
  color: #00FFCC; /* Neon green for text */
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
}

.minimalistbw-screen {
  background-color: #ffffff;
  color: #000000; /* Black text */
  border: 2px solid #000000;
  font-family: 'Arial', sans-serif;
  font-size: 1.8rem;
  padding: 15px;
  text-align: right;
}

.minimalistbw-button {
  background: #000000;
  color: #ffffff;
  box-shadow: none;
}

/* Neon Glow Theme Styles */
.neon-div {
  background-color: #FFF8E5; /* Deep black for glow effect */
  box-shadow: 0px 8px 20px rgba(255, 20, 147, 0.7); /* Vibrant pink glow */
  border-radius: 20px;
}

.neon-input {
  background-color: #FF1493; /* Bright pink for input */
  color: #000;
  font-family: 'Orbitron', sans-serif; /* Futuristic font */
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
  box-shadow: 0px 0px 20px rgba(255, 20, 147, 0.7); /* Pink glow */
}

.neon-p {
  color: #39FF14; /* Neon green text */
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
}

.neon-screen {
  background-color: #101010;
  color: #39FF14; /* Neon green for screen */
  border: 2px solid #39FF14;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8rem;
  padding: 15px;
  box-shadow: 0px 0px 15px rgba(57, 255, 20, 0.7);
  text-align: right;
}

.neon-button {
  background: linear-gradient(135deg, #FF1493, #00FF00);
  box-shadow: 0px 0px 10px rgba(0, 255, 0, 0.7), 
              0px 0px 20px rgba(255, 20, 147, 0.7);
}

/* Pastel Dream Theme Styles */
.pastel-div {
  background-color: #FFEBE5; /* Soft peach for calm feel */
  box-shadow: 0px 8px 15px rgba(255, 182, 193, 0.5); /* Light pink shadow */
  border-radius: 30px;
}

.pastel-input {
  background-color: #FFB6C1; /* Pastel pink for input */
  color: #000;
  font-family: 'Comic Sans MS', cursive; /* Playful font */
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
}

.pastel-p {
  color: #FF69B4; /* Hot pink for text */
  font-family: 'Comic Sans MS', cursive;
  font-size: 1.5rem;
}

.pastel-screen {
  background-color: #FFF0F5;
  color: #FF69B4; /* Hot pink for screen */
  border: 2px solid #FF69B4;
  font-family: 'Comic Sans MS', cursive;
  font-size: 1.8rem;
  padding: 15px;
  text-align: right;
}

.pastel-button {
  background: linear-gradient(135deg, #FFB6C1, #FFD700);
  box-shadow: inset 0px 0px 10px #FF69B4;
}

/* Cyber Theme Styles */
.cyber-div {
  background-color: #E7EBFF; /* Dark background for neon accents */
  box-shadow: 0px 8px 20px rgba(255, 105, 180, 0.7); /* Neon pink glow */
  border-radius: 15px;
}

.cyber-input {
  background-color: #00FFFF; /* Neon cyan for input */
  color: #111;
  font-family: 'Audiowide', sans-serif; /* Bold tech font */
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0, 255, 255, 0.7); /* Cyan glow */
}

.cyber-p {
  color: #FF1053; /* Neon red text */
  font-family: 'Audiowide', sans-serif;
  font-size: 1.5rem;
}

.cyber-screen {
  background-color: #202020;
  color: #00FFFF; /* Neon cyan for screen */
  border: 2px solid #00FFFF;
  font-family: 'Audiowide', sans-serif;
  font-size: 1.8rem;
  padding: 15px;
  box-shadow: 0px 0px 15px rgba(0, 255, 255, 0.7);
  text-align: right;
}

.cyber-button {
  background: linear-gradient(135deg, #FF1053, #00FFFF);
  box-shadow: 0px 0px 20px #FF1053, 
              0px 0px 20px #00FFFF;
}

/* Steampunk Theme Styles */
.steampunk-div {
  background-color: #625947; /* Bronze metallic feel */
  box-shadow: 0px 8px 20px rgba(139, 69, 19, 0.6); /* Subtle bronze shadow */
  border-radius: 15px;
}

.steampunk-input {
  background-color: #8B4513; /* Dark brown for input */
  color: #fff;
  font-family: 'IM Fell English', serif; /* Victorian-style font */
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
  box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.8);
}

.steampunk-p {
  color: #D2B48C; /* Tan for text */
  font-family: 'IM Fell English', serif;
  font-size: 1.5rem;
}

.steampunk-screen {
  background-color: #2F2F2F;
  color: #D2B48C; /* Tan for screen */
  border: 2px solid #D2B48C;
  font-family: 'IM Fell English', serif;
  font-size: 1.8rem;
  padding: 15px;
  text-align: right;
}

.steampunk-button {
  background: linear-gradient(135deg, #8B4513, #D2B48C);
  box-shadow: inset 0px 0px 15px #8B4513;
}

/* Futuristic Holo Theme Styles */
.holo-div {
  background-color: #1B1F23; /* Dark gray background for holographic feel */
  box-shadow: 0px 8px 20px rgba(0, 255, 255, 0.6); /* Aqua glow */
  border-radius: 30px;
}

.holo-input {
  background-color: #3F00FF; /* Electric blue for input */
  color: #E6E6FA; /* Lavender text */
  font-family: 'Exo', sans-serif; /* Tech futuristic font */
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
  box-shadow: 0px 0px 15px rgba(63, 0, 255, 0.8); /* Electric blue glow */
}

.holo-p {
  color: #7DF9FF; /* Holographic cyan text */
  font-family: 'Exo', sans-serif;
  font-size: 1.5rem;
}

.holo-screen {
  background-color: #101010;
  color: #7DF9FF; /* Neon cyan for screen */
  border: 2px solid #7DF9FF;
  font-family: 'Exo', sans-serif;
  font-size: 1.8rem;
  padding: 15px;
  box-shadow: 0px 0px 20px rgba(125, 249, 255, 0.6);
  text-align: right;
}

.holo-button {
  background: linear-gradient(135deg, #7DF9FF, #3F00FF);
  box-shadow: 0px 0px 20px rgba(63, 0, 255, 0.8), 
              0px 0px 20px rgba(125, 249, 255, 0.6);
}

/* Desert Dunes Theme Styles */
.dune-div {
  background-color: #FFEBB5; /* Warm sandy color */
  box-shadow: 0px 8px 15px rgba(255, 193, 7, 0.4); /* Soft golden shadow */
  border-radius: 25px;
}

.dune-input {
  background-color: #D2691E; /* Burnt orange for input */
  color: #FFF8DC; /* Cornsilk text */
  font-family: 'Roboto Slab', serif; /* Rustic serif font */
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
  box-shadow: 0px 0px 10px rgba(210, 105, 30, 0.6); /* Burnt orange glow */
}

.dune-p {
  color: #FFDEAD; /* Navajo white text */
  font-family: 'Roboto Slab', serif;
  font-size: 1.5rem;
}

.dune-screen {
  background-color: #B8860B;
  color: #FFF8DC; /* Cornsilk text for screen */
  border: 2px solid #FFF8DC;
  font-family: 'Roboto Slab', serif;
  font-size: 1.8rem;
  padding: 15px;
  text-align: right;
}

.dune-button {
  background: linear-gradient(135deg, #FFDEAD, #B8860B);
  box-shadow: inset 0px 0px 15px #B8860B;
}

/* Vaporwave Theme Styles */
.vaporwave-div {
  background-color: #2C1A4A; /* Dark purple background */
  box-shadow: 0px 8px 20px rgba(255, 105, 180, 0.7); /* Pink vaporwave shadow */
  border-radius: 15px;
}

.vaporwave-input {
  background-color: #FF77FF; /* Bright pink for input */
  color: #FFFFFF; /* White text */
  font-family: 'VT323', monospace; /* Retro pixel font */
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
  box-shadow: 0px 0px 15px rgba(255, 119, 255, 0.8); /* Pink glow */
}

.vaporwave-p {
  color: #00FFFF; /* Neon cyan text */
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
}

.vaporwave-screen {
  background-color: #1A1A2E;
  color: #00FFFF; /* Neon cyan for screen */
  border: 2px solid #00FFFF;
  font-family: 'VT323', monospace;
  font-size: 1.8rem;
  padding: 15px;
  text-align: right;
}

.vaporwave-button {
  background: linear-gradient(135deg, #FF77FF, #00FFFF);
  box-shadow: 0px 0px 20px rgba(255, 119, 255, 0.7), 
              0px 0px 20px rgba(0, 255, 255, 0.7);
}

/* Nature Greenery Theme Styles */
.greenery-div {
  background-color: #004D00; /* Dark green for natural feel */
  box-shadow: 0px 8px 20px rgba(0, 255, 0, 0.4); /* Vibrant green shadow */
  border-radius: 30px;
}

.greenery-input {
  background-color: #00FF7F; /* Spring green for input */
  color: #000;
  font-family: 'Lora', serif; /* Elegant and natural serif */
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
}

.greenery-p {
  color: #ADFF2F; /* Yellow-green text */
  font-family: 'Lora', serif;
  font-size: 1.5rem;
}

.greenery-screen {
  background-color: #013220;
  color: #ADFF2F; /* Yellow-green for screen */
  border: 2px solid #ADFF2F;
  font-family: 'Lora', serif;
  font-size: 1.8rem;
  padding: 15px;
  text-align: right;
}

.greenery-button {
  background: linear-gradient(135deg, #00FF7F, #ADFF2F);
  box-shadow: inset 0px 0px 15px #006400;
}

/* Monochrome Theme Styles */
.monochrome-div {
  background-color: #2E2E2E; /* Dark gray background */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5); /* Subtle black shadow */
  border-radius: 30px;
}

.monochrome-input {
  background-color: #FFFFFF; /* White for input */
  color: #000000; /* Black text */
  font-family: 'Lora', serif; /* Elegant and readable serif */
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
}

.monochrome-p {
  color: #CCCCCC; /* Light gray text */
  font-family: 'Lora', serif;
  font-size: 1.5rem;
}

.monochrome-screen {
  background-color: #1C1C1C; /* Very dark gray for screen */
  color: #FFFFFF; /* White text */
  border: 2px solid #CCCCCC; /* Light gray border */
  font-family: 'Lora', serif;
  font-size: 1.8rem;
  padding: 15px;
  text-align: right;
}

.monochrome-button {
  background: linear-gradient(135deg, #333333, #666666); /* Gradient from dark to light gray */
  box-shadow: inset 0px 0px 15px #000000; /* Black inset shadow */
}

/* Vibrant Theme Styles */
.vibrant-div {
  background-color: #FF1493; /* Deep pink background */
  box-shadow: 0px 8px 20px rgba(255, 20, 147, 0.6); /* Bright pink shadow */
  border-radius: 30px;
}

.vibrant-input {
  background-color: #FFD700; /* Gold for input */
  color: #000000; /* Black text */
  font-family: 'Lora', serif; /* Elegant and readable serif */
  font-size: 2rem;
  border: none;
  padding: 10px;
  text-align: center;
}

.vibrant-p {
  color: #00FF00; /* Neon green text */
  font-family: 'Lora', serif;
  font-size: 1.5rem;
}

.vibrant-screen {
  background-color: #00BFFF; /* Deep sky blue for screen */
  color: #FFFFFF; /* White text */
  border: 2px solid #FF1493; /* Deep pink border */
  font-family: 'Lora', serif;
  font-size: 1.8rem;
  padding: 15px;
  text-align: right;
}

.vibrant-button {
  background: linear-gradient(135deg, #FF4500, #FF6347); /* Gradient from orange-red to tomato */
  box-shadow: inset 0px 0px 15px #FF4500; /* Orange-red inset shadow */
}

.base {
  width: fit-content;
  height: 250px;
  backdrop-filter: blur(50px);
  border-right: .5px solid #FFFFFF;
  border-bottom: .5px solid #FFFFFF;
  box-shadow: inset -1px -3px 2px #343434BA;
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 900;
  text-shadow: 1px 2px 1px #999999;
  overflow: auto;
}

.base h1,.base-ul,.base li,.base input {
  /*transform: translateX(-50%);
  left: 50%;*/
}


.base h1{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-decoration-line: underline;
  width: calc(80% - 20px);
  text-align: center;
}

.base-ul {
  margin: 20px 0;
  width: 80%;
  padding-left: 20px; /* To ensure list numbers are not flush to the left */
}

.base li:last-child{
  list-style-type: none;
  font-size: .7rem;
}

.base li:last-child::marker,.base li:first-child::marker{
  content: '';
}

.base li {
  color: #343434;
  list-style-type: default; /* Use this for lists type */
  margin-top: 10px; /* Space between list items for better readability */
}

.base li::marker{
  content: '💥'; 
}

.base input{
  height: 100%;
  width: 50px;
  border-radius: 0;
  background: none;
}
#text{
  padding-left: 10px;
  width: calc(80% - 10px);
  font-size: 1.1rem;
  font-weight: 900;
  text-shadow: 1px 2px 1px #797979;
  color: #565656;
}

.base li:first-child{
  height: 50px;
  position: relative;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100%);
  background: linear-gradient(#FFFFFF,#969696);
  box-shadow: inset -1px -2px 1px #373737;
}
ul.base-ul span{
  color: #FF8E27E0;
}

.reload{
  width: fit-content;
  height: 50px;
  padding: 0px 15px;
  position: absolute;
  top: 2.5%;
  left: 5%;
  /*transform: translate(-50%,-50%);*/
  display: block;
  background: #42445A;
  color: #C9C9C9;
  text-shadow: 1px 2px 2px #B4B4B4;
  font-size: 1.2rem;
  box-shadow: inset -2px -3px 0px #A6A6A6C2;
}

.infoBar{
  width: fit-content;
  height: fit-content;
  background: transparent;
  color: #C1C1C1;
  position: absolute;
  top: 2.5%;
  right: 5%;
  
  font-size: 1.5rem;
  transform-origin: top;transition: .5s;
}
.infoContent{
  color: #000000;
  width: 200px;
  height: fit-content;
  position: absolute;
  left: 0%;
  top: 2.5%;
  transform: translateX(-100%);
  transform-origin: top;transition: .5s;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.infoContent ul{
  margin-top: 20px;
}
.infoContent li{
  list-style: none;
  font-size: .7rem;
  font-weight: 900;
  font-family: Arial, Helvetica, sans-serif, "cursive";
}