:root {

    --bg-color: rgba(240, 240, 240, 0.85);

    --text-color: #333;

    --shadow-color: rgba(0, 0, 0, 0.1);

    --hover-color: rgba(0, 0, 0, 0.05);

    --join-us-bg: #4a4a4a;

    --join-us-text: #fff;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Poppins', sans-serif;

    color: var(--text-color);

    background: url('background.png') no-repeat center center fixed;

    background-size: cover;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    padding: 20px;

}



.link-container {

    width: 100%;

    max-width: 500px;

    background: rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px); /* Dla Safari */

    border-radius: 20px;

    padding: 40px 30px; /* Zwiększony padding góra/dół dla lepszego wyglądu bez logo */

    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.3);

    box-shadow: 0 8px 32px 0 var(--shadow-color);

    opacity: 0;

    transform: translateY(20px);

    animation: fadeIn 0.8s forwards ease-out;

}



@keyframes fadeIn {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



header {

    margin-bottom: 30px; /* Zwiększony margines dla lepszego odstępu */

}



h1 {

    font-size: 2.5rem;

    font-weight: 600;

    margin-bottom: 5px;

    text-transform: lowercase; /* Aby 'gcck' zawsze było pisane małymi literami */

}



header p {

    font-size: 1rem;

    font-weight: 300;

    color: #555;

}



nav ul {

    list-style: none;

}



nav li {

    margin: 15px 0;

}



.link-btn {

    display: block;

    background-color: var(--bg-color);

    color: var(--text-color);

    text-decoration: none;

    padding: 15px;

    border-radius: 12px;

    font-weight: 400;

    transition: background-color 0.3s ease, transform 0.2s ease;

    box-shadow: 0 2px 5px var(--shadow-color);

}



.link-btn:hover {

    background-color: rgba(220, 220, 220, 0.9);

    transform: translateY(-2px);

}



.join-us {

    background-color: var(--join-us-bg);

    color: var(--join-us-text);

    padding: 3px 8px;

    border-radius: 5px;

    font-size: 0.8em;

    margin-left: 10px;

    font-weight: 600;

}



footer {

    margin-top: 30px;

    font-size: 0.8rem;

    color: #666;

}



/* Responsywność */

@media (max-width: 600px) {

    body {

        padding: 15px;

    }



    .link-container {

        padding: 30px 20px;

    }



    h1 {

        font-size: 2rem;

    }



    .link-btn {

        padding: 12px;

    }

}