@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&family=Fira+Code&display=swap');

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:'Poppins',Arial,sans-serif;
  color:#eaeaea;
  line-height:1.7;
  background:radial-gradient(circle at 20% 30%,#ff66a6 0%,transparent 30%),
             radial-gradient(circle at 80% 70%,#00e5ff 0%,transparent 30%),
             #0d0d11;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.nav2{
  position:sticky;          /* ostaje pri vrhu pri skrolu */
  top:0;
  z-index:1000;
  display:flex;
  justify-content:center;
  gap:1rem;
  padding:1rem 1.5rem;
  backdrop-filter:blur(6px);
  background:rgba(0,0,0,.50);
  border:1px solid rgba(255,255,255,.05);
box-shadow: 0 0 30px rgb(0 0 0 / 10%), 0 0 30px rgb(0 0 0 / 10%);
}



.nav2 a{
  font-weight:500;
  letter-spacing:.03em;
  color:#eaeaea;
  padding:.4rem .6rem;
  border-radius:.5rem;
  transition:
      color .3s,
      background-color .3s,
      box-shadow .3s;
}

.site-nav a:hover,
.site-nav a:focus{
  color:#ff66a6;
}

.nav2 a.active,      
.nav2 a:target{
  background:#ff66a6;
  color:#0d0d11;
  box-shadow:0 0 8px #ff66a6;
}

a {
  color:#00e5ff;
  text-decoration:none;
  transition:color .3s;
}

a:hover {
  color:#ff66a6;
}

header,footer{
  width:100%;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
  text-align:center;
  padding:2rem 1rem;
}
header h1{
  font-size:3rem;
  background:linear-gradient(90deg,#ff2870,#00e5ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

header h2 {
  font-size:1rem;
  color:#eaeaea;
  opacity:.8;
  margin-top:5rem;
}

h2 {
  margin-top:1.7rem;
}
.p2 {
  margin-top:1rem;
}

.drugih2 {
  margin-top:-0.7rem;
}

main {
  width:100%;
  max-width:960px;
  margin:4rem auto;
  padding:0 1rem;
  flex:1 1 auto;
}

section {
  margin-bottom:4rem;
}

article {
margin-bottom: 3rem;
    padding: 2rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgb(0 0 0 / 5%);
    border-radius: 1rem;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 30px rgb(0 0 0 / 10%), 0 0 30px rgb(0 0 0 / 10%);
}



h1,h2,h3 {
  font-weight:700;
  margin-bottom:1rem;
}
p {
  margin-bottom:1rem;
margin-left:1rem;
}

.plavi {
    border:1px solid #00e5ff;
  box-shadow:0 0 10px #00e5ff;
}
pre{
  background:#14141a;
  padding:1rem 1.5rem;
  border-radius:1rem;
  overflow-x:auto;
  border:1px solid #ff66a6;
  box-shadow:0 0 10px #ff66a6;
  font-family:'Fira Code',monospace;
  font-size:.9rem;
}


details{
  margin:1rem 0;
  border:1px solid #00e5ff;
  border-radius:1rem;
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
  transition:border-color .3s;
}

details:hover,
details:focus-within{
  border-color:#ff66a6;
}

summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding:1rem 1.5rem 1rem 2.25rem;
  font-weight:500;
}

summary::before{
  content:'\25B6'; /* onaj trokut */
  position:absolute;
  left:1rem;
  
    bottom:13px;
  font-size:1.25rem;
  transform:rotate(0deg);
  transition:transform .3s;
}



details[open] summary::before {
  transform:rotate(90deg);
}


details ul{
  list-style-position:inside;
  padding-left:0;
  margin-left:.25rem;
}


table {
  width:100%;
  border-collapse:collapse;
  margin:1rem 0;
}

th,td{
  border:1px solid rgba(255,255,255,.1);
  padding:.5rem .75rem;
  text-align:left;
}
th {
  background:#0f0f14;
}

li {
  margin-left:1rem;
   margin-bottom:1rem;
}

@media (max-width:600px){
  
  header h1 {
    font-size:2rem;
  }
    .site-nav{
     
    flex-wrap:wrap;
    gap:5rem;
  }
    
  article {
    padding:1.5rem;
  }
  pre{font-size:.8rem}
}

@media (max-width:400px){

  header h1 {
    font-size:1.75rem;
  }

  header h2 {
    font-size:.875rem;
  }
}