body{
    font-family: Arial;
    margin: 0 auto;
}

.meni{
    display: none;
}

nav{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6em;

    width: 80%;
    position: fixed;
    margin: 0 1em 0 10em;
    padding: 2em 2em 2em 2em;
    background-color: rgb(58, 137, 206);
}

nav a{
    text-decoration: none;
    color: rgb(255, 255, 255);
}

nav a:hover{
    color: rgb(0, 0, 0);
    text-decoration: underline rgb(255, 255, 255);
}

/* sadržaj */

section {
    width:100%;
    height: 110vh;
}

#strA{
    display: flex;
    justify-content: center;
    align-items: center;

    padding-top: 4em;
}

#strA h1{
    font-size: 60pt;
    border-radius: 20px;
    padding: 0 1em 0 1em;
}

#strA img{
    width: 35%;
}

#strB{
    margin: 20em 2em 0 2em;
    padding-top: 13em;
}

#strB h1{
    float: right;
    background-color: white;
    margin-top: -0.01em;
    margin-right: 3.5em;
    font-size: 60pt;
    padding: 0 1em 0 1em;
}

#strB img{
    margin-left: 12em;
    width: 35%;
}

#strB p{
    float: right;
    margin-top: -16em;
    margin-right: 8.5em;
    background-color: white;
    font-size: 17pt;
    border: 2px solid white;
    width: 30%;
}

#strC{
    margin: 20em 2em 0 2em;
    padding-top: 13em;
}

#strC h1{
    float: right;
    background-color: white;
    margin-top: -0.01em;
    margin-right: 3.5em;
    font-size: 60pt;
    padding: 0 1em 0 1em;
}

#strC img{
    margin-left: 10em;
    width: 35%;
}

#strC p{
    float: right;
    margin-top: -14em;
    margin-right: 8.5em;
    background-color: white;
    font-size: 17pt;
    padding: 0 1.5em 0 1.5em;
    width: 30%;
}

#strD{
    margin: 20em 2em 30em 2em;
    padding-top: 13em;
}

#strD h1{
    float: right;
    background-color: white;
    margin-top: 1.5em;
    margin-right: 4.5em;
    font-size: 60pt;
    padding: 0 1em 0 1em;
}

#strD img{
    margin-left: 10em;
    width: 35%;
}

#strD p{
    float: right;
    margin-top: -28em;
    margin-right: 8em;
    background-color: white;
    font-size: 17pt;
    padding: 0 1.5em 0 1.5em;
    width: 30%;
}

#strE{
    padding-top: 13em;
}

#strE h1{
    float: right;
    background-color: white;
    margin-top: 1.5em;
    margin-right: 4em;
    font-size: 60pt;
    padding: 0 1em 0 1em;
}

#strE img{
    margin-left: 10em;
    width: 35%;
}

#strE p{
    float: right;
    margin-top: -12em;
    margin-right: 8em;
    background-color: white;
    font-size: 17pt;
    padding: 0 1.5em 0 1.5em;
    width: 30%;
}

#strF{
    padding-top: 13em;
}

#strF h1{
    float: right;
    background-color: white;
    margin-top: 1.5em;
    margin-right: 4.5em;
    font-size: 60pt;
    padding: 0 1em 0 1em;
}

#strF img{
    margin-left: 10em;
    width: 35%;
}

hr{
  margin: 0 auto;
  border: 3px solid rgb(58, 137, 206);
}

footer{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 10em;

  background-color: lightgray;
}

.imgmob{
    display: none;
}

label{
  display: none;
}

#prekidac {
  display: none;
}

@media only screen and (max-width: 728px){
    body{
      width: 80%;
    }

    .imgmob{
        display: block;
    }

    .imgpc{
        display: none;
    }

    nav{
        display: none;
    }

    .meni {
        display: block;
        text-align: center;
        width: 100%;
        display: none;
        position: fixed;
        margin-top: 8em;
        left: 0;
      }
    
      .menilink{
        text-decoration: none;
        color: white;
        background-color: rgb(58, 137, 206);
        padding: 10px;
      }
    
      .meni a {
        display: block;
        border-bottom: 1px solid #ccc;
      }
      
      #prekidac:checked + .meni {
        display: block;
      }
      
      label {
        display: block;
        position: fixed;
        margin: 1em 0 10em 14.2em;
        font-size: 30px;
        width: 20px;
        line-height: 70px;
        display: block;
        margin-bottom: 5em;
        background-color: rgb(58, 137, 206);
        border: 3px solid rgb(255, 255, 255);
        color: white;
        padding: 0px 20px 0px 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        border-right: none;
      }
      
      #prekidac {
        display: none;
      }

      section {
        width:100%;
        height: 100vh;
    }

      #strA{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        margin-top: -7em;
      }

      #strA .imgmob{
        width: 70%;
        margin-left: 35px;
      }

      #strA h1{
        margin-left: 35px;
        float: none;
        font-size: 30pt;
      }

      #strB{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        margin-top: -25em;
      }

      #strB h1{
        margin-bottom: 6.2em;
        margin-left: 80px;
        font-size: 30pt;
      }

      #strB p{
        width: 90%;
        font-size: 10pt;
        margin-left: 80px;
      }

      #strB .imgmob{
        float: none;
        margin-right: 230px;
        width: 60%;
      }

      #strC{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        margin-top: -25em;
      }

      #strC h1{
        margin-bottom: 5.3em;
        margin-left: 80px;
        font-size: 30pt;
      }

      #strC p{
        font-size: 10pt;
        width: 90%;
        font-size: 10pt;
        margin-left: 80px;
      }

      #strC .imgmob{
        margin-right: 230px;
        width: 60%;
      }

      #strD{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        margin-top: -25em;
      }

      #strD h1{
        margin-bottom: 10em;
        margin-left: 110px;
        font-size: 30pt;
      }

      #strD p{
        font-size: 10pt;
        width: 90%;
        font-size: 10pt;
        margin-left: 80px;
      }

      #strD .imgmob{
        margin-right: 230px;
        width: 60%;
      }

      #strE{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        margin-top: -50em;
      }

      #strE h1{
        margin-bottom: 5em;
        margin-left: 150px;
        font-size: 30pt;
      }

      #strE p{
        font-size: 10pt;
        width: 90%;
        font-size: 10pt;
        margin-left: 135px;
      }

      #strE .imgmob{
        margin-right: 135px;
        width: 60%;
      }

      #strF{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        margin-top: -30em;
      }

      #strF h1{
        margin-bottom: 1em;
        margin-left: 160px;
        font-size: 30pt;
      }

      #strF .imgmob{
        margin-right: 160px;
        width: 60%;
      }
}