@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

* {
    margin:0;
}

h2 {
    margin-left:18%;
 padding-bottom:20px;
    font-family: "Sawarabi Gothic", system-ui;
    color:#EF6782;
}

h1 {
    font-weight:300;
    font-style:italic;
    font-family: "Source Sans 3", sans-serif;
    color:rgb(255, 255, 255);
    cursor: pointer;
    transition: transform 0.5s;
}

h1:hover {
     transform: scale(1.2);
}

p {
    font-family: "Sawarabi Gothic", system-ui;
}

a {
    font-family: "Source Sans 3", sans-serif;
color:rgb(255, 255, 255);
transition: 0.3s;
}

ul {
    list-style: none;
    width:fit-content;
    margin:auto;
}

ul li a {
    text-decoration: none;
    z-index: 5;
}

ul li {
    display:inline-block;
}

li {
    padding-right:160px;

    
}


a:hover {
    color:#ffa3b6e8;
 
    
}

hr {
   
    height: 1px;
    border: 0;
    border-top: 1px solid #ffffff;
    margin-bottom:30px;
     width:50%;
     float:left;
    
}

.prvi {
   float:left;
   margin-left:16%;
   margin-top:11%;
   font-size:230%;
   
}
    

b {
    color:#EF6782;
}

.drugi {
    background: linear-gradient(90deg, rgb(247, 174, 182) 0%, rgb(255, 255, 255) 100%);
    border-bottom: 2px solid #F17D94;
    padding-bottom:74px;
    padding-top:30px;
    margin-top:-30px;
    border-top: 2px solid #F17D94;
}

header {

    background: linear-gradient(90deg, rgba(32, 110, 176, 1) 0%, rgba(28, 163, 226, 1) 100%);
    border-bottom: 2px solid #1A64AB;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 5;
}

.header2 {
    height:110px;
    
}



nav {
    float:right;
    margin-right:3%;

    font-size:23px;
   
}

p {
    width: 60em;
    font-size: 1.27em;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    line-height:29px;

 
}


img {
width:270px;
margin-left:34px;
}

.pomak {
    margin-top:12.2vh;
}
#prva {
    background-image:url(slike/trening.png);
    margin-top:-4px;
    height:59vh;
   background-repeat: no-repeat;

    
}

#druga {
    background-image:url(slike/fitness.png);
    height:90vh;
 
    background-repeat: no-repeat;
    margin-bottom:-30px;
    
}

.div1, .div3 {
    background: linear-gradient(90deg, rgba(245,160,170,0.5914740896358543) 0%, rgba(255,255,255,1) 100%);
    z-index:1;
    width:50%;
padding:3%;
border: 2px #EF6782 solid;
border-radius:24px;
   
}


.p2, .p3 {
    font-weight: normal;
    z-index:2;
}

.p1 {
    margin-top:20px;
    width:80%;
    z-index:2;
    
}



.krug1 {
    width:12%;
    transform: translate(50px, 130px);
  
}

.krug2 {
    width:12%;
    transform: translate(1350px, 330px);
  
}

.krug3 {
    width:12%;
    transform: translate(-480px, 550px);
}

.z1 {
    transform: translate(-322px, -29px);
    width:7%;
}

.z2 {
    transform: translate(-491px, 401px);
    width:7%;
}

.z3 {
    transform: translate(148px, 183px);
    width:7%;
}

.p2 {
    margin-left:35%;
    font-family: "Sawarabi Gothic", system-ui;
    color:#EF6782;
    background:#ffffff;
    width:18%;
    border: 1px #EF6782 solid;
border-radius:10px;
text-align:center;
padding:4px;
z-index:3;
margin-bottom:165px;
font-size:24px;
transform: translate(-5px, 3px);

}
.p4 {
  
    font-family: "Sawarabi Gothic", system-ui;
    color:#EF6782;
    transform: translate(420px, 10px);
    background:#ffffff;
    width:12%;
    border: 1px #EF6782 solid;
border-radius:10px;
text-align:center;
padding:4px;
font-weight:normal;
z-index: 4;
font-size:24px;
position: absolute;
}

.p3 {
    font-family: "Sawarabi Gothic", system-ui;
    color:#EF6782;
    background:#ffffff;
    width:13%;
    border: 1px #EF6782 solid;
border-radius:10px;
text-align:center;
padding:4px;

transform: translate(1210px, -4px);
z-index:3;
font-size:24px;
position: absolute;
}

.div1 {
    margin-top:-15%;
    margin-left:17%;
    z-index:1;
}

.div2 { 
    margin-left:84%;
   margin-top:2%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.904) 0%, rgba(245, 160, 170, 0.575) 100%);
    z-index:1;
    width:50%;
padding:3%;
border: 2px #EF6782 solid;
border-radius:24px;
}

.div3 {
    margin-top:3%;
    margin-left:17%;
    z-index:1;
}



.pomak2 {
    float:left;
    margin-top:-37%;
    margin-left:40px;
}

@media (max-width: 500px) {
    header {
        flex-direction: column;
        height: auto;
        
        text-align:center
    }

    h2 {
        transform: translate(-60px, 0px);
    }

    nav ul {
        transform: translate(57px);
        margin-top:3%;

    }
    #prva {
        background-image:url(slike/trening2.png);
        height:59vh;
    }

    #druga {
        background-image:url(slike/fitness2.png);
        height:-90vh;
    }


 h1:hover {
        display:none;
    }


   h1  {
    transform: translate(-40px, 200px);
    text-align:center;
   }


  .drugi p {
   
    width:90%;
  }

  .drugi {
    padding-bottom:3%;
  }

 
.div1 {
    transform: translate(-38px, -430px);
    width: 70%;
    padding-top:75px;
}

.p2 {
    transform: translate(-48px, -470px);
    position: absolute;
    width:40%;
}

.krug1 {
   
    transform: translate(170px, 30px);
    width:19%;

  
}

.krug2 {
   margin-top:30px;
    transform: translate(50px, 450px);
    width:19%;

  
}
.div2 {
    transform: translate(-328px, -310px);
    width: 70%;
    padding-top:75px;
}


.pomak2 {
    transform: translate(0px, 10px);
}

.p3 {
    transform: translate(120px, -270px);
    position: absolute;
    width:40%;
}

body {
    background-image:url(slike/trening.png);
  background-size: cover;
}


.div3 {
    transform: translate(-33px, -200px);
    width: 70%;
    padding-top:75px;
    margin-bottom:-40%;
}

.p4 {
    transform: translate(120px, -160px);
    position: absolute;
    width:40%;
}

.krug3 {
     transform: translate(-80px, 840px);
    width:19%;
}

    .z1, .z2, .z3 {
        display:none;
    }

.li2 {
    display:none;
}
}