html, body {
  height: 100vh;
  width: 100%;  
  background-color: black;
  }


  
.flags_size{
  width: 30%;
}



.outer_main{
  background-color: black;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  height: 100%;
  width: 100%; 
  position: relative;
  padding-top: 15%;
  padding-left: 10%;
  padding-right: 10%;
  }  

.outer{
  background-color: black;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  height: 100%;
  width: 100%; 
  position: relative;
  padding-top: 5%;
  padding-left: 10%;
  padding-right: 10%;
  }



.listleft{
  list-style: square;
  list-style-position: outside;
  text-align: left;
  margin: 0px;
  padding: 10px;
}

.mid {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
}


.gold{
  background-image: linear-gradient(
 to right,
 #462523 0,
 #cb9b51 22%, 
 #f6e27a 45%,
 #f6f2c0 50%,
 #f6e27a 55%,
 #cb9b51 78%,
 #462523 100%
 );
  color:transparent;
  background-clip: text;
  -webkit-background-clip: text;
  font-family: 'Oxanium';
  font-size: 1.2em;
  font-weight: 700;
  }

  .gold2{
    background-image: linear-gradient(
   to right,
   #462523 0,
   #cb9b51 22%, 
   #f6e27a 45%,
   #f6f2c0 50%,
   #f6e27a 55%,
   #cb9b51 78%,
   #462523 100%
   );
    color:transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-family: 'Oxanium';
    font-size: 1.4em;
    font-weight: 700;
    }

.gold3_small{
    background-image: linear-gradient(
   to right,
   #462523 0,
   #cb9b51 22%, 
   #f6e27a 45%,
   #f6f2c0 50%,
   #f6e27a 55%,
   #cb9b51 78%,
   #462523 100%
   );
    color:transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-family: 'Oxanium';
    font-size: 0.85em;
    font-weight: 500;
    opacity: 80%;
    }

  .myButton_pl{
    background:url(/img/pl_small.png) no-repeat;
    background-size: cover;
    background-position: center;
    cursor:pointer;
    border:none;
    max-width: 600;
    border-radius: 10px;
    margin: 20px;
}

  .myButton_pl:hover{ 
    background:url(/img/pl_small_act.png) no-repeat;
    background-size: cover;
    background-position: center;
    cursor:pointer;
    border:none;
    max-width: 600;
    border-radius: 10px;
    margin: 20px;
}

.myButton_en{
  background:url(/img/gb_small.png) no-repeat;
  background-size: cover;
  background-position: center;
  cursor:pointer;
  border:none;
  max-width: 600;
  border-radius: 10px;
  margin: 20px;
}

.myButton_en:hover{ 
  background:url(/img/gb_small_act.png) no-repeat;
  background-size: cover;
  background-position: center;
  cursor:pointer;
  border:none;
  max-width: 600;
  border-radius: 10px;
  margin: 20px;
}



 /***popup***/ 

  .popup-screen{
    z-index: 999999;
    position: fixed;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    transition: 0.5s ease;
    transition-property: visibility;
    text-align: center;
  }
  
  .popup-screen.active{
    visibility: visible;
  }

  .popup-box{
  height: 100%;
  width: 100%; 
  position: relative;
  padding-top: 15%;

  }
  
   /*** za guzikami
  .popup-box{
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    max-width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 20px;
    padding: 50px 100px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
    transform: scale(0);
    transition: 0.5s ease;
    transition-property: transform;
  }
  ***/ 

  .popup-screen.active .popup-box{
    transform: scale(1);
  }
  
  .popup-box h2{
    font-size: 2.1em;
    font-weight: 800;
    margin-bottom: 20px;
  }
  
  .popup-box p{
    font-size: 1em;
    margin-bottom: 30px;
  }
  
  .popup-box .btn{
    color: #fff;
    background: blue;
    font-size: 1.1em;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    padding: 7px 27px;
    border-radius: 3px;
  }
  
  .close-btn{
    position: absolute;
    font-size: 1em;
    top: 0;
    right: 0;
    margin: 15px;
    cursor: pointer;
    opacity: 0.5;
    transition: 0.3s ease;
    transition-property: opacity;
  }
  
  .close-btn:hover{
    opacity: 1;
  }

.dol{
  text-align: center;
  margin-top: 100px;
}

.dol-link {
    background-image: linear-gradient(
   to right,
   #462523 0,
   #cb9b51 22%, 
   #f6e27a 45%,
   #f6f2c0 50%,
   #f6e27a 55%,
   #cb9b51 78%,
   #462523 100%
   );
    color:transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-family: 'Oxanium';
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.6;

  text-decoration: none;
}

.dol-link:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.dol-link:visited,
.dol-link:active {
  color: transparent;
  text-decoration: none;
}









/***
Oxanium
ExtraLight 200
Light 300
Regular 400
Medium 500
SemiBold 600
Bold 700
ExtraBold 800
***/