/* CSS files add styling rules to your content */

@font-face {
          font-family: 'e-Ukraine';
          src: url('https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2Fe-Ukraine-Bold.eot?v=1614685056472');
          src: url('https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2Fe-Ukraine-Bold.eot?v=1614685056472') format('embedded-opentype'),
          url('https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2Fe-Ukraine-Bold.woff?v=1614685056821') format('woff'),
          url('https://cdn.glitch.com/1e96397e-2ca4-4bf6-a962-d7ae8f45551a%2FDINPro-Medium.ttf?v=1609869698680') format('truetype');
          font-weight: normal;
          font-style: normal;
    }  

@font-face {
          font-family: 'e-Ukraine Head';
          src: url('https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2Fe-UkraineHead-Bold.eot?v=1614685325928');
          src: url('https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2Fe-UkraineHead-Bold.eot?v=1614685325928') format('embedded-opentype'),
          url('https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2Fe-UkraineHead-Bold.woff?v=1614685326445') format('woff'),
          url('https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2Fe-UkraineHead-Bold.ttf?v=1614685327584') format('truetype');
          font-weight: normal;
          font-style: normal;
    }  

@font-face {
          font-family: 'JetBrains Mono';
          src: url('https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2Fe-UkraineHead-Bold.eot?v=1614685325928');
          src: url('https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2Fe-UkraineHead-Bold.eot?v=1614685325928') format('embedded-opentype'),
          url('https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2FJetBrainsMono-Regular.woff2?v=1614699405249') format('woff'),
          url('https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2FJetBrainsMono-Regular.ttf?v=1614699391239') format('truetype');
          font-weight: normal;
          font-style: normal;
    }  

   body {
            margin: 0;
     padding: 0;
            display: flex;
            flex-direction: column;
            font-family: 'e-Ukraine';
     position: absolute;
width: 100%;
      background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

background: url(https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2Fgif_bg_orange_16mb.gif?v=1614694950643);

      }
      
    html, body,{
        height: 100%;
      }

.qr{
              height: 130px;
              align-items: center;
            }
 header {
   padding:0 0 0 20px;
   margin-top: 5%;
   margin-left: 5%;
width: 90%;

background: #111111;
border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 15px;
      }

.header_text{
width: 211px;
height: 26px;
left: 35px;
top: 36px;

font-family: JetBrains Mono;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 26px;
/* identical to box height */

letter-spacing: 0.03em;

color: #FFFFFF;
}

.main_logo{
  position: absolute;
width: 11%;
  top: 4%;
  left: 5%;
}

.main_logo_bg{
  position: absolute;
width: 44%;
height: 5%;
left: 17%;
top: 7%;
background: #FF3B00;
border-radius: 8.90351px;

}

.main_logo_text{
  position: absolute;
width: 30%;
left: 20%;
top: 8%;
font-family: e-Ukraine;
font-style: normal;
font-weight: bold;
font-size: 8px;
line-height: 150%;
/* identical to box height, or 13px */
color: #FFFFFF;
}

.main_border{
position: absolute;
width: 90%;
margin-left: 5%;
height: 445%;
top: 115%;
background: linear-gradient(180deg, rgba(17, 17, 17, 0) 85.42%, rgba(17, 17, 17, 0.71) 100%);
border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 15px;
}

