/* Nastavenie box modelu pre všetky elementy (lepšie počítanie šírok/výšok) */ *, *::before, *::after { box-sizing: border-box; } /* Globálne nastavenie pre */ body { margin-top:60px; padding: 0; background-image:url("https://fishbirding.neocities.org/scbs/scbssitebackground.png"); background-repeat: none; background-attachment: fixed; background-size:cover; font-family: 'candara', sans-serif; /* moderný font */ color:#402914; display: flex; flex-direction: column; align-items: center; /* centrovanie obsahu */ } #big { color:#402914; font-weight: bold; font-size: 30px; } /*inner box*/ .inner-box { border-radius: 15px; padding: 20px; margin: 20px; background: #BF9876; width:95%; text-align: center; } /*character page inner box*/ .char-innerbox{ border-radius: 15px; padding: 20px; margin: 20px; background: #BF9876; width:95%; text-align: left; float: left; } #charP{ word-wrap: break-word; font-size: 15px; } .CharInfo{ border-radius: 20px; border: 10px solid #E19435; background: #F6D682; padding: 20px; width: 350px; position: absolute; left: 410px; top: 70px; float: left; } hr{ border: none; width: 340px; position:relative; height: 10px; background: #E19435; max-width: 350px; left: 60px; } .leapimage{ display: block; clear:both; width: 300px; display: flex; flex-flow: wrap; } /* Navigačné tlačidlá nad obsahom */ .nav-buttons { margin: 20px; display: flex; gap: 20px; /* medzery medzi tlačidlami */ } /* Štýl jednotlivých tlačidiel */ .nav-buttons button { padding: 10px 20px; cursor: pointer; } /* Rám (kontajner) na hlavný obsah + priestor pre obrázky */ .frame { position: relative; max-width: 950px; /* max šírka pre desktop */ width: 100%; height:auto; margin-bottom: 40px; margin-top:40px; padding: 90px 40px 80px 40px; /* horný priestor na obrázky */ } /* Mačka vľavo hore (pozicionovaná absolútne) */ .cat1 { position: absolute; top: -15px; left: 20px; width: 190px; height: auto; z-index: 4; } /* Mačka vpravo dole */ .cat2 { position: absolute; bottom: 30px; right: -30px; width: 250px; height: auto; z-index: 4; } /* Domčekové logo na vrchu stránky */ .home { position: absolute; top: -9px; left: 55%; transform: translateX(-50%); /* centrovanie horizontálne */ width: 280px; z-index: 5; } /* Box s textom a obsahom stránky */ .content-box { position: relative; background-image:url("https://i.imgur.com/pEklb1U.png"); /* svetlozeleno-sivý podklad */ margin-top: 50px; margin-left: 40px; margin-bottom: 40px; padding: 30px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* jemný tieň */ z-index: 3; text-align: center; text-justify: inter-word; } /* Clearfix – zabezpečí, že obtekané obrázky neovplyvnia výšku */ .content-box::after { content: ""; display: block; clear: both; } /* Nadpisy v content-boxe */ .content-box h1, .content-box h2 { margin-top: 0; font-size:35; color: #222; } /* Štýl odstavcov */ .content-box p { font-size: 20px; color: #281402; line-height: 1.6; text-align: justify; /* zarovnanie do bloku */ } .back { align-self: left; left: 150px; top: 199px; position:absolute; z-index:20; } .invisbutton { left: 52px; top: 50px; position:absolute; opacity: 0; z-index:9; } /* Obrázky vo vnútri odstavcov */ .content-box p img { max-width: 100%; height: auto; display: inline-block; margin: 0 15px 10px 0; /* medzera okolo obrázka */ shape-margin: 10px; /* obtekanie textu */ } /* ----- Odkazy ----- */ .content-box a { color: #2563eb; /* príjemná modrá */ text-decoration: none; /* bez podčiarknutia štandardne */ font-weight: 500; transition: color 0.2s, box-shadow 0.2s, text-decoration 0.2s; border-radius: 4px; padding: 2px 6px; } /* Podčiarknutie pre prístupnosť len pri focus klávesnicou */ .content-box a:focus-visible { text-decoration: underline; } /* Dve pohybujúce sa postavičky (ľavá a pravá) */ #imgLP{ position: fixed; bottom: 0; width: 200px; z-index: 5; } #imgPL{ position: fixed; bottom: 0; width: 200px; z-index: 5; } /* Ľavá postavička sa pohybuje doprava */ #imgLP { left: 0; animation: moveRight 12s linear infinite; } /* Pravá postavička sa pohybuje doľava */ #imgPL { right: 0; animation: moveRight 12s linear infinite; } /* Animácia: zľava doprava */ @keyframes moveRight { 0% { left: -150px; } 100% { left: 100%; } } /* ----- Responzívne prispôsobenie pre mobil ----- */ @media (max-width: 600px) { .frame { padding: 40px 20px 60px 20px; } .cat1, .cat2 { width: 150px; /* zmenšenie mačiek */ } .home { width: 150px; /* menšie logo */ } .content-box { margin-left: 0; padding: 20px; } .content-box p img { float: none; /* obrázok do stredu */ display: block; margin: 0 auto 10px auto; } .nav-buttons { flex-direction: column; /* tlačidlá pod seba */ gap: 10px; } #imgLP, #imgPL { /* display: none; /* skryj postavičky na mobile */ width:120px; } }