*{
    margin: 0;
    padding: 0;

}
header{
 margin: 0;
 padding: 0;
 
 width: 100%;
 height: 11vh;
 
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
background-color: #050510; 

  
  background-image: 
    
    radial-gradient(1px 1px at 25px 30px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 50px 80px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 10px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 130px 90px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 170px 40px, #ffffff, rgba(0,0,0,0)),

    
    radial-gradient(circle at 20% 30%, rgba(107, 33, 168, 0.6), transparent 50%), 
    radial-gradient(circle at 80% 60%, rgba(14, 165, 233, 0.4), transparent 50%), 
    radial-gradient(circle at 50% 80%, rgba(219, 39, 119, 0.3), transparent 50%); 

  background-size: 
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 
    100% 100%, 100% 100%, 100% 100%;

  
  background-repeat: 
    repeat, repeat, repeat, repeat, repeat, 
    no-repeat, no-repeat, no-repeat;
 
}
body {
  margin: 0;
  min-height: 100vh;
  background-color: #050510; 
 background-image: 
    radial-gradient(1px 1px at 25px 30px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 50px 80px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 10px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 130px 90px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 170px 40px, #ffffff, rgba(0,0,0,0)),

   
    radial-gradient(circle at 20% 30%, rgba(107, 33, 168, 0.6), transparent 50%), 
    radial-gradient(circle at 80% 60%, rgba(14, 165, 233, 0.4), transparent 50%), 
    radial-gradient(circle at 50% 80%, rgba(219, 39, 119, 0.3), transparent 50%); 

   background-size: 
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 
    100% 100%, 100% 100%, 100% 100%;

  
  background-repeat: 
    repeat, repeat, repeat, repeat, repeat, 
    no-repeat, no-repeat, no-repeat;
}
a{
    color: white;
     margin-top: 1.3%;
     margin-left: 10vh;
     margin-right: 10vh;
     font-size: 1.2em;
     letter-spacing: 0.09em;
     
}
a:hover{
    color: darkred;
}

#hero{
    width: 100%;
    height: 90vh;
    
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
#hero img{
    width: 67%;
}
#prva{
    background-color: rgba(52, 34, 211, 0.671);
    width: 65%;
    margin: auto;
    display: flex;
    height: auto;
    justify-content: space-between;
    
    align-items: center;
    padding: 1% 3% 1% 3%;
    border-radius: 5vh;
    margin-top: 7%;
    
}
#prva div{
    width: 50%;
}
#slika1{
    width: 45%;
    border-radius: 10%;
    border: 0.25em solid;
    border-color: azure;
}
#PrviTekst{
    font-size: 1.5em;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-right: 10vh;
    margin-bottom: 2vh;
    color: azure;

}
#PrviPodnaslov{
    font-size: 1.8em;
    font-family: Arial, Helvetica, sans-serif;
    color: azure;
}
#druga{
    background-color: rgba(12, 119, 169, 0.671);
    width: 65%;
    margin: auto;
    display: flex;
    height: auto;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding: 1% 3% 1% 3%;
    border-radius: 5vh;
    margin-top: 7%;
    



}
#DrugiPodnaslov{
    font-size: 1.8em;
    color: azure;
    font-family: Arial, Helvetica, sans-serif;
}
#DrugiTekst{
    font-size: 1.5em;
    margin-bottom: 10vh;
    color: azure;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}
     

#slika2{
    width: 45%;
    border: 0.25em solid;
    border-color: azure;
}
#slika3{
    width: 45%;
    border: 0.25em solid;
    border-color: azure;
}
#treca{
    background-color:slategrey;
    width: 65%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    justify-content: space-between;

    align-items: center;
    padding: 1% 3% 1% 3%;
    border-radius: 5vh;
    margin-top: 7%;
}

#TreciPodnaslov{
    font-size: 1.8em;
    color: azure;
}

#TreciTekst{
    font-size: 1.5em;
    margin-bottom: 10vh;
    color: azure;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-right: 20vh;
    margin-bottom: 1vh;

}
#treca div{
    width: 50%;
}
#slika4{
    border-radius: 10%;
    border: 0.30em solid;
    border-color:azure ;
    width: 40%;
}

