html {
	height: 100%;
  background: linear-gradient(to bottom right, #102933, #164659, #285466eb, #25566a, #2a7391);
/*	animation: body_ani 2500ms infinite;*/
}

@keyframes body_ani {
  0% { background-color: #2ba805; box-shadow: 0 0 5px #2ba805; }
  50% { background-color: #49e819; box-shadow: 0 0 20px #49e819; }
  100% { background-color: #2ba805; box-shadow: 0 0 5px #2ba805; }
}

body {
  display: flex;justify-content: center;align-items: center;height: calc(100% - 16px);
}

body > :nth-child(1 of div) {
  width: 100%;max-width: 400px;
/*  background: #f0f8ff4f;*/
background:linear-gradient(to bottom right, #ffffff4a, #eaeaea21, #c7ccce5e);
  border-radius: 20px;
  padding: 15px;padding-bottom: 35px;padding-top: 30px;
  
  margin-left: 15px;margin-right: 15px;
}

.logo {
  color: white;display: flex;justify-content: center;font-size: 40px;margin-top: 0px;
}

.text_header {
  color: #ffffff9c;display: flex;justify-content: center;font-size: 25px;margin-bottom: 10px;
}

.info {
  padding: 10px;border-radius: 5px;color: white;border-width: 1px;border-style: solid;margin-left: 20px;margin-right: 20px;max-width: 200px;
}

a {
  text-decoration: none;
}

.btn_vk {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-bottom: 7px;background: #4c75a3;color: white;height: 40px;display: flex;justify-content: center;align-items: center;max-width: 200px;border-radius: 5px;box-shadow: 0 0 9px rgba(19, 102, 208, 0.31);border-width: 1px;border-style: solid;border-color: #ffffff63;margin-top: 20px;padding-left: 10px;padding-right: 10px;padding-bottom: 0px;
}

.btn_vk > img {
  width: 23px;margin-right: 7px;height: 25px;
}

.btn_tg {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-bottom: 7px;
  background: #3390ec;color: white;height: 40px;display: flex;justify-content: center;align-items: center;max-width: 200px;border-radius: 5px;box-shadow: 0 0 9px rgba(60, 60, 60, 0.29);border-width: 1px;border-style: solid;border-color: #ffffff63;margin-top: 7px;padding-left: 10px;padding-right: 10px;
}

.btn_tg > img {
  width: 23px;margin-right: 7px;height: 18px;
}

.btn_code {
  cursor: pointer;
   -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: linear-gradient(to bottom right, #133948, #015779);color: white;height: 40px;display: flex;justify-content: center;align-items: center;max-width: 200px;border-radius: 5px;box-shadow: 0 0 9px rgba(60, 60, 60, 0.29);border-width: 1px;border-style: solid;border-color: #ffffff63;margin-top: 7px;padding-left: 10px;padding-right: 10px;
}

.btn_code > img {
  width: 23px;margin-right: 7px;height: 22px;
}

.d_info_tg, .d_info_code {
  height: 0px;overflow: hidden;transition: height 300ms;
}

.d_info_tg > :nth-child(1 of div) {
  margin-top: 7px;margin-bottom: 7px;padding: 10px;border-radius: 5px;color: white;border-width: 1px;border-style: solid;margin-left: 10px;margin-right: 10px;max-width: 200px;
}

.url {
  font-size: 18px;text-decoration: underline;
}

input {
  outline: none;
}

.error, .error_code {
  display: none;color: white;font-size: 17px;margin-top: 5px;
}

.input_code, .input_tg {
  border-color: white;
  border-top-width: 0px;border-top-style: solid;border-left-width: 0px;border-left-style: solid;border-right-width: 0px;border-right-style: solid;border-bottom-width: 1px;border-bottom-style: solid;font-size: 22px;padding-left: 10px;padding-right: 10px;max-width: 200px;background: #f0f8ff00;color: white;text-align: center;margin-top: 10px;border-radius: 0px;
  padding-bottom: 4px;
}

.input_code::placeholder {
  color: white;
}
.input_tg::placeholder {
  color: white;
}