* {
    margin: 0;
    padding: 0;
    font-family: Funkrocker;
}

header {
    height: 10vh;
    width: 100%;
    display: none;
}

body{
    background-image: url(slike/pozadina.png);
}

main {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: rgb(0, 0, 0);
    background-image: url(slike/pozadina.png);
    background-size: contain;

    img {
        height: 10vh;
    }
}

.slika {
    height: 60vh;
    width: 30vw;
    border: solid blue;
    margin-left: 25vh;
    margin-top: 10vh;
    opacity: 0;
}

.tekst-nav {
    height: 10vh;
    margin-top: 5vh;
    width: 40vw;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
}

nav {
    display: flex;
    flex-direction: row;
    width: 40vw;
    height: 20vh;
    align-items: center;
    justify-content: center;
    z-index: 1;

    .tex2 {
        border: solid 5px rgb(19, 95, 161);
    }

    .tex3{
        border: solid 5px rgb(19, 161, 31);
    }

}

nav li {
    list-style: none;
    font-size: 25pt;
}

nav a {
    display: inline-block;
    text-decoration: none;
    border: solid 5px rgb(255, 0, 0);
    text-align: center;
    margin-left: 3vh;
    margin-right: 4vh;
    /*  box-shadow: 10px 10px rgb(56, 75, 109); */
    background-color: rgb(255, 255, 255);
    width: 10vw;
    height: 5vh;
    /* transition: transform 0.2s ease; */
    line-height: 5vh;
    z-index: 0;
    margin-top: 20vh;
    transition: margin-top 0.5s;

}

nav a p {
    color: black;
    font-family: Black Ops One, sans-serif;
    font-size: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgb(255, 255, 255);
    color: white;
    border: 2px solid white;
    padding: 10px 20px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

nav a p:hover{
    background: black;
    color: yellow;
    transform: scale(1.1) rotate(-3deg);
}


nav a:hover {
    /* transform: perspective(500px) rotate(-11deg) rotateY(20deg) scale(1.2); */
    background-color: rgb(255, 255, 255);
    margin-top: 13vh;
}


.oba {
    display: flex;
    flex-direction: column;
    margin-left: 10vh;
    margin-top: 10vh;
}

.tekst {
    background: rgb(236, 228, 205);
    padding-top: 50px;
    height: 40vh;
    margin: 0;
    overflow: hidden;
    width: 40vw;
    box-shadow: 17px 17px 0px 30px rgb(25, 41, 83);
    transform: skew(10deg);
    position: relative;
    z-index: 1;
}

.tekst1 {

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 50vh;

    h1 {
        width: 20vw;
        position: absolute;
        bottom: 37vh;
        font-size: 70pt;
        color: #e9d8d6;
        transform: rotate(10deg);
        letter-spacing: 5px;
    }

    p {
        position: absolute;
        bottom: 25vh;
        margin-left: 5vh;
        margin-right: 5vh;
        box-shadow: 5px 5px red;
        background-color: aliceblue;
        padding: 1vh;
        font-family: 'Permanent Marker', cursive;
    }

    img {
        margin-left: 58vh;
        margin-top: 15vh;
    }

    strong {
        color: rgb(139, 105, 30);
        font-family:'Permanent Marker', cursive;;
    }
}

/*.krug{
  height: 25vh;
  width: 25vh;
  background-color: #555;
  border-radius: 50%;
  transform: skew(-10deg);
  margin-left: 5vh;
  margin-top: 10vh;
}*/
.krugovi {
    display: flex;
    flex-direction: row;
}

/* Klasu za skrivanje kruga */
.krug.hidden {
    display: none;
    /* Skriva krug */
}


/* Napredniji efekti tranzicije */
.tekst1,
.tekst2,
.tekst3 {
    position: absolute;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px) scale(0.8);
    filter: blur(5px);
    transition: opacity 0.5s ease-in-out,
        transform 0.5s ease-in-out,
        filter 0.5s ease-in-out;
}

/* Aktivna klasa - kada se tekst pojavi */
.tekst1.active,
.tekst2.active,
.tekst3.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    filter: blur(0);

}

/* Ostavljen zvučnik tačno onakav kakav si ga napravio */
.zvucnik {
    width: 70vh;
    height: 15vh;
    border: solid rgb(110, 110, 110) 15px;
    border-top: solid rgb(124, 124, 124) 25px;
    border-bottom: none;
    z-index: 0;
    position: absolute;
    top: 15vh;
}

.pozadina {
    z-index: 0;
    position: absolute;
    top: 20vh;
    right: 9vh;
    border-bottom: 60vh solid yellow;
    border-left: 3vh solid transparent;
    border-right: 5vh solid transparent;
    transform: skew(8deg);
    height: 0;
    width: 48vw;
}

.pozadina2 {
    z-index: 0;
    position: absolute;
    border: solid 50px yellow;
    top: 12vh;
    right: 20vh;
    height: 25vh;
    width: 40vw;
}

nav a.active-btn p {
    background: black;
    color: yellow;
    transform: scale(1.1) rotate(-3deg);
}


/* Stilizacija aktivnog dugmeta */
/* General active button styling */
nav a.active-btn {
    background-color: rgb(238, 200, 165);
    /* Default active background color */
    color: black;
    box-shadow: 0px 0px 15px rgba(179, 250, 255, 0.8);
    margin-top: 13vh;
}

/* Special styling for .tex2 when active */
nav a.tex2.active-btn {
    background-color: rgb(185, 230, 243) !important;
    /* Blue background when active */
    color: white !important;
    /* White text for contrast */
}

