*  {padding: 0;margin: 0;}

body {}

h1 {
    color: #fff;
    font-size: 22px;
    font-family: Arial;
    margin-top: 10px;
    text-shadow: 1px 1px 2px #000;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.container img {width: 160px;height: auto;border-radius: 50%;border: 2px solid #fff;padding: 3px;margin-top: 10px;}

.container p {
    color: #fff;
    font-family: arial;
    font-size: 14px;
}

a.telega {
    background-color: #008495a3;
}

a.insta {
    background-color: #8f0d46b3;
}

.container a {color: #fff;background-color: #8f640dcc;display: block;max-width: 400px;padding: 15px;margin-bottom: 15px;border-radius: 150px;margin: 15px auto;font-size: 18px;text-decoration: none;font-family: arial;box-shadow: 2px 2px 5px #000000ba;border: 1px solid #ffffff;}

.main {/* background-image: url("https://sarkech.com.kg/bg.jpg"); */background-repeat: no-repeat;background-size: cover;text-align: center;background-position: center center;display: block;/* position: absolute; */width: 100%;height: 100%;padding: 15px;box-sizing: border-box;background-attachment: fixed;image-rendering: auto;}

img.bgm {
  position: absolute;
  z-index: -1;
  width: 100%;
  left: 0;
  top: -40%;
  image-rendering: auto;
}

.gall {
  display: flex;
  flex-flow: column wrap;
  margin-top: 20px;
  height: 2000px;
  overflow: hidden;
  flex-direction: column;
  background-color: #000000ba;
  padding: 2px;
  border-radius: 10px;
}

.gall a img {
    width: 100%;
    float: left;
}

.gall a {
  width: 20%;
  border: 2px solid #000000;
  color: #fff;
  box-sizing: border-box;
}

.gall a::before {

}

.gall a:nth-of-type(5n+1) { order: 1; }
.gall a:nth-of-type(5n+2) { order: 2; }
.gall a:nth-of-type(5n+3) { order: 3; }
.gall a:nth-of-type(5n+4) { order: 4; }
.gall a:nth-of-type(5n)   { order: 5; }



.container {
    display: block;
    /* position: absolute; */
    width: 100%;
    height: 100%;
    background-color: #00000087;
    z-index: 2;
    max-width: 900px;
    margin: auto;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 10px;
}

a.green {
    background-color: #4e8900ba;
}

a.tele {
    background-color: #01465a61;
}


@media all and (max-width: 768px) {

  img.bgm {
    position: fixed;
    z-index: -1;
    height: 100%;
    width: 100%;
    top: 0%;
    image-rendering: auto;
}

.main {
    background-position-y: bottom;
    background-attachment: fixed;
    padding: 5px;
    /* position: absolute; */
}

  .gall {height: 1000px;}

.gall a {
    width: 33.33%;
}
    
    .container img {
    width: 120px;
    }
    
    h1 {
    font-size: 20px;
    }
    
}