/* 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 {
  color: white;
  font-family: Verdana;
  
    background-image: url("/namii03WP.webp"); /* Path to your file */
    background-repeat: repeat; /* Or 'no-repeat' if it's large */
    background-size: cover; /* Ensures it covers the screen */
    background-attachment: fixed; /* Keeps it fixed while scrolling */
    background-position: center;
    
}

h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3%;
}

p {
  display: flex;
  justify-content: center;
  align-items: center;
}

.glass-card {
  text-decoration: none;
  justify-content: center;
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  color: white;
  text-align: center;
  width: 300px;
  
  font-size: 32px;
}

.glass-card:hover {
  justify-content: center;
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  color: white;
  text-align: center;
  width: 300px;
  
  font-size: 32px;
  
  text-shadow:
    0 0 5px #FFFFFF,  /* Subtle inner glow */
    0 0 10px #FFFFFF, /* Medium glow */
    0 0 20px #FFFFFF, /* Large outer glow */
    0 0 40px #FFFFFF;
}



.insta {
  text-decoration: none;
  justify-content: center;
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  color: white;
  text-align: center;
  width: 170px;
  font-size: 25px;
  
  margin: 20px;
}

.insta:hover {
  justify-content: center;
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  color: white;
  text-align: center;
  width: 170px;
  font-size: 25px;
  
  text-shadow:
    0 0 5px #FFFFFF,  /* Subtle inner glow */
    0 0 10px #FFFFFF, /* Medium glow */
    0 0 20px #FFFFFF, /* Large outer glow */
    0 0 40px #FFFFFF;
  
  margin: 20px;
}

.twit {
  text-decoration: none;
  justify-content: center;
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  color: white;
  text-align: center;
  width: 170px;
  font-size: 25px;
  
  margin: 20px;
}

.twit:hover {
  justify-content: center;
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  color: white;
  text-align: center;
  width: 170px;
  font-size: 25px;
  
  text-shadow:
    0 0 5px #FFFFFF,  /* Subtle inner glow */
    0 0 10px #FFFFFF, /* Medium glow */
    0 0 20px #FFFFFF, /* Large outer glow */
    0 0 40px #FFFFFF;
  
  margin: 20px;
}

.tiktok {
  text-decoration: none;
  justify-content: center;
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  color: white;
  text-align: center;
  width: 170px;
  font-size: 25px;
  
  margin: 20px;
}

.tiktok:hover {
  justify-content: center;
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  color: white;
  text-align: center;
  width: 170px;
  font-size: 25px;
  
  text-shadow:
    0 0 5px #FFFFFF,  /* Subtle inner glow */
    0 0 10px #FFFFFF, /* Medium glow */
    0 0 20px #FFFFFF, /* Large outer glow */
    0 0 40px #FFFFFF;
  
  margin: 20px;
}

.discord {
  text-decoration: none;
  justify-content: center;
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  color: white;
  text-align: center;
  width: 170px;
  font-size: 25px;
  
  margin: 20px;
}

.discord:hover {
  justify-content: center;
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  color: white;
  text-align: center;
  width: 170px;
  font-size: 25px;
  
  text-shadow:
    0 0 5px #FFFFFF,  /* Subtle inner glow */
    0 0 10px #FFFFFF, /* Medium glow */
    0 0 20px #FFFFFF, /* Large outer glow */
    0 0 40px #FFFFFF;
  
  margin: 20px;
}

.nodders {
  position: absolute;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  text-align: center;
  margin-bottom: 5%;
}

.about-wrapper {
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 5px;
  color: white;
  text-align: center;
  width: 15%;
  margin: 0 auto;
  
  font-size: 32px;
}

.ContentWrapper {
 display: flex; /* Makes the children flex items arranged in a row by default */
 text-align: right;
 margin: 0 auto;
 width: 50%;
}

.imbed {
  /* 1. Add a semi-transparent background */
  background: rgba(255, 255, 255, 0.2);
  
  /* 2. Apply the backdrop filter for the blur effect */
  backdrop-filter: blur(10px);
  /* Include vendor prefix for broader compatibility, especially older Safari */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 3. Add styling for a more realistic glass look (optional) */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 5px;
  color: white;
  text-align: center;
  width: 15%;
  margin: 0 auto;
  
  font-size: 32px;
}