/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: white;
  font-family: monospace;
  text-align: center;
  
}

.centered-list {
  text-align: center;         /* Centers the text */
  list-style-position: inside; /* Moves the bullet inside the centered text area */
  padding: 0;                 /* Removes default left padding */
}

a {
  color: cyan;            
  text-decoration: none;    
  border-bottom: 2px solid rgba(26, 115, 232, 0.2); 
  transition: all 0.2s ease;
}
p {
 color: #FFFFFF;
 font-size: clamp(14px, 2.5vw, 20px); /* Automatically scales font size based on screen size */
 font-weight: bold;
 line-height: 1.4;
 margin: auto 0;
}

a:hover, a:focus {
  color: #1557b0;            /* Darker blue on hover */
  border-bottom-color: #1557b0; /* Darker underline on hover */
}


 .container-frame {
    /* Format: width | style | color */
    border: 3px solid #000000; 
    padding: 15px;
  }
  .yena {
transition: all 0.5s;
-webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 220%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.yena:hover {
transition: all 0.5s;
-webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 80%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.card {
            background-image: url('https://adianation.neocities.org/Photos/mitzifacts.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            /* Responsive dimensions based on the original image aspect ratio */
            width: 100%;
            max-width: 700px; 
            aspect-ratio: 1024 / 610; 
            position: relative;
            border-radius: 25px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.0);
             margin: 0 auto; 
        }

        /* Positioned text area inside the green sign space */
        .content-area {
            position: absolute;
            top: 25%;
            left: 2%;
            width: 55%; /* Keeps text inside the green zone on the left */
            bottom: 10%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-align: left;
            padding: 10px;
            box-sizing: border-box;
        }

        /* Styling for the button */
        button {
            background-color: #2b5c37;
            color: white;
            border: 2px solid white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: clamp(12px, 2vw, 16px);
            cursor: pointer;
            font-family: inherit;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
            transition: transform 0.1s ease;
        }

        button:hover {
            background-color: #1e3a1e;
        }

        button:active {
            transform: scale(0.95);
        }