/*
Theme Name: Sadpepe-theme
Theme URI: https://sadpepetattoo.hu/
Author: Sadpepe
Author URI: https://sadpepetattoo.hu/
Description: Sadpepe téma
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Alapvető WP elemek elrejtése */
#header, #footer, hr {
    display: none;
}

/* Alap háttér (Asztali nézet) */
html, body {
    background: url("https://sadpepetattoo.hu/wp-content/uploads/2026/08/background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.main-container {
  display: flex;
}

/* =========================================
   ASZTALI NÉZET (Eredeti kódod alapján)
   ========================================= */

.img-sadpepe { position: fixed; top: 5%; left: 20%; z-index: 1000; width: auto; height: auto; }
.img-jobbosn { position: fixed; top: -2px; right: 10%; z-index: 1000; width: 150px; height: auto; }
.img-balosn { position: fixed; top: -2px; left: 10%; z-index: 1000; width: 130px; height: auto; }
.img-kepkeret { position: fixed; top: 5%; right: 23%; z-index: 1000; width: 280px; height: auto; }
.img-polc2 { position: fixed; top: 40%; right: 10%; z-index: 1000; width: auto; height: auto; }
.img-polc1 { position: fixed; top: 35%; left: 15%; z-index: 1000; width: 350px; height: auto; }
.img-posztit { position: fixed; bottom: 30%; right: 10%; z-index: 1000; width: auto; height: auto; }
.img-lemez { position: fixed; bottom: 25%; right: 25%; z-index: 1000; width: auto; height: auto; }
.img-noteszb { position: fixed; top: 17%; left: 25%; z-index: 1000; width: auto; height: auto; }
.img-bemutatkozas { position: fixed; bottom: 20%; left: 20%; z-index: 1000; width: auto; height: auto; }

/* Képek globális védelme a túllógás ellen */
[class^="img-"] {
    max-width: 100%;
}

/* =========================================
   TABLET NÉZET (Kisebb asztali / fekvő tablet)
   ========================================= */
@media (max-width: 1024px) {
    .img-kepkeret { width: 220px; top: 10%; right: 15%; }
    .img-polc1 { width: 280px; left: 5%; }
    .img-polc2 { top: 35%; right: 5%; }
    .img-jobbosn { width: 120px; right: 5%; }
    .img-balosn { width: 100px; left: 5%; }
    .img-bemutatkozas { bottom: 30%; left: 5%; }
    .img-lemez { bottom: 35%; right: 15%; }
    .img-posztit { bottom: 40%; right: 0%; }
    .img-noteszb { left:20%; }
}

/* =========================================
   MOBIL NÉZET 
   ========================================= */
@media (max-width: 768px) {
    html, body {
        /* Mobilon engedjük a függőleges görgetést, ha az elemek nem férnek ki */
        overflow-y: auto; 
        overflow-x: hidden;
        background-attachment: fixed; /* Görgetésnél is a helyén marad a háttér */
    }
    
    /* Az elemek méreteit a képernyő szélességéhez (vw) igazítjuk és a szélek felé toljuk */
    .img-sadpepe { top: 5%; left: 5%; width: 45vw; }
    .img-jobbosn { top: 0; right: 2%; width: 20vw; }
    .img-balosn { top: 0; left: 2%; width: 18vw; }
    .img-kepkeret { top: 12%; right: 5%; width: 45vw; }
    .img-noteszb { top: 25%; left: 5%; width: 35vw; }
    .img-polc1 { top: 40%; left: 5%; width: 50vw; }
    .img-polc2 { top: 45%; right: 5%; width: 45vw; }
    .img-lemez { bottom: 15%; right: 5%; width: 35vw; }
    .img-posztit { bottom: 20%; right: 2%; width: 40vw; }
    .img-bemutatkozas { bottom: 5%; left: 5%; width: 45vw; width:100px; }
}