@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap");

* {
  margin: 0;
  padding: 0;
}

/*navigacija*/

nav {
  width: 100%;
  display: flex;
  background-color: #6d8c79;
  position: fixed;
  height: 10vh;
}

nav ul {
  list-style: none;
  padding-left: 18em;
}

nav li {
  display: inline-block;
  padding: 1em;
}

nav a {
  text-decoration: none;
  padding: 0.3em;
  font-size: 46pt;
  color: #ffffff;
}

nav a:hover {
  color: rgb(185, 229, 206);
}

label {
  margin: 0 1.6em 0 0;
  font-size: 1.5em;
  width: 1.5em;
  line-height: 2em;
  float: right;
  display: none;
}

#prekidac {
  display: none;
}

/*slike*/

section img {
  width: 18%;
  margin: 6em;
  margin-top: 6em;
}

.slikahrana {
  width: 23%;
}

.slikacilj {
  transform: translate(220px, -105px);
  width: 40%;
}

.slikaclanci {
  transform: translate(-200px, -120px);
  width: 23%;
}

.barba {
  height: 18em;
  transform: translate(-50px, -60px);
}

.teta {
  height: 17em;
  transform: translate(680px, -40px);
}

h2 {
  font-family: "Lora", serif;
  /*stavila sam ovaj font jer font Felix Titling nisam mogla pronaći*/
  font-weight: 250;
  margin-left: 1em;
  font-size: 30pt;
}

.prvi {
  display: flex;
  justify-content: space-between;
}

.dobrodosli {
  margin-top: 9em;
  background-color: #d3ead5;
  height: 5.5em;
  width: 35%;
  font-size: 1.5em;
  font-family: "Open Sans", sans-serif;
  /*stavila sam ovaj font jer font Myriad Pro nisam mogla pronaći*/
  margin-bottom: 3em;
  border: 1px solid #000000;
  border-radius: 1em;
  padding: 1em;
}

.cilj {
  background-color: #d3ead5;
  border: 1px solid #000000;
  border-radius: 1em;
  height: 15.5em;
  width: 40%;
  padding: 3em;
  font-size: 1.2em;
  font-family: "Open Sans", sans-serif;
  font-weight: 2em;
  margin-top: 5em;
}

.clanci {
  background-color: #d3ead5;
  border: 1px solid #000000;
  border-radius: 1em;
  height: 17.5em;
  width: 60%;
  padding-top: 4em;
  padding: 2em;
  font-size: 1.2em;
  font-family: "Open Sans", sans-serif;
  font-weight: 2em;
  margin-top: 5em;
}

.zajedno {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.drugi {
  display: block;
  margin-left: 0em;
}

.treci {
  display: flex;
}

.podnaslov2 {
  transform: translate(-90px, -108px);
}

.malinaslov {
  transform: translate(0px, -20px);
}

#strB {
  margin-top: 4em;
}

.cetvrti {
  display: flex;
  justify-content: space-around;
}

.boja {
  background-color: #ffffff;
  font-size: 1em;
  font-family: "Open Sans", sans-serif;
  font-weight: 3em;
  margin-top: 1em;
  height: 6em;
  padding: 1em;
}

.marko {
  background-color: #e6e6e6;
  border: 1px solid #000000;
  border-radius: 1em;
  height: 14em;
  width: 90%;
  padding: 2em;
  margin-top: 5em;
  transform: translate(-130px, 0px);
  font-family: "Open Sans", sans-serif;
}

.olivia {
  background-color: #e6e6e6;
  border: 1px solid #000000;
  border-radius: 1em;
  height: 14em;
  width: 90%;
  padding: 2em;
  margin-top: 5em;
  transform: translate(-200px, 0px);
  font-family: "Open Sans", sans-serif;
}

.zvjezdice {
  transform: translate(320px, 0px);
}

footer {
  background-color: #beccc3;
  width: 100vw;
  height: 6vh;
  font-size: 1.5em;
  text-align: center;
  color: white;
}
.slikainstagram {
  width: 1.8em;
  transform: translate(170px, -5px);
}

.slikatiktok {
  width: 2.9em;
  transform: translate(30px, -5px);
}

.slikafacebook {
  width: 2.5em;
  transform: translate(-120px, -1px);
}

.naslovmarko {
  font-family: "Open Sans", sans-serif;
  font-weight: 5em;
}

.logo1 {
  display: none;
}

@media only screen and (max-width: 760px) {
  html {
    width: 100%;
    overflow-x: hidden;
  }

  .meni {
    width: 100%;
   display: none;
    margin-top: 3em;
    margin-left: -3em;
  }

  label {
    display: block;
    cursor: pointer;
    color: rgb(149, 211, 194);
    float: left;
    margin-left: 1em;
  }

  #prekidac:checked ~.meni {
    display:block;
  }

  nav {
    width: 100%;
    display: flex;
    background-color: #6d8c79;
    position: fixed;
    height: 10vh;
  }
  
  nav ul {
    list-style: none;
    padding-left: 0em; 
  }
  
  nav li {
    display: block;
    padding: 0em;
  }
  
  nav a {
    text-decoration: none;
    padding: 0em;
    font-size: 1.3em;
    color: #212221;
  }
  
  nav a:hover {
    color: rgb(185, 229, 206);
  }

  .slikahrana {
    display: none;
  }

  .slikavjezbe {
    display: none;
  }

  .prvi {
    display: flex;
    justify-content: center;
  }

  .dobrodosli {
    width: 80%;
    height: 10em;
    font-size: 1.5em;
    margin-bottom: 3em;
    padding: 0.5em;
  }

  .podnaslov1 {
    font-size: 23pt;
    margin: auto;
    margin-bottom: 1em;
    padding: 0.5em;
  }

  .podnaslov2 {
    transform: translate(-80px, -108px);
    font-size: 23pt;
  }

  .zajedno {
    display: flex;
    flex-direction: column;
  }

  .drugi {
    display: block;
    margin-left: 0em;
  }

  .cilj {
    width: 80%;
    height: 17em;
    padding: 1em;
    font-size: 1em;
    font-weight: 2em;
    margin-top: 0em;
    margin-left: 1.5em;
  }

  .slikacilj {
    display: none;
  }

  .clanci {
    display: none;
  }

  .teta {
    display: none;
  }

  .barba {
    display: none;
  }

  .cetvrti {
    display: block;
  }

  .olivia {
    transform: none;
  }

  .marko {
    transform: none;
  }

  .zvjezdice {
    transform: none;
  }

  .clanci {
    height: 23em;
    margin-left: 3em;
    margin-left: 1.2em;
    width: 70%;
  }

  .slikaclanci {
    transform: translate(-170px, -120px);
    width: 23%;
  }

  .olivia {
    height: 17.5em;
    width: 80%;
    padding: 1.5em;
    margin-top: 5em;
    margin-bottom: 3em;
    margin-left: 1em;
  }

  .marko {
    height: 17.5em;
    width: 80%;
    padding: 1.5em;
    margin-top: 5em;
    margin-bottom: 3em;
    margin-left: 1em;
  }

  .boja {
    height: 9em;
  }

  h2 {
    margin-left: 0;
  }

  .recenzije {
    margin-left: 0.5em;
    font-size: 28pt;
  }

  .logo {
    display: none;
  }

  .logo1 {
    display:block;
    
  }


}