body{
  font-family:Arial;
  margin:0;
  background:#f2f2f2;
}

header{
  background:palevioletred;
  color:white;
  text-align:center;
  padding:20px;
}

nav{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:10px;
  flex-wrap:wrap;
}

nav a{
  color:white;
  text-decoration:none;
  padding:8px 15px;
  background:#555;
  border-radius:5px;
}

nav a:hover{
  background:#ff9800;
}

main{
  padding:20px;
}

section{
  padding:40px;
  text-align:center;
  background:white;
  margin:20px auto;
  border-radius:8px;
  max-width:900px;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.flex{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}

.wrap{
  flex-wrap:wrap;
}

.center{
  align-items:center;
  justify-content:center;
  height:150px;
}

.box{
  background:#efedd6;
  border:1px solid #ccc;
  padding:30px;
  flex-basis:150px;
  flex-shrink:1;
  flex-grow:0;
}

.grow{
  flex-grow:1;
}


#prvi {
  order: 10;
}

#drugi {
  order: -1;
}

#treci {
  order: 0;
}


@media (max-width:600px){
  .flex{
    flex-direction:column;
    align-items:center;
  }
  nav{
    flex-wrap:wrap;
  }
}