.main_sheva{
position: absolute;
width: 90%;
height: 400%;
left: 10%;
top: 164%;

background: url(https://cdn.glitch.com/c20f6bac-745c-4428-bbfe-c124b87b996a%2F%D1%88%D0%B5%D0%B2%D0%B0.svg?v=1614696545984) no-repeat left center;
box-sizing: border-box;
}

.main_com{
position: absolute;
left: 19.47%;
right: 75.2%;
top: 90%;
}

.main_like{
  position: absolute;
left: 9.33%;
right: 85.07%;
top: 90%;
}

.main_send{
  position: absolute;
left: 29.33%;
right: 65.33%;
top: 90%;
}

.main_save{
  position: absolute;
left: 86.13%;
right: 9.33%;
top: 90%;
}

.main_text{
  position: absolute;
width: 63%;
left: 30%;
top: 375%;

font-family: e-Ukraine Head;
font-style: normal;
font-weight: bold;
font-size: 17px;
line-height: 22px;
text-transform: uppercase;

color: #111111;
}

.main_text_bg{
  position: absolute;
width: 60%;
left: 25%;
top: 345%;
}

.footer_bg{
position: absolute;
width: 90%;
height: 280%;

left: 5%;
top: 580%;

background: #111111;
border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 15px;
}

.footer_text_up{
  position: absolute;
width: 80%;
height: 20%;
left: 10%;
top: 600%;

font-family: e-Ukraine Head;
font-style: normal;
font-weight: bold;
font-size: 17px;
line-height: 22px;
/* identical to box height */

text-align: center;
text-transform: uppercase;
color: #FFFFFF;

}

.footer_button{
  position: absolute;
width: 80%;
height: 100%;
left: 10%;
top: 670%;
}

.footer_text_down{
  position: absolute;
width: 80%;
height: 35%;
left: 10%;
top: 780%;

font-family: JetBrains Mono;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 15px;
/* identical to box height */

text-align: center;
letter-spacing: 0.2em;
text-transform: uppercase;

color: #FFFFFF;

}

.main_logo_text:visited{
  color: white;
  background-color: transparent;
  text-decoration: none;
}

.main_logo_text:link{
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:link {
  color: #E35D00;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: #FFB17B;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #FF6800;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #FF7E25;
  background-color: transparent;
  text-decoration: underline;
}

 ar-button:active {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    background: none;
  }

  ar-button:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    background: none;
  }

  ar-button:focus-visible {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    background: none;
  }

.sponsors{
position: absolute;
width: 90%;
height: 60px;
left: 5%;
  margin-top: 7%;
top: 845%;

background: #111111;
border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 15px;
    }

.sponsors_text{
position: absolute;
width: 50%;
left: 25%;
top: 885%;

font-family: JetBrains Mono;
font-style: normal;
font-weight: normal;
font-size: 6px;
line-height: 7px;
text-align: center;
letter-spacing: 1em;
text-transform: uppercase;

color: #FFFFFF;
}

  @media (min-width: 1024px) {
    
    .main_logo{
  position: absolute;
width: 8%;
  top: 3%;
  left: 5%;
}
    .main_sheva{

left: 40%;
top: 230%;
}
    .main_text{
  position: absolute;
width: 15%;
left: 46%;
top: 440%;

font-family: e-Ukraine Head;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 22px;
text-transform: uppercase;

color: #111111;
}

.main_text_bg{
  position: absolute;
width: 20%;
left: 43%;
top: 415%;
}

    .footer_bg{

top: 580%;
}

.footer_text_up{
  position: absolute;
width: 273px;
height: 22px;
left: 51px;
top: 550px;

font-family: e-Ukraine Head;
font-style: normal;
font-weight: bold;
font-size: 17px;
line-height: 22px;
/* identical to box height */

text-align: center;
text-transform: uppercase;
color: #FFFFFF;

}
    .qr{
      height: 200px;
    }
    .unsupported{
      margin-top: 30%;
      pointer-events: none;
          
        position: absolute;
width: 80%;
left: 10%;
top: 1200%;

font-family: e-Ukraine Head;
font-style: normal;
font-weight: bold;
font-size: 30px;
line-height: 25px;
/* identical to box height */

text-align: center;
text-transform: uppercase;

color: #FFFFFF;
    }
    
.footer_button{
  position: absolute;
width: 95px;
height: 95px;
left: 140px;
top: 610px;
}

.footer_text_down{
  position: absolute;
width: 94px;
height: 15px;
left: 135px;
top: 717px;

font-family: JetBrains Mono;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 15px;
/* identical to box height */

text-align: center;
letter-spacing: 0.2em;
text-transform: uppercase;

color: #FFFFFF;

}