/* Global styles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Big Caslon', serif;
    background-image: url('backgroundME.png');
    background-position: center;
    background-size: cover;
}

/* Logo styles */
.logo {
    position: absolute;
    top: 10px; /* Adjust for spacing from the top */
    left: 10px; /* Adjust for spacing from the left */
    height: 100px; /* Or any size that suits the design */
    width: auto;
}

/* Container for buttons */
.button-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Spacing between buttons */
    z-index: 2; /* Ensure the buttons are above the background */
}

/* Button styles */
.svg-btn10k, .svg-btn1k6 {
    font-family: 'Big Caslon', serif;
    padding: 1em 2em; /* Larger padding */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    color: rgb(32, 32, 81);
    background-color: transparent;
    border-radius: 50px; /* Very rounded corners */
    font-size: 2rem; /* Larger font size for readability */
    display: block;
    min-width: 250px; /* Minimum width for larger buttons */
    height: auto; /* Auto height to maintain aspect ratio */
    margin: 0 auto; /* Center button horizontally */
    outline: none;
}

.svg-btn10k {
    background-image: url('components/Btn10k.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.svg-btn1k6 {
    background-image: url('components/Btn1k6.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .svg-btn10k, .svg-btn1k6 {
        padding: 1.5em 4em; /* Larger padding for larger screens */
        font-size: 2.5rem; /* Increased font size for larger screens */
        min-width: 300px; /* Increased minimum width for larger buttons */
    }
    
    .logo {
        height: 120px; /* Slightly larger logo for larger screens */
    }
}

.hidden {
    display: none;
}