/* Global Styles */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}


.bg-image {
  background: url('../pictures/background.jpg') no-repeat center center fixed;
  background-size: cover;
}

.bg-gradient-pink{
  background: linear-gradient(0deg, #ECC3FF, #FEFDFF);
}
.bg-gradient-dark {
  background: linear-gradient(0deg, #121212, #323232);
}

.bg-gradient-light {
  background: linear-gradient(0deg, #F5F5F5, #FFFFFF);
}

.bg-gradient-blue {
  background: linear-gradient(0deg, #1A2980, #26D0CE);
}

.bg-gradient-grey {
  background: linear-gradient(0deg, #8E9EAB, #EAEAEA);
}

.bg-gradient-red {
  background: linear-gradient(0deg, #CB356B, #BD3F32);
}

.bg-gradient-peach {
  background: linear-gradient(0deg, #FFB88C, #FF9A8B);
}

.bg-gradient-moonlit {
  background: linear-gradient(0deg, #0F2027, #203A43, #2C5364);
}

.bg-gradient-emerald {
  background: linear-gradient(0deg, #43A047, #6CD782);
}

.bg-gradient-sunset {
  background: linear-gradient(0deg, #FF4E50, #F9D423);
}

.bg-gradient-lavender {
  background: linear-gradient(0deg, #7028E4, #E5B2CA);
}

.bg-gradient-ocean {
  background: linear-gradient(0deg, #373B44, #4286F4);
}

.bg-gradient-tropical {
  background: linear-gradient(0deg, #FF9966, #FF5E62);
}

.bg-animated-aurora {
  background: linear-gradient(135deg, #012840, #126872, #3AA17E, #81C7A6);
  background-size: 400% 400%;
  animation: aurora-shift 12s ease infinite;
}

@keyframes aurora-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bg-gradient-cyberpunk {
  background: linear-gradient(180deg, #000428 0%, #004e92 50%, #FF00CC 100%);
  background-size: 100% 100%;
}

.bg-animated-cosmic {
  background: linear-gradient(45deg, #1A1A2E, #16213E, #0F3460, #533483);
  background-size: 400% 400%;
  animation: cosmic-pulse 9s ease infinite;
}

@keyframes cosmic-pulse {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bg-animated-vintage {
  background: linear-gradient(to right, #DDD6F3, #FAACA8, #E3EEFF);
  background-size: 200% 200%;
  animation: vintage-flow 10s ease infinite;
}

@keyframes vintage-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bg-animated-holographic {
  background: linear-gradient(140deg, 
    rgba(255,0,0,0.5), 
    rgba(255,165,0,0.5), 
    rgba(255,255,0,0.5), 
    rgba(0,128,0,0.5), 
    rgba(0,0,255,0.5), 
    rgba(75,0,130,0.5), 
    rgba(238,130,238,0.5)
  );
  background-size: 700% 700%;
  animation: holographic-flow 25s ease infinite;
}

@keyframes holographic-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bg-animated-fiery {
  background: linear-gradient(135deg, #1A0000, #8B0000, #FF0000, #FFA500, #FFFF00, #FFA500, #FF0000, #8B0000, #1A0000);
  background-size: 400% 400%;
  animation: fiery-shift 8s ease infinite;
}

@keyframes fiery-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bg-animated-neon {
  background: linear-gradient(45deg, #FF6EC7, #39FF14, #0FF0FC, #FF6EC7, #39FF14, #0FF0FC);
  background-size: 400% 400%;
  animation: neon-shift 12s ease infinite;
}

@keyframes neon-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.white-text {
  color: #fff;
}

.black-text {
  color: #000;
}

.white-text img[src$=".svg"] {
  filter: brightness(0) invert(1);
}

/* Main container styling */
.main-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5% 15px;
}

/* Infos container */
.infos-container {
  text-align: center;
  margin-bottom: 1rem;
}
.profile-img {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  margin-bottom: 0.75rem;
}
.profile-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.status {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.status-indicator {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #19cb62;
  border-radius: 50%;
  margin-right: 0.5rem;
}
/* Make the status text a flex container */
.status-text {
  font-size: 0.75rem;
  opacity: 0.75;
  display: inline-flex;
  align-items: center;
}
.status-label {
  margin-right: 0.5rem;
}

/* New styles for location alignment */
.location-container {
  display: inline-flex;
  align-items: center;
}
.location-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.25rem;
}

.profile-bio {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Separator dot between Active now and Location */
.separator-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: currentColor;
  border-radius: 50%;
  margin: 0 8px;
  vertical-align: middle;
}

/* Socials container */
.socials-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.social .user-link img {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.15s ease-in-out;
}
.social .user-link:hover img {
  transform: scale(1.2);
}

/* Buttons container */
.buttons-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  width: 100%;
  max-width: 470px;
}

/* Link button base style */
.link-button {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  border: 1px solid #fff;
  padding: 0.5rem 2rem;
  background: #fff;
  color: #000;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  width: 100%;
}

/* Rounded and Squared button styles applied via container */
.buttons-container.rounded .link-button {
  border-radius: 9999px;
}
.buttons-container.squared .link-button {
  border-radius: 5px;
}


.link-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
  z-index: 0;
}
.link-button:hover::before {
  transform: translateY(-100%);
}
.button-icon {
  z-index: 1;
  background: #000;
  padding: 0.5rem;
  border-radius: 50%;
}
.button-icon img {
  width: 0.75rem;
  height: 0.75rem;
}
.button-text {
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.button-title {
  font-size: 0.875rem;
  font-weight: bold;
}
/* Smaller button description */
.button-description {
  font-size: 0.75rem;
}

/* Count container */
.count-container {
  text-align: center;
  margin-top: 2rem;
}
.countdown-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.time-box {
  background: #fff;
  color: #000;
  padding: 0.25rem;
  border-radius: 0.375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.time {
  font-size: 1.5rem;
  font-weight: bold;
}
.time-label {
  font-size: 9px;
}
.time-separator {
  font-size: 1.5rem;
  font-weight: bold;
}
.oaml-logo {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0.5rem 0;
  z-index: 1000; /* Ensures it appears on top */
  
}
/* Adjust logo size */
.oaml-logo img {
  max-width: 12.5rem; /* Adjust this value as needed */
  height: auto;
}


/* Animations */
/* Bouncing Animation */
@keyframes bouncing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.bouncing {
  animation: bouncing 0.5s infinite;
}

/* Buzzing Animation */
@keyframes buzzing {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.buzzing {
  animation: buzzing 0.2s infinite;
}

/* Pulsing Animation */
@keyframes pulsing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.pulsing {
  animation: pulsing 1s infinite;
}

/* Shaking Animation */
@keyframes shaking {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
.shaking {
  animation: shaking 0.5s infinite;
}

/* Swinging Animation */
@keyframes swinging {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
.swinging {
  animation: swinging 3s infinite;
}

/* Media Queries for Phones */
@media (max-width: 600px) {
  .buttons-container {
    max-width: 80%;
  }
  
  .main-container{
    padding-top: 4rem;
  }
  .link-button {
    width: 100%;
  }
  
  .social .user-link img {
    width: 1.3rem;
    height: 1.3rem;
  }
  
  .button-icon img {
    width: 1rem;
    height: 1rem;
  }
  
  .profile-name {
    font-size: 1.75rem;
  }
  
  .status-text {
    font-size: 0.85rem;
  }
  
  .profile-bio {
    font-size: 1rem;
  }
  
  .button-title {
    font-size: 1rem;
  }
  
  .button-description {
    font-size: 0.85rem;
  }
  html, body {
    overflow: hidden;
  }
}