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

@font-face {
          font-family: 'e-Ukraine';
          src: url('./assets/fonts/e_Ukraine.eot');
          src: url('./assets/fonts/e_Ukraine.eot') format('embedded-opentype'),
          url('./assets/fonts/e_Ukraine.woff') format('woff'),
          url('./assets/fonts/e_Ukraine.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
    }  

@font-face {
          font-family: 'e-Ukraine Head';
          src: url('./assets/fonts/e_Ukraine_Head.eot');
          src: url('./assets/fonts/e_Ukraine_Head.eot') format('embedded-opentype'),
          url('./assets/fonts/e_Ukraine_Head.woff') format('woff'),
          url('./assets/fonts/e_Ukraine_Head.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
    }  

@font-face {
          font-family: 'JetBrains Mono';
          src: url('./assets/fonts/jetbrains_mono.eot');
          src: url('./assets/fonts/jetbrains_mono.eot') format('embedded-opentype'),
          url('./assets/fonts/jetbrains_mono.woff') format('woff'),
          url('./assets/fonts/jetbrains_mono.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
    }  
/* CSS files add styling rules to your content */
   body {
            margin: 0;
     padding: 0;
            display: flex;
            flex-direction: column;
            font-family: 'e-Ukraine';
width: 100%;
      background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
     background: #E35D00;
      }
      
    html, body,{
        height: 100%;
      }

.qr{
              height: 130px;
              align-items: center;
            }

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

left: 5%;
top: 5%;

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: 25%;

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: 40%;
left: 30%;
top: 40%;
}

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

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;

}

 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;
  }