html {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'KZZ', Arial, sans-serif;
	box-sizing: border-box;
	cursor: url('cursor.png'), auto;
}
:root {
    /* Početna pozicija (centar) */
    --cursor-x: 50vw;
    --cursor-y: 50vh;
}

body {
    background-color: #000; /* Tvoja crna pozadina */
    
    /* Ovo je svetlo koje prati miša */
    background-image: radial-gradient(
        circle 600px at var(--cursor-x) var(--cursor-y),
        rgba(40, 30, 60, 0.25), /* Centar: Slabo ljubičasto svetlo */
        transparent 50%         /* Ivica: Potpuni mrak */
    );
    
    background-attachment: fixed; /* Da svetlo ne beži kad skroluješ */
    margin: 0;
}
.dither-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* BITNO: Dozvoljava da klikneš KROZ šum */
    z-index: 9999; /* Uvek na vrhu */
    opacity: 0.02; /* Koliko je jak šum (smanji ako smeta) */
    
    /* Generisanje šuma bez spoljne slike (SVG kod) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}


@font-face {
	font-family: 'KZZ';
	src: url('kzz_font.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@keyframes magic-barrier {
    0% {
        /* Tamno stanje (energija opada) */
        border-color: rgba(175, 133, 236, 0.4); 
        box-shadow: 0 0 2px rgba(175, 133, 236, 0.1); 
    }
    50% {
        /* Svetlo stanje (energija na maksu) - NEON EFEKAT */
        border-color: #AF85EC; 
        box-shadow: 0 0 15px rgba(175, 133, 236, 0.6), /* Spoljni sjaj */
                    inset 0 0 10px rgba(175, 133, 236, 0.2); /* Unutrašnji sjaj */
    }
    100% {
        /* Vraćanje u tamno */
        border-color: rgba(175, 133, 236, 0.4); 
        box-shadow: 0 0 2px rgba(175, 133, 236, 0.1); 
    }
}

.layout {
	display: grid;
	grid-template-columns: 40% 60%;
	grid-template-rows: 60vh 40vh;
	grid-template-areas:
	"left right"
	"bottom bottom";
	height: 100%;
	color: white;
	position: relative;
}
.left-box {
	border: 0.05px solid #AF85EC;
	grid-area: left;
	background: black;
	padding: 20px;
	font-size: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	animation: magic-barrier 4s infinite ease-in-out;
    position: relative; 
    z-index: 10;
}
.right-box {
	border: 0.05px solid #AF85EC;
	grid-area: right;
	background: black;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	animation: magic-barrier 4s infinite ease-in-out;
    position: relative; 
    z-index: 10;
}
.bottom-box {
	border: 0.05px solid #AF85EC;
	grid-area: bottom;
	background: black;
	padding: 20px;
	font-size: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	/* animation-delay: 2s;
		Trik: Dodajemo "delay" (kašnjenje) od 2 sekunde. 
		Tako vertikalna i horizontalna linija ne pulsiraju istovremeno, 
		već naizmenično, što deluje mnogo "organskije". */
	animation: magic-barrier 4s infinite ease-in-out;    
    position: relative;
    z-index: 10;
}
.aktivan, a:hover {
    color: #AF85EC;
}


a {
    color: inherit;
    text-decoration: none;
	cursor: url('linkcursor.png'), pointer;
}

ul li {
    list-style: none;
	font-size: 40px;
    padding-top: 20px;
}

img {
	max-width: 100%;
	max-height: 100%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: right;
	cursor: url('linkcursor.png'), pointer;
}


#typing-list a, p {
    color: transparent;
}

#preloader.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

#navigacija ul li {
    display: inline-block;
    margin-left: 30px;
    font-size: 40px;
    padding-top: 20px;
}

/* mobilna optimizacija */
@media (max-width: 700px) {

    /* ukidamo scroll na mobilnom */
    body, html {
        margin: 0;
        padding: 0;
        overflow: hidden; 
        height: 100%;
        width: 100%;
    }

    .layout {
        display: flex;
        flex-direction: column;
        height: 100vh;   /* ceo ekran */
        width: 100vw;
        overflow: hidden;
    }

    /* slika na celom ekranu */
    .left-box img {
        width: 100vw;
        height: 100vh;
        object-fit: cover;   /* popuni ekran */
        display: block;
    }

    .left-box,
    .right-box,
    .bottom-box {
        border: none; /* makni bordere na mobilnoj */
        padding: 0;
        margin: 0;
    }

    /* navigacija ide ispod slike i preko celog ekrana ako treba */
    #navigacija ul {
        display: block;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    #navigacija ul li {
        display: block;
        margin: 12px 0;
        font-size: 26px;
    }
}