style.css

/* General Body Styling */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2vh; /* This makes it take up the full viewport height */
  text-align: center; /* Centers text inside the container */
}
.game-section {
  background: radial-gradient(circle, #2a0244, #5e0f86);
  padding: 30px;
  font-family: 'Press Start 2P', sans-serif;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 20px #ff6600;
}

h2 {
  font-size: 2em;
  color: #ffcc00;
  text-shadow: 0 0 10px #ffcc00, 0 0 20px #ff6600;
  margin-bottom: 20px;
}

.card-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.player-card {
  background: #3b065e;
  border: 3px solid #ffcc00;
  border-radius: 15px;
  box-shadow: 0 0 15px #ff6600;
  padding: 20px;
  width: 300px;
  text-align: center;
}

.card-title {
  font-size: 1.5em;
  color: #ffcc00;
  text-shadow: 0 0 10px #ff6600, 0 0 20px #ffcc00;
  margin-bottom: 10px;
}

.card-image img {
  width: 50%;
  height: auto;
  border-radius:15px;
  margin-bottom: 15px;
}

.card-description {
  font-size: 1.1em;
  margin-bottom: 15px;
  color: #e0e0e0;
}

.strengths,
.weaknesses {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.strengths li,
.weaknesses li {
  font-size: 1.1em;
  color: #05ac66; /* Green for strengths */
}

.weaknesses li {
  color: #9c0b0b; /* Red for weaknesses */
}

.legend-section {
  background: radial-gradient(circle, #8b28e4, #2a0244); /* Vibrant purple to deep violet for mystical effect */
  border: 4px solid #0b24c7; /* Blue border for thematic contrast */
  border-radius: 20px; /* Softer, more elegant rounding */
  padding: 5px 25px 25px 25px;;
  font-family: 'Press Start 2P', sans-serif;
  font-size: 14px;
  color: #ffffff; /* White text for strong readability */
  max-width: 800px;
  margin: 10px auto;
  box-shadow: 0 0 25px #4db9f8; /* Blue glow for magical emphasis */
}

.legend-title {
  text-align: center;
  font-size: 2em; /* Larger for prominence */
  color: #1d0c59; /* Deep blue for emphasis */
  text-shadow: 0 0 10px #15d7e5, 0 0 20px #07a4ff; /* Bright blue glow */
  margin-bottom: 25px;
}

.legend-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px; /* Space between icon and text */
  text-align: left;
}

.legend-icon img {
  width: 80px; /* Slightly larger for emphasis */
  height: 80px;
  border-radius: 50%; /* Circular icon for a polished look */
  border: 6px solid #180968; /* Deep blue border */
  box-shadow: 0 0 15px #1bc0e6; /* Glow effect to highlight the deception */
}

.legend-intro {
  font-size: 1.1em;
  color: #e0e0e0; /* Light gray for softer readability */
  line-height: 1.6; /* Improve readability */
  margin: 0;
}


.deception-icon {
    text-align: center;
    margin-bottom: 20px;
}

.deception-icon img {
    width: 70px; /* Adjust icon size */
    height: 70px;
    border-radius: 50%; /* Circular icon */
    border: 3px solid #0b0ec9; /* Golden border to emphasize */
    padding: 0px;
}



.illusion-summary {
    text-align: center;
    font-size: 1.2em;
    font-style: italic;
    margin-top: 15px;
    color: #1ce08e; /* Bright green for emphasis */
}
.illusion-section {
    background: radial-gradient(circle, #8b28e4, #2a0244); /* Vibrant purple to deep violet for mystical effect */
    border: 4px solid #0b24c7; /* Blue border for thematic contrast */
    border-radius: 20px; /* Softer, more elegant rounding */
    padding: 25px;
    font-family: 'Press Start 2P', sans-serif;
    font-size: 14px;
    color: #ffffff; /* White text for strong readability */
    max-width: 800px;
    margin: 30px auto;
    box-shadow: 0 0 25px #4db9f8; /* Blue glow for magical emphasis */
}

.illusion-section h3 {
    text-align: center;
    font-size: 2em; /* Larger for more prominence */
    color: #1d0c59; /* Bright yellow for a magical glow */
    text-shadow: 0 0 10px #15d7e5, 0 0 20px #07a4ff; /* Golden glow for mystic effect */
    margin-bottom: 25px;
}



.deception-icon img {
    width: 80px; /* Slightly larger for more emphasis */
    height: 80px;
    border-radius: 50%; /* Circular icon for a polished look */
    border: 6px solid #180968; /* Golden border for magic */
    
    box-shadow: 0 0 15px #1bc0e6; /* Glow effect to highlight the deception */
}

.illusion-intro {
    text-align: justify;
    font-size: 1.1em;
    color: #e0e0e0; /* Light gray for softer readability */
    margin-bottom: 20px;
}

.illusion-paths {
    color: #b9e8ff; /* Soft blue for better harmony with the theme */
    list-style: none;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.6; /* Improve readability */
    margin-bottom: 15px;
}





.ornate-dialogue {
    display: flex;
    align-items: center;
    background: #5e0f86; /* Deep purple background */
    border: 4px solid #b9417d; /* Bright pink border */
    padding: 15px;
    font-family: 'VT323', sans-serif; /* Retro pixel font */
    font-size: 20px;
    color: #e78a3f; /* Retro orange text */
    max-width: 700px;
    margin: 20px auto;
    border-radius: 10px; /* Slightly rounded corners */
    box-shadow: 0 0 15px #e01ca2; /* Glowing pink effect */
    position: relative;
  }
  
  .portrait-frame {
    flex: 0 0 100px; /* Fixed size for portrait */
    background: #340560; /* Dark purple placeholder for portrait */
    border: 4px solid#b9417d; /* Pink border */
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px; /* Rounded portrait corners */
  }
  
  .portrait-frame img {
    width: 100px; /* Ensure consistent size */
    height: 100px;
    object-fit: cover; /* Maintain aspect ratio */
    border-radius: 8px; /* Slight rounding for image */
  }
  
  .text-frame {
    flex: 1; /* Text takes up remaining space */
    background: #3b065e; /* Darker purple for text frame */
    border: 4px solid #b9417d; /* Pink border for text box */
    padding: 10px;
    border-radius: 10px; /* Rounded text box corners */
    position: relative;
    color: #ffffff; /* White text for contrast */
  }
  
  .character-name {
    font-size: 16px; /* Name slightly larger */
    font-family: 'Press Start 2P', sans-serif; /* Retro pixel font */
    margin-bottom: 5px;
    color: #ff99cc; /* Bright pink for the name */
    text-align: center; /* Center-align name */
    text-transform: uppercase; /* Uppercase for retro feel */
  }
  
  .divider {
    border: none;
    border-top: 2px solid #b9417d; /* Subtle pink line */
    margin: 5px 0; /* Space around the line */
  }
  
  .dialogue-text {
    margin: 0;
    line-height: 1.6; /* Improve readability */
    font-size: 12px; /* Smaller text for dialogue */
    color: #e78a3f; /* Orange text for retro aesthetic */
  }
  






.retro-box {
background: #5e0f86; /* Teal background */
color: #e78a3f; /* Black text for contrast */
border: 4px solid #b9417d;
padding: 10px;
font-family: 'Press Start 2P', sans-serif; /* Retro pixel font */
font-size: 12px; /* Smaller text size for retro feel */
max-width: 600px; /* Adjust width to fit content */
margin: 20px auto; /* Center the box */
position: relative; /* For potential pseudo-elements or overlays */
display: flex; /* Side-by-side layout for image and text */
align-items: center; /* Vertically align image and text */
box-shadow: 0 0 10px #e01ca2; /* Glowing border effect */
border-radius: 8px; /* Optional rounded corners */
}

.image-container {
flex: 0 0 80px; /* Fixed width for the image */
margin-right: 10px; /* Space between the image and text */
}

.image-container img {
width: 90px; /* Match the fixed width */
height: 90px; /* Ensure the image is square */
object-fit: cover; /* Maintain proportions */
border: 2px solid #b9417d; /* Add a white border around the image */
border-radius: 20%; /* Make the image circular */
}

.text-container {
flex: 1; /* Take the remaining space for the text */
}

.text-container p {
margin: 0;
line-height: 1.5; /* Improve text spacing */
color: #ffffff; /* Ensure text is white */
}


body {
font-family: 'Poppins', sans-serif;
background: #340560;
margin: 0;
padding: 0;
color: #ffcc00;
display: flex;
justify-content: center;
align-items: flex-start; /* Allow content to grow vertically */
min-height: 100vh;
cursor: url('https://pixelartmaker-data-78746291193.nyc3.digitaloceanspaces.com/image/82ef76196b64dcf.png'), auto;
}

@keyframes background-scroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 50px 50px;
  }
}

/* Screen Frame Styling */
.screen {
background: linear-gradient(to bottom, #440092, #a328f5);
border: 8px solid #dc77e3;
border-radius: 20px;
box-shadow: 0 0 10px #4e2a84;
width: 95%;
max-width: 1000px;
height: auto; /* Adjust height to content */
padding: 20px;
text-align: left;
margin: 20px auto; /* Center with space on top */
}
.title {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 2.5rem;
  color: #ffcc00;
  text-shadow: 0 0 10px #ffcc00, 0 0 20px #ff6600, 0 0 30px #ff3300;
  margin-bottom: 20px; /* Add space below the title */
  text-align: center;
  animation: flicker 1.5s infinite;
}

@keyframes flicker {
  0% { opacity: 1; }
  50% { opacity: 0.9; text-shadow: 0 0 5px #ffcc00, 0 0 15px #ff6600; }
  100% { opacity: 1; }
}

/* Section Styling */
.section {
  margin-bottom: 20px; /* Add space between sections */
  padding: 10px;
}

.section h2 {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 1.5rem;
  color: #ff99cc;
  text-shadow: 0 0 10px #ff99cc, 0 0 20px #ff66cc;
  margin-bottom: 10px;
}

.section p {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  line-height: 1.6; /* Improve text spacing */
  color: #ffffff;
}

.section ul {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #ffffff;
  padding-left: 20px;
}



/* Footer */
footer {
  margin-top: 20px;
  font-size: 0.8rem;
  color: #ffffff;
  text-align: center;
}

/* Retro Pixel Sprites */
.sprite {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/38/Heart_pixel_art.gif');
  background-size: cover;
}