* {
    font-family: 'Kanit', sans-serif;
    pointer-events: none;
}

html, body {
    padding: 0;
    margin: 0;
}


a {
    pointer-events: auto !important;
    color: #FFF;
}

a img {
    vertical-align: middle;
}


.background-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000 url('bg_css.png') repeat;
    opacity: .65;
    z-index: 2;
}

.video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: opacity 0.5s;
}

@media (max-width: 768px) {
    body { 
        background: url('https://grandeconnection.pl/img/vice_bg.jpg') no-repeat center center; 
        background-size: cover; 
        background-attachment: scroll; 
    }
    .overlay { display: none; } 
}

@media (max-width: 768px) {
  h1, span {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.95);
    -webkit-text-stroke: 1px white; 
  }
}

.video.play {
    opacity: 1;
}


.home-button.left {
    position: fixed;
    top: 40px;
    left: 40px;
    z-index: 1000;
}

.home-button.right {
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 1000;
}

.home-button img {
    width: 60px; 
    height: auto;
    transition: transform 0.3s ease;
    pointer-events: auto;
}

.home-button img:hover {
    transform: scale(1.8);
    transform: scale(1.8);
    filter: drop-shadow(0 0 10px #7fff00)
            drop-shadow(0 0 20px #7fff00)	
}


.content {
    position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 3;
    align-items: center;
    justify-content: center;
}

.info {
    position: relative;
    text-align: center;
    width: 503px;
    min-width: 503px;
    height: 359px;
}


.logo {
    width: 480px;
    height: 288px;
    opacity: 0.85;
    filter: contrast(125%);
    transition: width 0.3s ease, height 0.3s ease;
}


.message-background {
    position: absolute;
    z-index: -1;
    width: 593px;
    height: 146px;
    top: 238px;
    left: -42px;
    opacity: 0;
    transform: rotate(-1deg);
}

.message {
    margin-top: 9px;
    text-transform: uppercase;
    line-height: 34px;

}

h1, span {
    padding: 0;
    margin: 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: rgba(0, 0, 0, 0);
    font-size: 50px;
    text-shadow: rgba(0, 0, 0, 0.53) 1px 2px 0, rgba(162, 162, 162, 0.58) 0 0 0;
    font-weight: 100;
}

h1 {
    color: #fff;
    text-shadow: 
        0 0 5px #7fff00,
        0 0 10px #7fff00,
        0 0 20px #7fff00,
        0 0 40px #7fff00;
}

@media (max-width: 768px) {
    .bg-video 
    .overlay { background: url('https://grandeconnection.pl/img/bg_css.png') center/cover no-repeat; }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://grandeconnection.pl/img/bg_css.png') repeat;
    opacity: 0.65;
    z-index: 2; 
}

span {
    font-size: 18px;
}

/* Responsywność */
@media (max-width: 767px) {
    .info { transform: scale(0.8); }
    .logo { width: 450px !important; height: auto !important; }
}

@media (max-width: 520px) {
    .info { transform: scale(0.7); }
}

@media (max-width: 400px) {
    .info { transform: scale(0.55); }
}






.links {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 30px;
}

.links a img {
    width: 50px;
    height: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    pointer-events: auto;
}


.links a.patronite:hover img {
    transform: scale(1.5);
    filter: drop-shadow(0 0 10px #ff922b)
            drop-shadow(0 0 20px #ff922b)

}


.links a.youtube:hover img {
    transform: scale(1.8);
    filter: drop-shadow(0 0 10px #ff0000)
            drop-shadow(0 0 20px #ff0000)
}

.links a.sklep:hover img {
    transform: scale(1.8);
    filter: drop-shadow(0 0 10px #33d649)
            drop-shadow(0 0 20px #33d649)
}

.links a.player:hover img {
    transform: scale(1.8);
    filter: drop-shadow(0 0 10px #DD4492)
            drop-shadow(0 0 20px #DD4492)
}


.links a.instagram:hover img {
    transform: scale(1.8);
    filter: drop-shadow(0 0 10px #9775fa)
            drop-shadow(0 0 20px #9775fa)
}





.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    z-index: 1000;
}

.footer-link {
    font-weight: bold;
    color: #7fff00;  
    text-decoration: none;  
    cursor: pointer;
}

.footer-link:hover {
    text-decoration: none;  
}

.footer .author {
    font-weight: bold;
    /*color: #7fff00;   */
    text-decoration: none; 
}

.footer .author:hover {
    text-decoration: none; 
}


.logo {
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}