#m14{
    color:coral;
    
    font-size: 1.2em;
    
}
#dm14{
    margin-top: 8%;
     height: 10vh;
    text-align: center;
}
#m14:hover{
    color: crimson;

}

#cetvrta{
    
   
    width: 85%;
    margin: auto;
    display: flex;
    height: auto;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding: 1% 3% 1% 3%;
    border-radius: 5vh;
    

}
#Larry{
    width: 25%;

   

}
#Pite{
    width: 30%;
    height: 35vh;

}
#CetvrtiPodnaslov{

    color: azure;
    font-size: 1.8em;
    text-align: center;
}
#CetvrtiTekst{
    color: azure;
    font-size: 1.5em;
    margin: 5% 0% 5% 0% ;
    text-align: justify;
}

#x{
    display: flex;
    justify-content: space-around;
    align-items: center;
}




.container{
text-align:center;
margin-top: 7vh;
}
input{
display:none;
}

/* izvlačenje */

#p1:checked ~ .pie .slice1{
transform:translate(-140px,-140px);
}

#p2:checked ~ .pie .slice2{
transform:translate(140px,-140px);
}

#p3:checked ~ .pie .slice3{
transform:translate(-140px,140px);
}

#p4:checked ~ .pie .slice4{
transform:translate(140px,140px);
}

/* tekst */

.info{
margin-top:2%;
font-size: 1.1em;
}

.text{
display:none;
}
.pie{
position:relative;
width:300px;
height:300px;
margin:auto;
z-index:1;
}

.info{
margin-top:5%;   /* povećan razmak */
font-size:1.1em;
position:relative;
z-index:2;
}

#p3:checked ~ .pie .slice3{
transform:translate(-120px,80px);
}

#p4:checked ~ .pie .slice4{
transform:translate(120px,80px);
}

#p1:checked ~ .info .t1{display:block;}
#p2:checked ~ .info .t2{display:block;}
#p3:checked ~ .info .t3{display:block;}
#p4:checked ~ .info .t4{display:block;}
.pie{
position:relative;
width:500px;
height:500px;
margin:auto;
}

.slice{
position:absolute;
width:50%;
height:50%;
cursor:pointer;
transition:transform 0.5s ease;

background-image:url("pie.png");
background-size:500px 500px;
background-repeat:no-repeat;
}

/* gore levo */

.slice1{
top:0;
left:0;
border-radius:100% 0 0 0;
background-position:0 0;
}

/* gore desno */

.slice2{
top:0;
right:0;
border-radius:0 100% 0 0;
background-position:-250px 0;
}

/* dole levo */

.slice3{
bottom:0;
left:0;
border-radius:0 0 0 100%;
background-position:0 -250px;
}

/* dole desno */

.slice4{
bottom:0;
right:0;
border-radius:0 0 100% 0;
background-position:-250px -250px;
}











#prvaZanimljivost{
    background-color:darkolivegreen;
    width: 30%;
    
    margin: auto;
    height: 80vh;
    justify-content: space-between;

    
    padding: 1% 3% 1% 3%;
    border-radius: 5vh;
    margin-top: 7%;
}

#decimale{
    width: 58vh;
    margin-top: 10vh;

}

#PrviNaslovZanimljivosti{
    font-size: 2em;
    color: azure;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 2vh;

}
#PrviTekstZanimljivosti{
    font-size: 1.5em;
    color: azure;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
}
 #drugaZanimljivost{
     background-color:darkgoldenrod;
    width: 30%;
    
    margin: auto;
    height: 80vh;
    justify-content: space-between;

    
    padding: 1% 3% 1% 3%;
    border-radius: 5vh;
    margin-top: 7%;
    
    
    }
#Richard{
    width: 60%;
    margin-top: 1%;

}
#DrugiNaslovZanimljivosti{

    margin-top: 5vh;
    font-size: 2em;
    color: azure;
    font-family: Arial, Helvetica, sans-serif;
}
#DrugiTekstZanimljivosti{
    font-size: 1.5em;
    color: azure;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
}
#Prvired{
    display: flex;
    justify-content: space-between;
}

