body{

font-family: Arial, sans-serif;
background:#0f172a;
color:white;
margin:0;
line-height:1.6;

}

header{
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align:center;
padding:1%;
background:#1e293b;

}

h1{

font-size:1.8em;
margin-bottom: 2%;

}

section{
text-align: justify;
max-width:80%;
margin:auto;
padding: 18% 5% 5% 5%;

}

h2{
font-size: 1.5em;
color:#3aa6ff;
margin-bottom:5%;
text-align: center;
}


/* animacija cifara pi */

.pi-digits span{

font-size:26px;
margin:3px;
display:inline-block;
animation: float 2s infinite alternate;

}

.pi-digits span:nth-child(2){animation-delay:0.2s;}
.pi-digits span:nth-child(3){animation-delay:0.4s;}
.pi-digits span:nth-child(4){animation-delay:0.6s;}
.pi-digits span:nth-child(5){animation-delay:0.8s;}
.pi-digits span:nth-child(6){animation-delay:1s;}
.pi-digits span:nth-child(7){animation-delay:1.2s;}
.pi-digits span:nth-child(8){animation-delay:1.4s;}
.pi-digits span:nth-child(9){animation-delay:1.6s;}
.pi-digits span:nth-child(10){animation-delay:1.8s;}

@keyframes float{

from{transform:translateY(0);}
to{transform:translateY(-12px);}

}



/* sekcija animacije */

.circle-section{

display:flex;
align-items:center;
gap:50px;
flex-wrap:wrap;
justify-content:center;

}

.circle-text{

max-width:420px;

}



/* formule */

.formula{

font-size:22px;
font-weight:bold;

}



/* lista */

ul{

padding-left:20px;

}

li{

margin-bottom:10px;

}



/* linkovi */

a{

color:#3aa6ff;

}



/* footer */

footer{

text-align:center;
padding:20px;
background:#1e293b;

}



/* animacija kruznice */

.draw-circle{

stroke-dasharray:628;
stroke-dashoffset:628;
animation:draw 7s ease infinite;

}

.radius{

transform-origin:160px 160px;
animation:spin 7s linear infinite;

}

@keyframes draw{

0%{stroke-dashoffset:628;}

60%{stroke-dashoffset:0;}

100%{stroke-dashoffset:0;}

}

@keyframes spin{

0%{transform:rotate(0deg);}

60%{transform:rotate(360deg);}

100%{transform:rotate(360deg);}

}

@media (max-width:480px) {
    section{
        padding-top: 35%;
    }
    h1{
        font-size: 1.5em;
    }
}