@charset "UTF-8";

.images_menu {
    position: absolute;
    height: 100vh;
}

#main_background {
    height: inherit;
}

.main_buttons {
    position: absolute;
    right: 18vh;
    bottom: 4vh;
}

.main_menu_buttons {
    width: 33vh;
    cursor: pointer;
    height: 9vh;
    border-radius: 1vh;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 600;
    font-size: 4.2vh;
    text-align: center;
    margin: 2vh 0;
    line-height: 9.2vh;
    color: #3c3c3c;
    transition:0.5s;
    background: linear-gradient(to right, #FF6B81 0%, #ff6aff  51%, #FF6B81  100%);
    background-size: 200% auto;
    border: #f9ffbd3b 0.3vh solid;
    box-shadow: 0px 0.3vh 0.4vh rgb(0 0 0 / 14%), 0px 0.2vh 0.8vh rgb(0 0 0 / 12%), 0px 0.2vh 0.3vh rgb(0 0 0 / 20%);
}

.main_menu_buttons:hover {
  transform: scale(1.05);
    background-position: 80% 47%;
    filter: brightness(1.2);
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.log_in_button {position: absolute;width: 16vh;height: 7vh;left: 3vh;text-decoration: none;top: 0vh;font-size: 2vh;/* background-size: 24%; *//* background-position: 10.2vh; *//* background-repeat: no-repeat; *//* background-image: url(/static/images/account.svg); */cursor: pointer;background-color: #373737;transition: 0.2s;}

.log_in_button:hover {
  height: 7vh !important;
}

.log_in_text {
    padding: 2.2vh 1.9vh;
    font-weight: 600;
    transition: 0.2s;
    color: white;
  }
  

.profile {left: 2vh;position: absolute;}

.profile_menu, .profile_menu_game {
  /* visibility: hidden; */
  display: none;
  /* opacity: 0.0; */
  /* transition: 0.5s; */
}

.profile_menu {
  margin-top: 9vh !important;
}

.profile_menu_game {
  margin-top: 2vh;
}

.profile_button, .profile_button_game {background-color: #474757;height: 5.1vh;position: absolute;transition: 0.2s;color: white;cursor: pointer;display: flex;/* border-radius: 0 0 1vh 1vh; */padding: 0.9vh 1.2vh 0 1.5vh;box-shadow: 0.2vh 0.2vh 1vh #00000059;}

.profile_button:hover, .profile_button_game:hover {
  padding: 1.3vh 1.2vh 0.5vh 1.5vh;
}

.profile_button_game {
  position: relative;
  flex: 0 0 auto;
}

.avatar {background-image: url("https://c8.patreon.com/2/200/9576401");width: 4.1vh;height: 4.1vh;background-size: contain;border-radius: 5vh;}

.nickname {font-size: 2.4vh;padding: 0.5vh 0.5vh 0 1.5vh;max-width: 10.5vh;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

.profile_menu, .profile_menu_game {background-color: #474757;position: absolute;margin-top: 2vh;/* right: 0vh; */width: 31vh;/* border-radius: 0.6vh; */box-shadow: 0.2vh 0.2vh 1vh #00000059;}

.profile_title {font-size: 2vh;display: flex;padding: 2vh;padding-top: 2.3vh;font-weight: 700;color: white;flex-wrap: nowrap;}

.log_out {position: relative;cursor: pointer;font-size: 2vh;bottom: 0;display:flex;border-top: 0.1vh solid #979797;padding: 1.7vh 2vh;color: #ff6aff;text-decoration: none;font-weight: 700;}

.log_out::after {
  background-image: url("../images/exit.svg");
  width: 2.8vh;
  height: 2.8vh;
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  display:block;
  position: absolute;
  right: 2vh;
  filter: hue-rotate(43deg) brightness(1.3);
}

.base_long_text {
  color: white;
  font-size: 2.2vh;
  line-height: 4vh;
  margin-left: 2.8vh;
  margin-top: 3vh;
  overflow-y: scroll;
  /* text-align: center; */
  /* overflow: hidden; */
  padding: 0vh 2vh  0vh 0vh;
  height: 61vh;
  width: 79vh;
}

.version_container {position: absolute;bottom: 1vh;right: 2vh;}
.version {font-size: 4.2vh;color: white;font-weight: 800;}


.roadmap_image {max-width: 100%;background-size: contain;}


.roadmap:hover {
  
  transform: scale(1.05);
    filter: brightness(1.2);
   background-position: right center; /* change the direction of the change here */
/*     color: #fff; */
    text-decoration: none;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}


.credits_menu, .roadmap_menu, .walkthrough_menu, .preview_menu, .faq_menu {
  position: absolute;
  z-index: 101;
  width: 85vh;
  height: 72vh;
  background-color: #474757;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  /* border-radius: 0.7vh; */
  box-shadow: 0.1vh 0.2vh 1vh #00000052;
  bottom: 12vh;
  
  visibility: hidden;
  opacity: 0.0;
}

.credits_menu {
  height: 53.5vh;
  width: 57vh;
  left: -40vh;
  bottom: 24vh;
}


.special_thanks {
  position: absolute;
  background-color: #474757;
  width: 41vh;
  height: 53.5vh;
  bottom: 24vh;
  left: 100vh;
  /* border-radius: 1vh; */
  box-shadow: 0.1vh 0.2vh 1vh #00000052;
}

.credits_text, .roadmap_text, .credits_text_walkthrough {
  color: white;
  font-size: 2.2vh;
  line-height: 4vh;
  overflow-y: scroll;
  /* text-align: center; */
  /* overflow: hidden; */
  padding: 2vh 2vh  3vh 3vh;
  height: 60.9vh;
  /* width: 79vh; */
  font-weight: 600;
}

.credits_text::-webkit-scrollbar-track, .roadmap_text::-webkit-scrollbar-track, .credits_text_walkthrough::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 1vh rgba(0,0,0,0.3);
	background-color: #474757;
}

.credits_text::-webkit-scrollbar, .roadmap_text::-webkit-scrollbar, .credits_text_walkthrough::-webkit-scrollbar
{
	width: 10px;
	background-color: #616177;
}

.credits_text::-webkit-scrollbar-thumb, .roadmap_text::-webkit-scrollbar-thumb, .credits_text_walkthrough::-webkit-scrollbar-thumb
{
	background-color: #616177;
	border: 0.1vh solid #555555;
}


.credits_text_walkthrough {
  height: 5vh;
}

.credits_menu, .special_thanks {
  transition: 0.5s;
  visibility: hidden;
  opacity: 0.0;
  overflow-y: hidden;
  overflow-x: hidden;
}

.profile.stream_interface {
  left: 8vh;
}
#log_in_button_game {
	left: 8vh;
	height: 6.1vh;
	width: 18vh;
	/* background-size: 20%; */
	/* background-position: 10.2vh; */
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
	background-color: #474757;
}

#log_in_button_main {
	left: 4vh;
	height: 6.1vh;
	width: 18vh;
	/* background-size: 20%; */
	/* background-position: 10.2vh; */
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
	background-color: #474757;
}


#log_in_button_game .log_in_text {
	padding: 1.9vh 1.9vh;
}

#log_in_button_game .log_in_text:hover {
	padding: 2.3vh 1.9vh;
}

#log_in_button_main .log_in_text {
	padding: 1.9vh 1.9vh;
}

#log_in_button_main .log_in_text:hover {
	padding: 2.3vh 1.9vh;
}