/* Normalize color rendering */
html {
    background-color: #0f0f2b;
    color-scheme: light;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    background-color: #0f0f2b;

    font-family: Arial, Helvetica, sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overscroll-behavior: none;
}

/* True vertical centering of logo + icon */
.container {
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: clamp(16px, 5vw, 40px);
    box-sizing: border-box;
}

/* Responsive main logo sizing */
.logo {
    width: min(
        calc(100vw - 25vw),
        calc(100vh - 25vh)
    );

    max-width: 550px;
    min-width: 180px;

    height: auto;

    -webkit-user-drag: none;
    user-select: none;
}

/* LinkedIn link container */
.linkedin-link {
    margin-top: clamp(20px, 4vh, 40px);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px;
    border-radius: 10px;

    transition: opacity 0.2s ease, transform 0.2s ease;

    /* Ensure it doesn't exceed container */
    max-width: 150px;
    width: 20%; /* relative to container, fallback */
    box-sizing: border-box;
}

/* LinkedIn PNG icon */
.linkedin-icon {
    width: 100%;
    max-width: 56px;
    height: auto;

    -webkit-user-drag: none;
    user-select: none;
}


/* Touch / hover feedback */
.linkedin-link:hover,
.linkedin-link:active {
    opacity: 0.75;
    transform: scale(0.97);
}

/* Keyboard accessibility */
.linkedin-link:focus-visible {
    outline: 2px solid #3f40ea;
    outline-offset: 4px;
}