:root {
    --bg-color: #ffc6cc;
    --text-color: #696969;
    --wrapper-bg: #fffae6;
    --shadow-color: rgba(0, 0, 0, 0.1);
  }
  
  .light {
    --bg-color: #dedacf;
    --text-color: #565856;
    --wrapper-bg: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.2);
  }
  
  .dark {
    --bg-color: #1e1e1e;
    --text-color: #e0e0e0;
    --wrapper-bg: #2a2a2a;
    --shadow-color: rgba(255, 255, 255, 0.1);
  }
  .dark {
    --bg-color: #24273a;
    --text-color: #cad3f5;
    --wrapper-bg: #363a4f;
    --shadow-color: rgba(255, 255, 255, 0.1);
  }
  /* Dark theme */
  .green {
    --bg-color: #344e44;
    --text-color: #5c542c;
    --wrapper-bg: #c4b494;
    --shadow-color: rgba(0, 0, 0, 0.3); 
  }
  
  .animal-crossing {
    --bg-color: #072C2Bff; /* Soft mint green, like the grassy fields */
    --text-color: #f8fba2; /* Earthy taupe for a natural text color */
    --wrapper-bg: #002129; /* Light beige, like the warm sunlit village houses */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Gentle shadow for a soft look */
  }
  
  .lavender {
    --bg-color: #f4dcf2; /* Soft mint green, like the grassy fields */
    --text-color: #782ec9; /* Earthy taupe for a natural text color */
    --wrapper-bg: #fdfffe; /* Light beige, like the warm sunlit village houses */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Gentle shadow for a soft look */
  }
  
  .train {
    --bg-color: #975975;
    --text-color: #495267;
    --wrapper-bg: #f7efef;
    --shadow-color: rgba(0, 0, 0, 0.1);
  }
  
  
  .fruits-basket {
    --bg-color: #ffc6cc;
    --text-color: #696969;
    --wrapper-bg: #fffae6;
    --shadow-color: rgba(0, 0, 0, 0.1);
  }
  
  .silent-voice {
    --bg-color: #ffc6cc;
    --text-color: #696969;
    --wrapper-bg: #fffae6;
    --shadow-color: rgba(0, 0, 0, 0.1);
  }
  
  body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: monospace;
    color: var(--text-color);
    background-color: var(--bg-color); /* Background color for contrast */
  }
  
  /* Centered square wrapper */
  .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 90%; /* Use percentage for responsiveness */
    max-width: 500px; /* Limit max width on large screens */
    height: 355px; /* Fixed height to make it square */
    background-color: var(--wrapper-bg); /* White background */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for style */
    border-radius: 10px; /* Rounded corners for polish */
    padding: 20px; /* Add padding inside the wrapper */
    box-sizing: border-box; /* Include padding in the width and height */
  }
  
  /* Two columns inside the wrapper */
  .column {
    flex: 1; /* Make columns evenly spaced */
    text-align: left; /* Center text within columns */
    padding: 10px;
    border-radius: 5px; /* Rounded corners */
    width: 50%;
    font-size: 12px;
  }
  
  
  .avatar {
      border-radius: 5%;
      width: 100%;
      object-fit: cover;
      width: 210px;
      height: 210px;
  
  }
  
  hr {
      border-top: 1px dashed grey;
  }
  
  li {
  
  }
  
      /* Container to hide overflow */
      .scroll-container {
          overflow: hidden;
          white-space: nowrap;
          width: 138px; /* Adjust to match your layout */
          display: inline-block;
          vertical-align: middle;
        }
    
        /* Text scroll effect */
        .scroll-text {
          display: inline-block;
          transition: transform 1.5s linear; /* Controls the scroll speed */
        }
    
        /* Hover to scroll */
        .scroll-container:hover .scroll-text {
          transform: translateX(-25%); /* Scrolls the text out of view */
        }
  
        a {
          color: #565856;
        }
  
        .transparent{
          color: transparent;
        }
  
        .right { 
          text-align: right;
        }