*{
    margin:0;
    padding:0;
}
body{
    background-image: url(pozim.png);
    color:white;
}
h1{
text-align: center;
padding-top: 31%;
font-size: xxx-large;
}
li::before {  
    transform: scaleX(0);
    transform-origin: bottom right;
  }
  
  li:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  
  li::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0 0 0 0;
    background: hsla(0, 0%, 0%, 0.523);
    z-index: -1;
    transition: transform .3s ease;
  }
li{
    position:relative;
}
ul{
    text-align: center;
    padding-top: 30%;
}
li{
    font-size: xx-large;
    padding:2%;
    border:3px solid white;
    width:80%;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    margin-top:3%;
}
#bar{
  position:absolute;
  margin-top: 4%;
  width:40px;
  font-size:25px;
  margin-left: 75%;
  color:white;
  padding-left: 2px;
  padding-right: 35px;
border-left:3px solid white;
border-right:3px solid white;
  
}
#bar a{
  margin-top:10%;
}
@media (orientation: landscape) {
    body {
      grid-auto-flow: column;
    }
  }

  a{
    text-decoration: none;
    color:white;
  }