/* Stilizacija aktivnog gumba u .tekst3 */
nav a.tex3.active-btn {
    background-color: rgb(187, 235, 187) !important; /* Svijetlo zelena pozadina */
    color: white !important; /* Bijeli tekst za kontrast */
    box-shadow: 0px 0px 15px rgba(0, 128, 0, 0.8); /* Zeleni box-shadow */
    margin-top: 13vh; /* Da se podudara s animacijom kad je aktivno */
}



.tekst {
    background-image: url(slike/old-school-boombox-in-gray-b5dbhn2rwtn1537o.webp);
    background-size: cover;
}

.tekst.no-bg {
    background-image: url(slike/modern-sleek-brick-wall-background-ansbphsi1x36lflo.jpg) !important;
    background-color: rgb(236, 228, 205);
    /* Dodaj boju da ne ostane providno */
}


.tekst2 {

    .hobi {
        width: 100%;
        display: flex;
        flex-direction: row;
        margin-top: 3vh;

        h2 {
            margin-right: 7vh;
            margin-left: 13vh;
            transform: skew(-10deg);
            font-size: 30pt;
            transform: rotate(-5deg);
            color: #cad4ee;
            letter-spacing: 5px;
        }
    }

    .lopta {
        width: 20vh;
        height: 20vh;
        margin-left: 10vh;
        margin-right: 18vh;
    }

    .lopta:hover {
        animation: rotate-skew 1s linear infinite;
    }

    .kist {
        width: 20vh;
        height: 20vh;
        position: relative;
        /* Omogućava pomicanje elementa */
        transition: left 0.5s ease, border-bottom 0.8s ease;
        left: 0;
        /* Početna pozicija */
    }

    .kist:hover {
        left: 20px;
        /* Polako pomiče kist udesno */
        border-bottom: 3px solid rgb(57, 80, 121);
        /* Dodaje crni border dolje */
    }

    img {
        transform: skew(-10deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

@keyframes rotate-skew {
    0% {
        transform: skew(-10deg) rotate(0deg);
    }

    100% {
        transform: skew(-10deg) rotate(360deg);
    }
}

.tekst2 .kist {
    width: 20vh;
    height: 20vh;
    position: relative;
    transition: left 0.5s ease; /* Pomicanje kista udesno */
}



.tekst3{ 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .naslovi{
        display: flex;
        flex-direction: row;
    }

    a{
        text-decoration: none;
        color: rgb(199, 233, 203);

        h2{
            color: black;
        }
    }

        h1{
            color: rgb(174, 211, 171);
            font-size: 38pt;
            margin-left: 8vh;
            letter-spacing: 5px;
            transition: transform 0.3s;
        }

        h1:hover{
            transform: rotate(3deg);
            cursor: pointer;
        }

        h2{
        box-shadow: 5px 5px rgb(30, 255, 0);
        background-color: aliceblue;
        font-family: 'Permanent Marker', cursive;
        width: 6vh;
        padding-left: 2vh;
        margin-left: 5vh;
        margin-right: 5vh;
        margin-top: 8vh;
        transition: 0.3s;
        }

        h2:hover{
            scale: 1.2;
            cursor: pointer;
        }
}

.slika{
    background-image: url(slike/modern-sleek-brick-wall-background-ansbphsi1x36lflo.jpg);
    background-size: cover;
}

/*responzivni*/

@media (max-width: 768px) {
    .pozadina1, .pozadina2, .pozadina {
        display: none;
    }

    .oba {
        margin: 0%;
    }

    .tekst {
        width: 70vw;
        height: 70vh;
        margin-bottom: 10vh;
        transform: none;
        border: 20px solid rgb(36, 36, 68);
        box-shadow: none;
        background-image: url(slike/nokia.jpg);
        background-size: cover;
        transition: height 0.5s;
    }

    main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .zvucnik {
            width: 60vw;
            height: 10vh;
            top: 45vh;
            right: 8vh;
        }
    }

    nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    /* Postavi početnu marginu da se ne pomiče kod hovera */
    nav a {
        width: 10vh;
        height: 5vh;
        margin: 13vh 1vh;
        background-color: black;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border: solid 5px rgb(255, 0, 0);
        position: relative;
        transition: none;
        top: 5vh;
        left: 9.5vh;
    }

    /* Tekst uvijek vidljiv */
    nav a p {
        font-size: 11pt;
        color: rgb(0, 0, 0);
        text-align: center;
        line-height: 5vh;
        margin: 0;
        padding: 0;
        visibility: visible; /* Osigurava da se ne sakrije */
        opacity: 1; /* Osigurava punu vidljivost */
        width: 10vh;
    }

    /* Hover efekti bez pomicanja */
    nav a:hover {
        background-color: black;
        border-color: yellow;
    }

    nav a:hover p {
        color: yellow;
        transform: none;
    }

    .tekst.no-bg{
        height: 50vh;
    }

    .tekst1{
        p{
           bottom: 5vh;
        }
        h1{
            font-size: 40pt;
            width: 30vh;
            text-align: center;
        }
    }

    .tekst2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .lopta{
            margin-right: 7vh;
            width: 15vh;
            height: 15vh;
            padding-bottom: 10vh;
        }
        .lopta:hover{
            animation: none;
        }

        .kist{
            width: 15vh;
            height: 15vh;
        }

        .hobi{
            flex-direction: column;
            z-index: -1;
            position: absolute;
            top: 15vh;
            right: 3vh;

            h2{
                margin-bottom: 15vh;
            }
        }
    }

    .tekst3{
        h1{
            font-size: 20pt;
            width: 35vh;
            text-align: center;
        }

        .naslovi{
            flex-direction: column;
            
        }

        h2{
            margin-top: 5vh;
        }

        h1{
            margin-left: 0;
        }
    }
}