/* Ensure the page takes up the full height and remove default margins */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    overflow: hidden;
    background: url(background.jpg) repeat center fixed; 
    background-size: cover;
}

/* Centered header with fixed width and rounded bottom corners */
header {
    width: 200px; /* Set the fixed width */
    padding: 10px 0; /* Add some vertical padding */
    background-color: #231F20; /* Dark background for the header */
    text-align: center;
    position: fixed;
    top: 0;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for exact centering */
    z-index: 1000; /* Ensure the header stays on top */
    border-bottom-left-radius: 15px; /* Round the bottom-left corner */
    border-bottom-right-radius: 15px; /* Round the bottom-right corner */
}

/* Social icons in the header */
.social-icons-header {
    display: inline-flex;
    gap: 40px; /* Space between the icons */
    justify-content: center;
}

/* Style for Font Awesome icons */
.social-icons-header a {
    color: white; /* Make the icons white */
    font-size: 20px; /* Adjust size to fit within the header */
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for icons */
.social-icons-header a:hover {
    transform: scale(1.3);
    color: #cccccc; /* Change color to light gray on hover */
}

/* Logo container */
.logo-container {
    width: 100%; /* Make sure the logo container takes full width */
    text-align: center; /* Center the content */
    max-width: 100%; 
    margin-top: 50px; /* Push down to avoid overlap with the header */
}

/* Make sure the logo scales with the screen */
.center-logo {
    width: 100%;
    max-width: 700px; /* Set maximum width for larger screens */
    height: auto;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    /* Ensure the logo is centered on smaller screens */
    /*.logo-container {
        margin-top: 100px; /* Adjust margin-top for smaller screens 
    }*/
    
    /* Responsive scaling of the logo */
    .center-logo {
        max-width: 99%; /* Logo scales down on smaller screens */
    }
    
    /* Icons also scale down on smaller screens */
    .social-icons-header a {
        font-size: 18px; /* Icons scale down accordingly */
    }
}