body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: "PT Sans", sans-serif;
  color: white;
  background-color: #000000;
  background-image: url(/assets/janos-venczak-EVR26myHl3A-unsplash.png);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.container {
  max-width: 703px;
  height: 874px;
  margin: 50px auto 0px;
  background-image: url(/assets/index_main.png);
  background: cover fixed;
  background-position: center;
  background-repeat: no-repeat;
}

main {
  height: 860px;
  max-width: 703px;
  overflow-y: hidden;
  font-family: "PT Sans", sans-serif;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  box-shadow: #1c1c1c5e 5x 5px 5px;
  border: 9px solid transparent;
  border-image: url('/assets/border.png') 10 round;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;


  background-image: url(/assets/index_left.png), url(/assets/index_right.png), url(/assets/index_top.png);
  background-position: bottom left, bottom right, top center;
  background-repeat: no-repeat;
}
.imgcont {
  margin: 5px auto;
background: #1c1c1c6e;
  border: 8px groove #4e5867;
  width: 280px;
   box-shadow: #000000 0px 0px 5px;
}
img {


  height: 40px;
  padding-top: 10px;
 
}

.imgcont:hover{
  background: url(/assets/ebbg.gif);
  background-size: cover;
  background-position: fixed;
}

@media (prefers-reduced-motion: reduce) {

  body,
  #pp1,
  #pp2,
  #p3,
  #p4,
  #p5,
  #p6,
  #p7,
  #p8,
  #p9,
  #p10,
  .container {
    animation: none;
    transition: none;
    transform: none;
  }

  .div1,
  .div2,
  .div3,
  .div4,
  .div5,
  .div6,
  .div7,
  .div8,
  .div9,
  .div10 {
    animation: none;
    transition: none;
  }
}



@media(max-width:1500px) {}

@media(max-width: 800px) {

  #pp1,
  #pp2,
  #p3,
  #p4,
  #p5,
  #p6,
  #p7,
  #p8,
  #p9,
  #p10 {

    left: 90%;

  }

}