@font-face {
    font-family: fontCust;
    src: url(Antonio-Regular.ttf);
  }

a {
    text-decoration: none;
}

body {
    height: 100%;
    margin: 0;
    font-family: fontCust;
    font-style: italic;
}

#wrapper {
    position: absolute;
    background-color: black;
    height: 100%;
    width: 100%;
}

.block {
    height: 12.5%;
    background-color: plum;
    transition: 0.3s;
    position: relative;
}
.block:hover {
    z-index: 3;
}


.block > h1 {
    margin: 0;
    padding: 1.5% 0;
    color: white;
    font-size: 2vw;
    font-weight: 700;
    position: absolute;
}
.block-abs {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(57,57,57);
    background: radial-gradient(circle, rgba(92,92,92,1) 13%, rgba(55,55,55,1) 43%, rgba(0,0,0,1) 100%);
    transition: 0.5s ease-in-out;
}

.block-tags {
    position: absolute;
    background-image: url('img/studparl.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 20%;
    opacity: 0.1;
    left: 30%;
    overflow: hidden;
    transition: 0.5s;
}

.block:hover > .block-tags {
    opacity: 0;
}

@media screen and (max-width: 600px) {
    .block-tags {
      visibility: hidden;
      display: none;
    }
    .block-tags-two {
        visibility: hidden;
        display: none;
      }
      .block-tags-alt {
        visibility: hidden;
        display: none;
      }
  }

@media screen and (max-width: 600px) {
    .block-abs {
      visibility: hidden;
      display: none;
    }
  }
.block:hover > .block-abs {
    width: 0;
}

.h1l {
    left: 2%;
}

.h1r {
    right: 2%;
}
#cale {
    text-align: center;
    background-image: url('img/cale.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: red;
    color: white;
}
#cale > h1 {
    left: 20%;
    right: 20%;
}
#cale > h1 {
    transition: 1s;

}
#cale:hover > h1 {
    color: rgb(233, 233, 233);
    -webkit-text-stroke: black 1px;
}

#pavle {
    background-color: rgb(115, 6, 179);
    background-image: url('img/pavle.png');
    background-repeat: no-repeat;
    background-position: right 40%;
    background-size: 40%;
}
#pavle > h1 {
    transition: 1s;
    
}
#pavle:hover > h1 {
    color: rgb(255, 209, 255);
}

#uros {
    background-color: burlywood;
    background-image: url('img/uros.png');
    background-size: 10%;
    background-position: left;
    background-repeat: no-repeat;
}
#uros > h1 {
    transition: 1s;
    
}
#uros:hover > h1 {
    color: rgb(44, 44, 44); 
}

#bogdan {
    background-color: rgb(107, 48, 48);
    background-image: url('img/bogdan.png');
    background-size: 20%;
    background-position: right;
    background-repeat: no-repeat;
}
#bogdan > h1 {
    transition: 1s;
    
}
#bogdan:hover > h1 {
    color: burlywood; 
}

#petar {
    background-color: orange;
    background-image: url('img/petar.png');
    background-size: 12%;
    background-position: left;
    background-repeat: no-repeat;
}
#petar > h1 {
    transition: 1s;
    
}
#petar:hover > h1 {
    color: rgb(255, 123, 0); 
}

#elmaz {
    background-color: rgb(63, 131, 63);
    background-image: url('img/elmaz.png');
    background-size: 10%;
    background-position: right;
    background-repeat: no-repeat;
}
#elmaz > h1 {
    transition: 1s;
    
}
#elmaz:hover > h1 {
    color: rgb(226, 226, 226); 
}
#nikola {
    background-color: rgb(250, 250, 166);
    background-image: url('img/nikola.png');
    background-size: 20%;
    background-position: left;
    background-repeat: no-repeat;
}
#nikola > h1 {
    transition: 1s;
}
#nikola:hover > h1 {
    color: black;
}

#andrija {
    background-image: url('img/andrija.png');
    background-repeat: no-repeat;
    background-position: right 0%;
    background-size: 8%;
}
#andrija > h1 {
    transition: 1s;
}
#andrija:hover > h1 {
    color: black;
}
#pajtoni {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url('img/pajtoni.png');
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: center;
    z-index: 2;
    pointer-events: none;
    opacity: 0.3;
}

#footer {
    font-family: 'Courier New', Courier, monospace;
    position: absolute;
    width: 100%;
    text-align: center;
    background: rgb(153, 1, 1);
    color: white;
    font-style: normal;
    z-index: 5;
}