@media (max-width: 767px) {
  main {
    background-image: url(../images/pozadina.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    text-align: center;
  }
  #blur {
    display: inline-block;
    width: 85%;
    text-align: center;
    border-radius: 30px;
    margin-top: 7%;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  h1 {
    font-weight: 900;
    display: block;
    width: 100%;
    font-size: 9.4vw;
    color: #f7f7f7;
    letter-spacing: 0.9vw;
    margin: 1.8vw auto;
  }
  h2 {
    display: block;
    width: 100%;
    font-size: 7.1vw;
    color: #f7f7f7;
    letter-spacing: 0.6vw;
    margin-bottom: 10px;
  }
  #icons {
    display: block;
    padding: 5%;
  }
  #icons img {
    width: 10%;
  }
  #icons a {
    padding-right: 5%;
  }

  #about {
    background-color: #efefef;
    border: 1px solid #707070;
    text-align: center;
    color: #707070;
  }
  #about h3 {
    margin: 4% auto;
    font-size: 5.2vw;
    letter-spacing: 2.1px;
  }
  #about p {
    font-size: 3.7vw;
    letter-spacing: 0.6vw;
    width: 85%;
    margin: 5% auto;
  }
  #shop {
    text-align: center;
    color: #707070;
  }
  #shop h3 {
    margin: 4% auto;
    font-size: 4.8vw;
    letter-spacing: 3.4px;
  }
  #shop div {
    margin: 5% auto;
  }
  #shop img {
    display: block;
    width: 100%;
    height: 100vw;
  }
  #shop div h4 {
    margin: 5% 0px 2% 0px;
    font-size: 4.6vw;
  }
  #shop div p {
    margin: 3% 0 0 0;
    font-size: 4.6vw;
  }
}
@media (min-width: 768px) {
  main {
    background-image: url(../images/pozadina.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 80%;
    text-align: center;
    position: relative;
    top: -6.1vw;
  }

  #blur {
    display: inline-block;
    width: 85%;
    text-align: center;
    border-radius: 90px;
    margin-top: 7%;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  h1 {
    font-weight: 900;
    display: block;
    width: 100%;
    font-size: 6.4vw;
    color: #f7f7f7;
    letter-spacing: 0.9vw;
    margin: 1.8vw auto;
  }
  h2 {
    display: block;
    width: 100%;
    font-size: 4.1vw;
    color: #f7f7f7;
    letter-spacing: 0.6vw;
    margin-bottom: 10px;
  }

  #icons {
    display: block;
    margin-top: 3%;
    padding-bottom: 3%;
  }
  #icons img {
    width: 3%;
    transition: transform 0.2s;
  }
  #icons img:hover {
    transform: scale(1.5);
  }
  #icons a {
    padding-right: 3%;
  }
  #about {
    background-color: #efefef;
    border: 1px solid #707070;
    text-align: center;
    color: #707070;
    position: relative;
    top: -6.1vw;
  }
  #about h3 {
    margin: 4% auto;
    font-size: 2.2vw;
    letter-spacing: 4.1px;
  }
  #about p {
    font-size: 1.7vw;
    letter-spacing: 3.3px;
    width: 85%;
    line-height: 2.2vw;
    margin: 3% auto;
  }
  #shop {
    text-align: center;
    color: #707070;
  }
  #shop h3 {
    margin: 2% auto;
    font-size: 1.8vw;
    letter-spacing: 3.4px;
  }
  #shop div {
    display: inline-block;
    width: 48%;
    margin: 5% auto;
  }
  #shop img {
    display: inline-block;
    width: 40%;
  }
  #shop div div {
    vertical-align: top;
    padding-left: 4%;
  }
  #shop div h4 {
    margin: 15% 0px 2% 0px;
    display: inline-block;
    width: 100%;
    font-size: 1.7vw;
    text-align: left;
  }
  #shop p {
    margin: 3% 0 0 0;
    font-size: 1.7vw;
    text-align: left;
  }
}