* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: "Montserrat", sans-serif;
    background-color: #151515;
    color: #fff;
    line-height: 1.5;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  .container {
     
    z-index:2;
    max-width: 600px;
    width: 100%;
    background-color: #1c2331;
    padding: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 3px 1px #767676;
    display: none; /* Hide container by default, will be displayed, once the userId is known */
    text-align: center;
  }
  .container a {
    text-decoration: none;
    color: skyblue;
  }
  /****  Footer Menu Begins Here ****/
  .footer {
    z-index: 0;
    position:relative;
    top:5vh;  
    text-align: center;
    
    display:none; /* hidden by default, but will be enabled once the container is loaded. Helps prevent content shift */
  }
  .footer a,
  .footer p {
    text-decoration: none;
    color: #fff;
    letter-spacing: 3px;
    font-size: 12px;
    font-weight: 500;
  }
  
  #FooterLinks {
    font-family: "Montserrat", sans-serif;
  }
  
  @media (min-width: 320px) and (max-width: 999px) {
  }
  
  /****  Footer Ends Here ****/
  /** Header section contains the authifyFame logo. It is currently inside the container. In the future it should be placed outside.  ***/
  
  .warningLayer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: none; /* Initially hidden */
      justify-content: center;
      align-items: center;
      z-index: 1000;
      color:black;
      
  }
  
  .warning-content {
      background: #ede3e3;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      max-width: 400px;
      width: 90%;
  }
  
  .warning-content h2 {
      margin-top: 0;
      color:red;
  }
  
  .warning-content p {
      margin: 20px 0;
  }
  .warning-content a{
      text-decoration:none
  }
  
  #agreeButton {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
  }
  
  #agreeButton:hover {
      background-color: #45a049;
  }
  
  /* Show profile section when content is approved */
  body.show-content .container {
      display: block;
      
  }
  
  /* Hide warning layer when content is approved */
  body.show-content #warning-layer {
      display: none;
  }
  .blur {
      filter: blur(5px);
      transition: filter 0.3s ease;
  }
  
  .header {
      text-align: left;
      margin-bottom: 20px;
  }
  .header .logo {
      font-size: 20px;
      font-weight: regular;
      color: #1a202c;
     
  }
  .header .logo a {
      text-decoration: none;
      color: #1a202c;
  }
  .header .logo a:hover {
      text-decoration: underline;
  }
  .header .brand_arch {
  position:relative;
  top:15px;
  left:-100px;
  font-size: 10px;
  color: goldenrod;
  }
  
  .profile {
          
      text-align: center;
      margin-bottom: 5px;
      /*background-color:#0b0c0b36;*/
      border-radius:10px;
      padding-top:15px;
      padding-bottom:15px;
      
  }
  .profile .logo-container {
    width: 75px;
    height: 75px;
    margin: 2px auto 10px;
    /*background-color: #767676;*/
    border-radius: 20%;
	border:2px solid #767676;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
	padding:3px;
}
  .profile .logo-container img {
      max-width: 100%;
      height: auto;
      
  }
  .name_verified h1 {
      font-size: 18px;
      margin-bottom: 8px;
      font-weight: 400;
      display: inline-flex;  
      align-items: center;   
  }
  
  .name_verified svg {
      margin-left: 5px;
      width: 20px;
      height: 20px;
      align-self: center;
      }
    
    
    
  
  .profile p {
      font-size: 14px;
      margin-bottom: 5px;
      word-wrap: break-word;
      
      
  }
  
  .profile .patron {
      font-size: 15px;
      font-weight: 400;
      margin-top: 5px;
      margin-bottom:5px;
      
      
  }
  .profile .website{
      word-wrap: break-word;
  }
  .profile .patron-default {
      color: #9afa00;
  }
  .profile .patron-bronze {
      color: #cd7f32; /* Bronze */
  }
  .profile .patron-silver {
      color: #a0a0a0; /* Silver */
  }
  .profile .patron-gold {
      color: #ffd700; /* Gold */
  }
  .profile .website a {
      color: #00bcd4 ;
      text-decoration: none;
  }
  .verification {
     text-align: center;
     /* margin-bottom: 30px; */
      margin-top:12px;
      
      
  }
  .verification h2 {
      font-size: 14px;
      margin-bottom: 2px;
      text-align:left;
      font-weight:400;
      display:none;
      
      
  }
  .verification form {
      
      display: flex;
      flex-direction: column;
      align-items: left;
      margin-bottom: 5px;
      margin-left:20px;
      margin-right:20px;
  }
  .verification label {
      font-size: 12px;
      margin-bottom: 5px;
      text-align:left;
      
  }
  .verification #disclaimer{
      font-size: 12px;
      margin:3px 0 7px 0;
      text-align:left;
  }
  .verification input[type="text"] {
      padding: 10px;
      width: 100%;
      max-width: 600px;
      font-size: 16px;
      margin-bottom: 10px;
      text-align: left;
      border: 1px solid #767676;
      border-radius: 5px;
      box-sizing: border-box;
      background-color:#ede3e3;
      
  }
  .verification input[type="submit"] {
    padding: 10px 20px;
    width: 130px;
    text-align: center;
    background-color: #a2fb15;
    color: #000;
    border: 1px solid;
    cursor: pointer;
    align-self: center;
    font-size: 12px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}


.verification input[type="submit"]:hover {
    background-color: goldenrod;
}

/* Dot next to verify button */
.verification .pulse-dot {
    position: absolute;
    
    width: 10px;
    height: 10px;
    background-color: #ff4d4d; 
    border-radius: 50%; /* Circle */
    animation: pulse-dot 1.5s infinite; 
}

/* Pulse animation for the dot */
@keyframes pulse-dot {
    0% {
        transform: scale(1); 
        opacity: 1; 
    }
    50% {
        transform: scale(1.5); 
        opacity: 0.6; 
    }
    100% {
        transform: scale(1); 
        opacity: 1; 
    }
}
  .verification input[type="text"]::placeholder {color:navy;}
  .message {
    
    font-size:14px;
    font-weight: 800;
	padding: 10px;
    border-radius: 5px;
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-top:20px;
    margin-bottom:25px;
}
.valid {
    background-color: #2ecc71;
    color: #000;
}
.invalid {
    background-color: #ffcc00;
    color: #000;
}
   .share-button {
      position: absolute;
      top: 20px;
      right: 20px;
      background-color: goldenrod;
      color: #1f282d;
      border: none;
      border-radius: 5px;
      padding: 5px;
      cursor: pointer;
      z-index: 10;
      display:none;
  }
  
  .share-popup {
      display: none;
      position: absolute;
      top: 60px;
      right: 20px;
      background-color: #1f282d;
      border-radius: 5px;
      box-shadow: 0 3px 3px 1px #767676;
      padding: 10px;
      z-index: 10;
  }
  
  .share-popup a {
      color: skyblue;
      display: block;
      margin: 5px 0;
      text-decoration: none;
      cursor:pointer;
  }
  #copyLinkButton{
      background-color: #1f1f1acc;
      padding:5px;
      border: #767676 solid 1px;
      color:#a2fb15;
      
  
  }
  
  .listed-link {
      text-align: center;
      margin-bottom: 20px;
      margin-top:35px;
      
      font-size: 12px; 
      
  }
  
  .listed-link a {
      color: #b1adad; 
      text-decoration: none;
      background-color:#0f0f1191;
      border: 1px grey solid;
      padding:10px;
      border-radius:20px;
  }