*{
  box-sizing: border-box;
}

body{
  background: rgb(15,15,15);
  font-family: 'Roboto Condensed', sans-serif;
  margin:0;
}

.container{
  display:flex;
  flex-direction: column;
  min-height: 100vh;
  /*padding-top:14vmin;*/
}


.header{
  display:flex;
  flex-direction: column;
  align-items: center;
  width:100%;
  z-index: 1;
  position:fixed;
  top:0;
  left:0;
}


.header_content{
  display:flex;
  align-items: center;
  justify-content: space-between;
  padding:3vmin;
  background: var(--gradient2);
  width:100%;
}

.logo{
  height:8vmin;
  margin-right: auto;
  margin-left: 4vmin;
}

.logo img{
  height:100%;
}

.menu_button{
  height:5vmin;
}

.login_button{
  height:5vmin;
}

.login_button img{
  height:100%;
}


/*--------Download app messsage banner--------------*/


.app_download{
  display:flex;
  align-items: center;
  background: linear-gradient(rgb(30,30,30),rgb(0,0,0));
  padding:2vmin;
  color:white;
  width:100%;

}

.app_texts{
  align-self: flex-start;
  display:flex;
  flex-direction: column;
}

.app_texts h2{
  font-size: 3.5vmin;
  margin:0;
  margin-bottom: 1vmin;
  color:rgb(200,200,200);
}

.app_texts p{
  margin:0;
  font-size: 3vmin;
  color:grey;
}

.app_icon{
  height:10vmin;
  border-radius: 1vmin;
  margin-right: 2vmin;
}

.app_close{
  height:5vmin;
  opacity: 0.5;
  margin-left: 2vmin;
}

.app_download_btn{
  margin-left: auto;
  text-decoration: none;
  background: linear-gradient(var(--color3),var(--color4));
  color:white;
  font-size: 4vmin;
  padding:1vmin;
  border-radius: 1vmin;
}

/*--------Marquee--------------*/

.marquee{
  background: var(--color10);
  display:flex;
  align-items: center;
  padding:1vmin 5vmin;
  width:100%;
  color:var(--color1);
}

.marquee img{
  width:4vmin;
  margin:0 2vmin;
}

.marquee span{
  font-size: 3vmin;
  font-weight: bold;
  color:var(--color1);
}

.marquee marquee{
  font-size: 3vmin;
  font-weight: bold;
  width:100%;
}



/*----START Logged header-----*/

.user_btn{
  display:flex;
  align-items: center;
  font-size: 4vmin;
  font-weight: bold;
  background:linear-gradient(var(--color7),var(--color8), var(--color7));
  padding:1vmin;
  border-radius: 1vmin;
}

.user_btn span{
  color:var(--color9);
}

.user_btn img{
  height:5vmin;
  margin-right: 1vmin;
  filter:brightness(0.2);
}


/*----END Logged header----*/


/*---------------Fixed bottom menu---------------------------*/

.bottom_menu{
  display:flex;
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background: var(--gradient2);
  padding:1vmin;
  /*z-index: 999;*/
  /*z-index: 1;*/
}


/*---Unlogged bottom menu--*/

.bottom_btn{
  flex:1;
  text-align: center;
  text-decoration: none;
  padding:2vmin;
  font-size: 4vmin;
  margin:2vmin;
  color:white;
  border-radius: 1vmin;
}

.bottom_menu .login_btn{
    background: linear-gradient(var(--color3),var(--color4));
}

.bottom_menu .join_btn{
    background: linear-gradient(var(--color5),var(--color6));
}


/*---Logged bottom menu--*/

.logged_menu{
  width:100%;
  padding:0;
}

.logged_menu_content{
  display:flex;
  justify-content: space-around;
  padding:0 1vmin;
  z-index: 1;
  width:100%;
  background: var(--gradient2);
}

.logged_menu_item{
  display:flex;
  flex-direction: column;
  align-items: center;
  width:12vmin;
  margin: 0 2vmin;
  padding:1vmin 0 2vmin 0;
  text-decoration: none;
}

.logged_menu_item img{
  height:10vmin;
  padding:1vmin;
}

