@charset "UTF-8";

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

#main_background {
    height: inherit;
}

.main_buttons {
    position: absolute;
    right: 10vh;
    bottom: 5vh;
}

.main_menu_buttons {
    width: 35vh;
    cursor: pointer;
    height: 10vh;
    border-radius: 1vh;
    font-family: 'Avenir Next';
    font-style: normal;
    font-weight: 700;
    font-size: 5.2vh;
    text-align: center;
    margin: 2.2vh 0;
    line-height: 10.5vh;
    color: white;
    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: 18vh;height: 7vh;right: 3vh;text-decoration: none;top: 0vh;font-size: 2vh;background-size: 24%;background-position: 10.2vh;background-repeat: no-repeat;cursor: pointer;background-color: #373737;transition: 0.2s;}

#log_in_button_game:hover {
  height: 7vh !important;
  filter: brightness(1.2);
}

#log_in_button_game:hover .log_in_text {
  margin-top:0.5vh;
}

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

.profile {position: relative;width: max-content;max-width: 17vh;top: 0;position: absolute;}

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

.profile_menu {
  margin-top: 8vh !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: 1vh 1.2vh 0 1.5vh;box-shadow: 0.2vh 0.2vh 1vh #00000059;}

.profile_button:hover, .profile_button_game:hover {
  padding: 1.6vh 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: 9.5vh;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

.profile_menu, .profile_menu_game {width: 31vh;position: relative;background-color: #474757;box-shadow: 0.2vh 0.2vh 1vh #00000059;right: 0;    /* ❌ можно не указывать */left: auto;  /* ❌ тоже не надо */}

.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: 15vh;left: 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;
}

.walkthrough_gal_text::-webkit-scrollbar-track, .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;
}

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

.walkthrough_gal_text::-webkit-scrollbar-thumb, .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;
}

#log_in_button_game {
	left: 2vh;
	height: 6.1vh;
	width: 17.4vh;
	background-size: 20%;
	background-position: 9.9vh;
	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;
}

.logomain {
  position: absolute;
  top: 4vh;
  left: 2vh;
  height: 38vh;
  pointer-events: none;
}

#log_in_button_game .log_in_text {
	padding: 1.8vh 1.75vh;
}

.login_wrapper {
   position: relative;
   top: 0vh;
   right: 2vh;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.dirty_deeds_container {
  position: absolute;
  background-color: #535367;
  display: flex;
  width: 65vh;
  bottom: 2vh;
  color: white;
  /* border: #535367 0.5vh solid; */
  left: 2vh;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.dirty_image {
  width: 29.5vh;
  /* height: 9vh; */
}

.dirty_name {font-size: 2vh;display: flex;margin-bottom: 1vh;justify-content: center;}

.dirty_button {
  cursor: pointer;
  width: 30vh;
  display: block;
  height: 3.4vh;
  text-decoration: none;
  border: #ff6aff 0.3vh solid;
  font-size: 2vh;
  color: #ff6aff;
  text-align: center;
  padding-top: 0.7vh;
  font-weight: 600;
}

.dirty_container {
  margin: auto;
}

.container_buttons {
  display: flex;
}

.profile_wrapper {
  display: flex;
  align-items: center;
  gap: 1vh; /* расстояние между ником и рюкзаком */
}

.profile_button_game {
  /* display: flex; */
  /* align-items: center; */
  background-color: #474757;
  padding: 1.1vh 1.2vh 0 1.5vh;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
  /* border-radius: 0.7vh; */
  width: auto;
  max-width: 30vh;
  overflow: hidden;
}


.inventory_menu_button {
  background-image: url(../../static/images/interface/icons8-school-backpack-90.webp);
  background-size: 2.8vh;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: 0.2s;
  width: 5vh;
  height: 6.1vh;
  background-color: #474757;
  background-position: 51% 47%;
  box-shadow: none;
  margin-left: 1.5vh;
  flex-shrink: 0;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.profile_menu,
.profile_menu_game {
  display: none;
}

.profile_menu.active,
.profile_menu_game.active {
  display: block;
}