body{
  background-color:#000;
}
  
@media all and (orientation: portrait){
  .frames{
    scroll-snap-points-y: repeat(var(--visibleHeight) / 2);
    display:grid;
    gap:1px;
    grid-template-columns:1fr;
  }
  .frames>.frame{
    height:50dvh;
    position:relative;
  }
}
@media all and (orientation: landscape){
  .frames{
    scroll-snap-points-y: repeat(var(--visibleHeight));
    display:grid;
    gap:1px;
    grid-template-columns:1fr 1fr;
  }
  .frames>.frame{
    height:100dvh;
    position:relative;
  }
}
.baseMenu{
  right:var(--scrollbar-width);
}
.quickMenu{
  right:0;
}
.quickMenu .item.info{
  background-image: url(../images/icons/info_w_xs.png);
  background-size:auto;
}


@media(pointer: coarse) {
  .quickMenu>.item.info{
    display:none;
  }
}
.item.frame img:active{
  border:5px solid #000;
}


.frames>.frame>img{
  width:100%;
  height:100%;
  object-fit: cover;
}

#mainframe1{
  background-color: #fff;
  color: #000;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}
#mainframe1 .logo{
  font-family: Insecure;
  font-size:2rem;
  text-align: center;
  margin:60px 0 20px 0;
  flex-grow: 1;
}
#mainframe1 .title{
  font-family: GeoramaCondenssed-ThinItalic;
  font-size:2.5rem;
  width:fit-content;
  line-height: 1;
  margin-bottom:30px;
  text-align: center;
  flex-grow: 1;
  text-transform: capitalize;
}
#mainframe1 .categorii{
  flex-grow: 1;
  margin-left:auto;
  margin-right:auto;
}
#mainframe1 .categorii>a{
  display:inline-block;
  padding:14px 25px 17px 25px;
  font-family: GeoramaExtraCondensed-Regular;
  font-size:1.2rem;
  line-height: 0.6;
  background-color: #000;
  color: #fff;
  width: fit-content;
  margin-bottom: 10px;
  text-align: center;
  margin-right:1px;
  text-decoration: none;
  border:1px solid #000;
}
#mainframe1 .categorii>a:hover {
  background-color: #fff;
  color:#000;
}
#mainframe1 .categorii>a:active {
  background-color: #ccc;
}