.logged_menu_item span{
  background: var(--gradient1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.5vmin;
}

.logged_menu_center{
  /*margin-top: -5vmin;*/
  position:relative;
}

/*.logged_menu_center::before{*/
  /*content:"";*/
  /*position:absolute;*/
  /*top:-4vmin;*/
  /*left:50%;*/
  /*-moz-transform:translateX(-50%);*/
  /*-webkit-transform:translateX(-50%);*/
  /*transform:translateX(-50%);*/
  /*width: 0;*/
  /*height: 0;*/
  /*z-index: -1;*/
   /*border-left: 15vmin solid transparent;*/
   /*border-right: 15vmin solid transparent;*/
   /*border-bottom: 12vmin solid #21180c;*/
/*}*/

.logged_menu_center img{
  /*height:15vmin;*/
  height:10vmin;
  /*padding:0;*/
  padding:1vmin;
}

.menu_wheel{
  position:absolute;
  top:-122vmin;
  right:7vmin;
  width:85vmin;
  height:85vmin;
  border-radius: 90vmin;
  background: #21180c;
  /*z-index: -1;*/
  z-index: 1001;
  display:flex;
  justify-content: center;
  align-items: center;
}

.wheel_content{
  position:relative;
  min-width:20vmin;
  height:20vmin;
  border-radius: 100%;
  background: var(--gradient1);
}

.wheel_item{
  position:absolute;
  text-decoration: none;
  transition: 0.5s;

}

.wheel_item_content{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color:var(--color2);
  font-size: 3vmin;
  min-width:18vmin;
  min-height:18vmin;
  text-align: center;
}


.wheel_item_content img{
  height:8vmin;
}


/*---------------END Fixed bottom menu---------------------------*/


/*------------Scroll to top button---------------------*/

.scroll_top{
  position:fixed;
  right:0;
  bottom:25vmin;
  background: var(--color11);
  z-index: 100;
  padding:2vmin;
  box-shadow: 0px 1px 2px black;
  display:none;
  border-top-left-radius: 1vmin;
  border-bottom-left-radius: 1vmin;
}

.scroll_top img{
  width:4vmin;
}

.scroll_top span{
  background: var(--gradient1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4vmin;
  font-weight: bold;
}

.scroll_top:active{
  background: var(--gradient1);
}

.scroll_top:active span{
  background: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scroll_top:active img{
  -webkit-filter:brightness(0);
  filter:brightness(0);
}



/*----------------Alternate header-----------------------------*/

.header2{
  display:flex;
  align-items: center;
  justify-content: space-between;
  padding:4vmin;
  width:100%;
  position:fixed;
  left:0;
  top:0;
  z-index: 1;
  background: rgba(0,0,0,0);
}

.header2 .back_btn{
  align-self: center;
  width:5vmin;
  text-decoration: none;
}

.header2 .back_btn img{
  width:100%;
}


.header2_text{
  background: var(--gradient1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 6vmin;
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
}

.news{
  display:flex;
  align-items: center;
}

.news_amount{
  color:var(--color2);
  font-size: 3vmin;
}

.news img{
  width:5vmin;
  margin-left: 2vmin;
}

/*----------------Preloader-----------------------------*/

.preloader{
  position:fixed;
  z-index: 9999;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background: var(--gradient2);
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.loading_icon{
  display:flex;
  align-items: center;
  height:30vmin;
  margin-bottom: 5vmin;
}

.loading_icon span{
  height:2vmin;
  width:4vmin;
  background: var(--color1);
  margin:0 1vmin;
  animation: loading 2s infinite;
}


.loading_icon span:nth-child(2){
  animation-delay: 0.2s;
}

.loading_icon span:nth-child(3){
  animation-delay: 0.4s;
}

.loading_icon span:nth-child(4){
  animation-delay: 0.6s;
}

.loading_icon span:nth-child(5){
  animation-delay: 0.8s;
}


/**
 * ----------------------------------------
 * animation loading
 * ----------------------------------------
 */
@-webkit-keyframes loading {
  0%{
    height:2vmin;
    background: var(--color1);
  }

  30%{
    height:25vmin;
    width:2vmin;
    background: var(--color2);
  }

  60%{
    height:2vmin;
    background: var(--color10);
  }

  100%{
    height:2vmin;
    background: var(--color1);
  }

}
@keyframes loading {
  0%{
    height:2vmin;
    background: var(--color1);
  }

  30%{
    height:25vmin;
    width:2vmin;
    background: var(--color2);
  }

  60%{
    height:2vmin;
    background: var(--color10);
  }

  100%{
    height:2vmin;
    background: var(--color1);
  }
}

/**
 * ----------------------------------------
 * animation floating
 * ----------------------------------------
 */
@-webkit-keyframes floating {
  0%{
    -moz-transform:translateY(0);
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }

  50%{
    -moz-transform:translateY(-3vmin);
    -webkit-transform:translateY(-3vmin);
    transform:translateY(-3vmin);
  }

  100%{
    -moz-transform:translateY(0);
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }

}
@keyframes floating {
  0%{
    -moz-transform:translateY(0);
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }

  50%{
    -moz-transform:translateY(-3vmin);
    -webkit-transform:translateY(-3vmin);
    transform:translateY(-3vmin);
  }

  100%{
    -moz-transform:translateY(0);
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }
}


@media screen and (orientation:landscape) {
  .header2{
    background: rgba(0,0,0,0.8);
  }
 }