/* TŁO STRONY */
body{
    margin:0;
    min-height:100vh;
    background:black;
    background-image:url('http://trotuary.pl/images/bkg2.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    color:white;
    font-family:'Cinzel', serif;
}

/* LOGO */
.hero{
    display:flex;
    justify-content:center;

    margin-top:60px;
}

.logo{
    width:420px;
    max-width:90%;
}

/* GRID */
.menu-grid{
    width:90%;
max-width:500px;

    margin:50px auto;

    display:grid;
    grid-template-columns:repeat(2, 1fr);

    gap:20px;
}

/* KAFLE */
.tile{
    aspect-ratio:1 / 1;

    display:flex;

    justify-content:flex-end;
    align-items:flex-end;

    padding:24px;

    border:2px solid rgba(255,255,255,0.5);

    box-sizing:border-box;

    color:white;
    text-decoration:none;

    font-size: clamp(14px, 2vw, 20px);

    text-transform:lowercase;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

/* HOVER */
.tile:hover{
    background-color:rgba(255,255,255,0.15);

    border-color:white;

    transform:scale(1.02);

    cursor:pointer;
}

/* USUNIĘCIE STYLÓW LINKÓW */
.tile:visited,
.tile:active,
.tile:hover,
.tile:focus{
    color:white;
    text-decoration:none;
}

@media (max-width: 600px){

    .menu-grid{
        grid-template-columns:1fr;
        width:90%;
    }

    .tile{
        aspect-ratio: 1 / 1;
        font-size:20px;
    }

    .hero .logo{
        width:80%;
    }
}


/* SOCIALS */
.socials{
    display:flex;
    justify-content:center;
    gap:18px;

    margin-top:20px;
    margin-bottom:10px;
}

.icon{
    width:35px;
    height:35px;

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

    opacity:0.85;

    transition:0.3s ease;
}

.icon svg{
    width:100%;
    height:100%;

    fill:white;
}

.icon:hover{
    opacity:1;
    transform:scale(1.15);
}