@import url('https://fonts.googleapis.com/css2?family=Glass+Antiqua&display=swap');

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-image: url('slike/pozadina.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

h1{
    font-family: 'Glass Antiqua', cursive;
    text-align: center;
    position: relative;
    top: 100px;
    font-size: 120px;
    /*color: #361500;*/
    color: #FF6C22;
    text-shadow: 2px 2px 2px black;
}

.slika1{
    position: relative;
    margin-top: 130px;
    margin-left: 50px;
    transition: 2s;
}

.slika1:hover{
    width: 500px;
    height: 200px;
    z-index: 5;
}


.slika2{
    position: relative;
    margin-top: 250px;
    margin-left: 100px;
    transition: 2s;
    z-index: 2;
}

.slika2:hover{
    width: 500px;
    height: 200px;
    z-index: 5;
}

.slika3{
    position: relative;
    margin-top: 330px;
    margin-left: 150px;
    transition: 2s;
    z-index: 3;
}

.slika3:hover{
    width: 500px;
    height: 200px;
    z-index: 5;
}


.slika4{
    position: relative;
    margin-top: 400px;
    margin-left: 200px;
    transition: 2s;
    z-index: 4;
}

.slika4:hover{
    width: 500px;
    height: 200px;
    z-index: 5;
}

.gallery{
    width: 400px;
    float: left; 
}

.gallery img{
        width: 100%;
        height: 100%;
}

.gallery:hover{
       z-index: 5;
}


.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  }
  
  
  .ikona {
      padding: 20px;
      background-color: #DE8F5F;
      border-radius: 20px;
      margin: 20px;
      color: rgb(242, 218, 186);
      font-size: 30px;
      float: right;
      transition: 1s;
  }
  
  .ikona:hover {
      background-color: rgb(145, 70, 24);
  }