* {
  box-sizing: border-box;
}

body {
  margin: 0; 
  font-family: 'Arial', sans-serif;
  color: #000000; 
  overflow-x: hidden;
  animation: backgroundPulse 15s ease infinite alternate; 
}

header {
  background: linear-gradient(135deg, rgba(0, 20, 50, 1), rgba(0, 40, 80, 1));
  color: white;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s, box-shadow 0.3s;
}

header .logo {
  font-size: 36px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 5px;
  text-transform: uppercase;
  transition: color 0.3s, transform 0.3s, text-shadow 0.3s;
  font-family: 'Quicksand';
}

/* Home Logo Styling for Mobile */
.home-logo {
display: none; 
cursor: pointer;
margin-right: auto;
}

.home-logo img {
margin-left: 20px;
width: 30px; 
height: 30px; 
transition: transform 0.3s ease; 
}

.home-logo:hover img {
transform: scale(1.1);
filter: drop-shadow(0 0 5px #00c4ff)
}
nav {
  display: flex;
  gap: 30px;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  position: relative;
  padding: 8px 0;
  transition: color 0.3s, transform 0.3s, filter 0.3s;
}

nav a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #00c4ff;
  left: 0;
  bottom: -3px;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

nav a:hover {
  color: #00c4ff;
  
}

nav a:hover::after {
  transform: scaleX(1);
}

div.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem; 
}

/* Button Styling */
button {
  padding: 1.2rem 2rem;
  background: linear-gradient(135deg, #007BFF, #0056b3);
  border: 2px solid #0056b3;
  border-radius: 20px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border: 2px solid #00c4ff;
}

/* Button Hover Effect */
button:hover {
  background: linear-gradient(135deg, #0056b3, #004494);
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Status Text */
#status {
  font-size: 28px;
  font-weight: 700;
  color: #00c4ff; 
  text-align: center;
  margin: 20px 0; 
}
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards; 
}

/* Coin Styling */
#coin {
  position: relative;
  width: 25rem;
  height: 26.5rem;
  margin-right: 100px;
  margin-top: 50px;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

/* Coin Face Styling */
#coin div {
  width: 100%;
  height: 70%;
  border-radius: 50%;
  backface-visibility: hidden;
  background-size: cover;
  position: absolute;
}

.heads {
  margin-top: 100px;
  background-image: url(front-image.jpg);
  background-repeat: no-repeat;
}

.tails {
  transform: rotateY(180deg);
  margin-top: 100px;
  background-image: url(back-image.png);
  background-repeat: no-repeat;
}

.animate-heads {
  animation: flipHeads 0.8s forwards;
}

.animate-tails {
  animation: flipTails 0.8s forwards;
}

footer {
  position: relative;
  background: linear-gradient(135deg, rgba(0, 20, 50, 1), rgba(0, 40, 80, 1));
  color: white;
  height: 300px;
  text-align: center;
  padding: 20px;
  margin-top: 150px;
}

footer p a {
  text-decoration: none;
  color: #00c4ff;
}
footer h3{
    color:#fff;
}
.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-icons img {
  width: 30px;
  height: 30px;
  transition: transform 0.3s;
}

.social-icons img:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 5px #00c4ff);
}

/* Keyframes for Flipping */
@keyframes flipHeads {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(1800deg);
  }
}

@keyframes flipTails {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(1620deg);
  }
}

/* Wave Styles */
.wave {
  position: absolute;
  width: 100%;
  height: 90px;
  bottom: 0; 
  left: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%234a90e2" fill-opacity="1" d="M0,128L30,144C60,160,120,192,180,186.7C240,181,300,139,360,117.3C420,96,480,96,540,101.3C600,107,660,117,720,117.3C780,117,840,107,900,106.7C960,106,1020,116,1080,138.7C1140,160,1200,192,1260,197.3C1320,203,1380,181,1410,170.7L1440,160L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path></svg>') no-repeat center;
  background-size: cover;
  animation: wave-animation 10s ease-in-out infinite;
  z-index: 0; 
}

/* Responsive Styles */
@media (max-width: 768px) {
  nav {
      display: none; 
  }
  
  header .toggle-button {
      display: block; 
  }

  #sidebar {
      display: none; 
  }

  #sidebar.active {
      display: flex; 
  } 

  .home-logo {
    display: inline; 
    font-size: 1.5rem;
    color: #00c4ff;
    cursor: pointer;
    margin-right: auto;
    margin-left: 20px;
    text-decoration: none;
  }
  #coin {
    width: 21rem;
    height: 21.5rem;
    margin-right: 100px;
  }


  button {
    padding: 1rem 1.5rem;
    font-size: 14px;
  }

  
  #status {
    font-size: 22px;
  }
}

@media (min-width: 769px) {
  #sidebar {
      display: none; 
  }
  
  header .toggle-button {
      display: none; 
  }

  nav {
      display: flex; 
  }
}

@media (max-width: 480px) {
  
  #coin {
    width: 16rem;
    height: 16.5rem;
    margin-right: 70px;
  }

  
  button {
    padding: 0.8rem 1.2rem;
    font-size: 12px;
  }

  
  #status {
    font-size: 18px;
    text-align: center; 
  }


  .heads, .tails {
    margin-top: 50px;
  }
}
@media (max-width: 480px){
  .home-logo{
    margin-right: 15px;
  }
  header .logo{
    font-size: 25px;
  }
}

/* Wave Animation */
@keyframes wave-animation {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(10px);
  }
  100% {
      transform: translateY(0);
  }
}

/*Fade In status*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}