@font-face {
    font-family: "e-Ukraine Regular";
    src: url("/public/fonts/e-Ukraine-Regular.otf") format("opentype");
  }
  @font-face {
    font-family: "e-Ukraine Bold";
    src: url("/public/fonts/e-Ukraine-Bold.otf") format("opentype");
  }
  @font-face {
    font-family: "e-Ukraine Light";
    src: url("/public/fonts/e-Ukraine-Light.otf") format("opentype");
  }
  @font-face {
    font-family: "e-Ukraine UltraLight";
    src: url("/public/fonts/e-Ukraine-UltraLight.otf") format("opentype");
  }
  @font-face {
    font-family: "e-Ukraine Medium";
    src: url("/public/fonts/e-Ukraine-Medium.otf") format("opentype");
  }
  @font-face {
    font-family: "e-Ukraine Thin";
    src: url("/public/fonts/e-Ukraine-Thin.otf") format("opentype");
  }
  :root{
      --main: #459BE6;
  }
  .choose{
    color: var(--main);
  }
  html{
    color: var(--color);
    background-color: var(--background);
  }
  body, li {
    font-family: "e-Ukraine Light", "Arial";
    margin: 0;
    transition: .2s linear;
  }
  
  h1, h2, h3, h4, h5, h6{
      font-family: "e-Ukraine Medium", "Arial";
  }
  b{
      font-family: "e-Ukraine Bold", "Arial";
  }
  
  div.content{
      width: calc(100vw - 40px);
      padding: 10px 20px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
  }
  h1{
      font-size: 2.5em;
  }
  p{
      text-indent: 1.5em;
      line-height: 150%;
      font-size: 1.2em;
      word-wrap: break-word;
  }
  li{
      line-height: 150%;
      font-size: 1.2em;
  }
  div.ukraine{
      width: calc(100%-20px);
      margin: 10px;
      text-align: center;
      font-size: 2em;
      font-family: "e-Ukraine Bold", "Arial";
      line-height: 3em;
      background-color: var(--main);
      border-radius: 3em;
      color: white;
      transition: .1s linear;
  }
  a.ukraine:hover div.ukraine, div.ukraine:hover{
      transform: scale(1.05);
      background-color: #ff0d00;
  }
  a.ukraine{
      text-decoration: none;
  }

a{
    color: var(--color);
}
a:hover{
    transition: .1s linear;
    color: var(--main);
}
i.inter{
    color: gray;
}
div.starter img{
  position: fixed;
  max-width: 256px;
  width: 30vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
footer{
  text-align: center;
  font-size: 1em;
  padding: 20px 15px;
  color: var(--color);
  opacity: .5;
}