#trecaZanimljivost{
    background-color:lightcoral;
    width: 30%;
    
    margin: auto;
    height: 80vh;
    justify-content: space-between;

    
    padding: 1% 3% 1% 3%;
    border-radius: 5vh;
    margin-top: 7%;
}
#super{
    width: 60%;
    margin-top: 1%;
}
#TreciNaslovZanimljivosti{
    font-size: 2em;
    color: azure;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 5vh;
}
#TreciTekstZanimljivosti{
    font-size: 1.5em;
    color: azure;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    

}
#cetvrtaZanimljivost{

      background-color:dodgerblue;
    width: 30%;
    
    margin: auto;
    height: 80vh;
    justify-content: space-between;

    
    padding: 1% 3% 1% 3%;
    border-radius: 5vh;
    margin-top: 7%;


}
#CetvrtiNaslovZanimljivosti{
    font-size: 2em;
    color: azure;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 5vh;
}
#CetvrtiTekstZanimljivosti{
    font-size: 1.5em;
    color: azure;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
}
#NebeskoTelo{

    width: 60%;
    margin-top: 2%;
}

#Drugired{
    display: flex;
    justify-content: space-between;
}
#zaVideo{
    width: 80%;
    margin: auto;
}
#video{
    width: 90%;
}
#linkzadaci{
    margin-top: 5vh;
     height: 13vh;
     width: 100%;
    text-align: center;
}
#linkzazadatak{
    color:goldenrod;
    font-size: 1.5em;
    
}
#linkzazadatak:hover{
    color: crimson;

}


#krugkojisevrti{
    
    width: 10%;
    
    margin-left: 85vh;
    height: 20vh;
    justify-content: space-between;
    
    
    padding: 1% 3% 1% 3%;
    border-radius: 5vh;
    


}

img{
    width: 60%;
    margin-top: 1%;
}
 
footer{
    margin: 0;
 padding: 0;
 
 width: 100%;
 height: 7vh;
 
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
background-color: #050510; 

  
  background-image: 
    
    radial-gradient(1px 1px at 25px 30px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 50px 80px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 10px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 130px 90px, #ffffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 170px 40px, #ffffff, rgba(0,0,0,0)),

    
    radial-gradient(circle at 20% 30%, rgba(107, 33, 168, 0.6), transparent 50%), 
    radial-gradient(circle at 80% 60%, rgba(14, 165, 233, 0.4), transparent 50%), 
    radial-gradient(circle at 50% 80%, rgba(219, 39, 119, 0.3), transparent 50%); 

  background-size: 
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 
    100% 100%, 100% 100%, 100% 100%;

  
  background-repeat: 
    repeat, repeat, repeat, repeat, repeat, 
    no-repeat, no-repeat, no-repeat;
}
@media (max-width: 480px) {
    #prva, #druga, #treca{
        font-size: 0.8em;
        flex-direction: column;
    }
    #prva div, #druga div, #treca div{
        width: 100%;
    }
    #prva img, #druga img, #treca img{
        width: 45%;
        margin: auto;
    }
    #hero img{
        width: 100%;
    }
    p{
        width: 100%;
        text-align: justify;
    }
    header a{
        text-decoration: none;
    }
    #slika3, #slika2{
        margin-left: 1%;
        width: 45%;
    }
    h1,h2{
        text-align: center;
        margin: 2% 0% 4% 0%;
    }
    #dm14{
        width: 100%;
        margin: 0;
        text-align: center;
    }
    #m14{
        font-size: 1.2em;
    }
    footer{
        height: 15vh;
    }
    #Larry, #Pite{
        display: none;
    }
    #prvaZanimljivost, 
    #drugaZanimljivost, 
    #trecaZanimljivost, 
    #cetvrtaZanimljivost{
        width: 60%;
        font-size: 1em;
    }
    #zaVideo{
        height: 53vh;
        display: flex;
        align-items: center;
    }

}