@media only screen and (min-width: 300px) and (max-width: 700px)  {
    body{
      max-width: 100vw;
        margin:0px;
        padding: 0px;
        color:aliceblue;
        min-height: 100vh;
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
        font-weight: 300;
        }
        
        @font-face {
          font-family: headerFont;
          src: url(fontovi/HelpMe.ttf);
        }
    
        @font-face{
          font-family: h1font;
          src: url(fontovi/shloprg.otf);
        }
    
    header{
        width: 100%;
        background-image: url(slike/backgrounds/pattern.gif);
        height: 15vh;
        padding-top: 3%;
    }

    .header{
      text-align: center;
      font-size: 35px;
      color: black;
      font-family: headerFont;
      transform: translate(10px,-30px);
    }
    #header{
      text-align: center;
      font-size: 25px;
      color: black;
      font-family: headerFont;
      line-height: 40px;
      position: absolute;
      width: 80vw;
      transform: translateX(-40vw);
    }
    
    strong{
      font-weight:900
    }
    
    h2{
      letter-spacing: 10px;
      font-size: 14pt;
      margin-left: 40px;
      margin-top: 50px;
    }
    p{
      margin-left: 40px;
      margin-top: 40px;
      margin-bottom: 40px;
      font-size: 12pt;
    }
    li{
      margin-left: 40px;
      margin-top: 40px;
      font-size: 12pt;
    }
    
    ul{
      margin-left: 30px;
      margin-top: 10%;
      margin-bottom: 30px;
    }
    
    .rezultat {
        padding: 0.5rem 1.5rem 1rem;
        border-radius: 1.5rem;
        background: #8a0303e6;
    }
    
    li + li {
        margin-top: 1rem;
    }
    
    .rezultat::marker {
      font-weight: 600;
      color: peachpuff;
      font-size: 1.8rem;
    }
    
    
    
    img{
      margin-left: 40px;
      border-radius: 10%;
      filter: drop-shadow(0 0 0.75rem crimson);
    }
    
    footer{
      margin-top: 0px;
      width: 100%;
      height: 25vh;
      background-color: rgba(0, 0, 0,0.7);
    }
    
    canvas{
      transform: translateY(-75px);
      float: bottom;
      margin-left: 30px;
      width: 95%;
      height: 100%;
    }
    
    /* navigacija */
    
    .navigacija{
        background-image: url(slike/backgrounds/pattern_nav.jpg);
        height: 500px;
        width: 100px;
        position: absolute;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: -100px;
        border-radius: 0 0 15px 0;
        transition: left 1s;
        transform: translateY(-18px);
        z-index: 2;
    }
    
    .ikone{
        width: 50px;
        height: 50px;
        margin-top: 30px;
        margin-left: 20px;
        margin-bottom: 10px;
        filter: none;
    }
    .ikone:hover{
        transform: scale(1.2);
    }
    
    @keyframes izbljedi{
      0%{opacity:100%;}
      50%{opacity:50%;}
      100%{opacity:100%;}
    }
    #strijela{
        width: 6vh;
        float: left;
        margin-top: 10px;
        margin-left: 20px;
        transform: rotate(0deg);
        cursor: pointer;
        transition: 1s;
        animation-name: izbljedi;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        filter: none;
    }
    
    #strijela_div{
        background-image: url(slike/backgrounds/pattern.gif);
        width: 40px;
        height: 40px;
    }
    
    /*popUp*/
    
    /* Popup container - can be anything you want */
    .popup {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    /* The actual popup */
     .popuptext {
      margin-left: -60px;
      margin-top: -15px;
      visibility: hidden;
      width: 80px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
    }
    
    /* Popup arrow */
    .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    
    /* Toggle this class - hide and show the popup */
    .popup .show {
      visibility: visible;
      animation-name: apear 1s;
    }
    
    /* Add animation (fade in the popup) */
    @keyframes apear {
      from {opacity: 0;} 
      to {opacity: 1;}
    }
    
    @keyframes disapear {
      from {opacity: 1;}
      to {opacity:0 ;}
    }
    
    /* video */
    #a_pozadina {
        width: 100%;
        height: 100%;
        object-fit: cover;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
      }
    
        /* traĹľilica */
      .trazilica{
        margin: auto;
        margin-top: 5vh;
        margin-left: 5%;
        background-color: rgba(0, 0, 0,0.7);
        color: white;
        width: 45vh;
        height: 15vh;
        text-align: center;
      }
      label{
        font-size: 15pt;
      }
      input{
        font-size: 20pt;
        width: 20%;
        height: 5vh;
        margin-top: 10%;
        margin-left: 15px;
      }
      #potvrdi{
        width: 10%;
        height: 5vh;
      }
    
      h1{
        letter-spacing: 10px;
        margin-top: 50px;
        margin-bottom: 50px;
        margin-left: 40px;
        font-family: h1font;
        font-size: 18pt;
        width: 80vw;
        line-height: 40px;
      }
    
      .naslov{
        font-size: 16pt;
        margin-bottom: 10%;
        font-family: h1font;
        cursor: pointer;
        transform: translate(5px, 20px);
      }
    
      .naslov:hover{
        opacity: 0.4;
      }
    
      .kratki_sadrzaj{
        transform: translateY(-40%);
        width: 45%;
        height: 40%;
        font-size: 10pt;
        margin-left: 13%;
        visibility: hidden;
        overflow: scroll;
      }

      .autor{
        padding-left: 3%;
        padding-bottom: 30px;
        font-size: 12pt;
      }
    
      .cover{
        margin-left: 65%;
        width: 25%;
        margin-bottom: 7%;
        cursor: pointer;
        filter: drop-shadow(0 0 0.75rem black);
      }

      .cover:hover{
        opacity: 0.4;
      }

      #jekyll{
        margin-left: 65%;
        width: 20%;
        margin-bottom: 10%;
        cursor: pointer;
        filter: drop-shadow(0 0 0.75rem black);
      }

      #jekyll{
        opacity: 0.4;
      }

      #povecana_slika{
        position: absolute;
        background-color: rgb(0, 0, 0);
        left: 10%;
        visibility: hidden;
        width: 40vh;
        height: 45vh;
        z-index: 2;
      }
      #slika{
        position: absolute;
      }
      #zatvori{
        position: absolute;
        width: 30px;
        margin-left: 260px;
        margin-top: 30px;
      }
    
      .stupac{
        margin-left: 10%;
        width: 40vh;
        height: 35vh;
        margin-bottom: 85px;
        background-color: #8a0303e6;
        border-radius: 10%;
      }
      .skrivene_knjige{
        margin-left: 10%;
        visibility: hidden;
        width: 25vh;
        height: 0vh;
        background-color: #8a0303e6;
        border-radius: 10%;
      }
    
      .red{
        background-color: #8a0303e6;
        border-radius: 30px;
        width: 70vw;
        margin: 0 auto;
        display: block;
        padding: 20px;
        margin-bottom: 5vh;
      }
    
      .red p{
        font-size: 13pt;
        margin-left: 2px;
        margin-top: 10px;
        margin-bottom: 10px;
      }
    
      .clanak{
          margin-left: 10px;
          font-size: 10pt;
        }
      .clanak p, li{
        font-size: 12pt;
        line-height: 30px;
        letter-spacing: 5px;
        width: 80vw;
      }
      .clanak-container:after {
        content: "";
        display: table;
        clear: both;
    }
    
      
      figcaption {
        font-style: italic;
        padding-left: 40px;
        padding-top: 10px;
        font-size: 12pt;
        width: 80vw;
      }
      figure{
        float: none;
        transform: none;
        margin-right: 10%;
        width: 30%;
      }
      
      @keyframes nema{
        from{color: aliceblue;}
        to{color: #8a0303e6;}
      }
    
      #nema{
        animation-name: nema;
        animation-duration: 2s;
        margin-left: 10%;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        font-size: 20pt;
        display: none;
      }
      .centar{
        width: 80%;
        display: block;
        font-size: 18pt;
      }
    
      /* button-trazilica */
    
      *, *:before, *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
     }
      .buttons {
        margin-top: 100px;
        text-align: center;
        border-radius: 30px;
     }
     .blob-btn {
      height: 100px;
      z-index: 1;
      position: relative;
      padding: 20px 46px;
      margin-bottom: 30px;
      text-align: center;
      text-transform: uppercase;
      color: #8a0303e6;
      font-size: 16pt;
      font-weight: bold;
      background-color: transparent;
      outline: none;
      border: none;
      transition: color 0.5s;
      cursor: pointer;
      border-radius: 30px;
    }
      .blob-btn:before {
        content: "";
        z-index: 1;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border: 2px solid #8a0303e6;
        border-radius: 30px;
     }
      .blob-btn:after {
        content: "";
        z-index: -2;
        position: absolute;
        left: 3px;
        top: 3px;
        width: 100%;
        height: 100%;
        transition: all 0.3s 0.2s;
        border-radius: 30px;
     }
      .blob-btn:hover {
        color: #fff;
        border-radius: 30px;
     }
      .blob-btn:hover:after {
        transition: all 0.3s;
        left: 0;
        top: 0;
        border-radius: 30px;
     }
      .blob-btn__inner {
        z-index: -1;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 30px;
        background: #fff;
     }
      .blob-btn__blobs {
        position: relative;
        display: block;
        height: 100%;
        filter: url('#goo');
     }
      .blob-btn__blob {
        position: absolute;
        top: 2px;
        width: 25%;
        height: 100%;
        background: #8a0303e6;
        border-radius: 100%;
        transform: translate3d(0, 150%, 0) scale(1.7);
        transition: transform 0.45s;
     }
      @supports (filter: url('#goo')) {
        transform: translate3d(0, 150%, 0) scale(1.4);
     }
      .blob-btn__blob:nth-child(1) {
        left: 0%;
        transition-delay: 0s;
     }
      .blob-btn__blob:nth-child(2) {
        left: 30%;
        transition-delay: 0.08s;
     }
      .blob-btn__blob:nth-child(3) {
        left: 60%;
        transition-delay: 0.16s;
     }
      .blob-btn__blob:nth-child(4) {
        left: 90%;
        transition-delay: 0.24s;
     }
      .blob-btn:hover .blob-btn__blob {
        transform: translateZ(0) scale(1.7);
     }
      @supports (filter: url('#goo')) {
        transform: translateZ(0) scale(1.4);
     }
      
    .lijeve_slike{
     width: 70vw;
     margin-right: 25px;
    }
    
    
    .slike{
      margin-bottom: 5%;
      height:50vh;
    }
    .desneSlike{
      height: 20vh;
      margin-left: 15%;
      transform: none;
    }
    .lijeveSlike{
      height: 20vh;
      margin-left: 5%;
      transform: none;
    }
    .centriraneSlike{
      margin: 10% auto;
      height: 20vh;
    }

    .centrirani{
      margin-top: 10%;
      margin-left: 5%;
      font-size: 22pt;
      width: auto;
    }
    
    
    
      
    
    
}