div.center {

  text-align: center;
  
}
.homepage {
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
 
  
}


body {
  background-image: url('background.png');
  background-color: #386AC1; 
  font-family: verdana;
  margin: 0;
}

.transparent-box {
  background-color: rgba(0, 0, 0, 0.5); /* White background, 30% opacity */
  padding: 12px;
  border-radius: 12px; /* Optional: Rounded corners */
  text-align: center;

}

.transparent-box p {
  color: white; /* Text color */
  font-size: 10px;
 
}

.changepage {
  text-align: center;
  color: #2ecc71; /* Green text */
  text-decoration: none; /* Remove default underline */
  border-bottom: 2px solid transparent; /* Add invisible border */
  padding-bottom: 2px; /* Make space for the border */
  transition: border-color 0.3s ease; /* Smooth transition */
}

.changepage:hover {
  border-bottom: 2px solid #2ecc71; /* Underline appears on hover */
}

header {
            background: linear-gradient(135deg, #724ffe, #dd63ff);
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            color: white;
            position: sticky;
        }

        /* Container for logo and navigation */
        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Style the site title/logo */
        .logo {
            font-size: 24px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        /* Style for the navigation links */
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 20px;
        }

        nav ul li {
            display: inline;
        }

        /* Style for the navigation links */
        nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            font-weight: 600;
            transition: color 0.3s ease;
        }

        /* Hover effect for the navigation links */
        nav ul li a:hover {
            color: #ffeb3b;
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                text-align: center;
            }

            nav ul {
                flex-direction: column;
                gap: 10px;
            }
        }