@font-face {
  font-family: 'GOST-Type-A'; /* Гарнитура шрифта */
  src: url('../fonts/GOST-Type-A.ttf'); /* Путь к файлу со шрифтом из каталога CSS (!)*/
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}

body {
	/* цвет фона */
	/* background-color: #FAFAFA; */
	/* (!) Необходимо удалять кэш файлов - может не изменяться картинка (!!) */
	/* background-image: url(../images/bg.jpg); */
	background-color: #2F2F2F;
	height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;

	font-family: 'GOST-Type-A';
}

.container {
	/* Размер окна с сообщением */
	min-width: 700px;
	min-height: 550px;
	border-radius: 20px;
	position: relative;
	visibility: visible;	

	-webkit-transition: 1.5s ease-in-out;
	transition: 1.5s ease-in-out;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	
}

.side {
	position: absolute;
	text-align: center;
	width: 100%;
	height: 100%;
	padding: 20px 50px;
	color: #fff;
	
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	
	border-radius: 20px;
}
.content {
	
	-webkit-transform: translatez(70px) scale(0.8);
	        transform: translatez(70px) scale(0.8);
	
	line-height: 1.5em;
}
.content h1 {
	position: relative;
}
.content p {
	margin-top: 50px;
	line-height: 2em;
}
.content h1:before {
	content: "";
	position: absolute;
	bottom: -20px;
	height: 3px;
	background-color: #3e3;
	width: 70px;
	left: 50%;
	
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	
}
.front {
	z-index: 2;
	background-size: 100vh;
	background-size: cover;
	/* Картинка с лицевой стороны */
	background-image: url(../images/Dark-Elegant-Wallpaper.jpg);
	
}
.back {
	background-color: #333;
	
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
	
	z-index: 0;
	padding-top: 10px;
	
	/* картинка с тыльной стороны */
	background-image: url(../images/Dark-Wall.jpg);
}


.container:hover {
	// (!) Необходимо удалять кэш файлов - может не изменяться картинка (!!) 
	// Включение вращения карточки 
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}


/* Для класса input */
.more {
  display: none;
}

.more:checked {
  //display:block;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

/* Для кнопки */
/*
.button {
  grid-row: -1;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  padding: 0 1.5em;
  height: 3em;
  line-height: 2.9em;
  min-width: 3em;
  background-color: transparent;
  border: solid 2px #fff;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  left: 50%;
  backface-visibility: hidden;
  transition: 0.3s ease-in-out;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.button:hover {
  background-color: #fff;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  text-shadow: none;
  color: #355cc9;
}
.button.return {
  line-height: 3em;
  color: #355cc9;
  border-color: #355cc9;
  text-shadow: none;
}
.button.return:hover {
  background-color: #355cc9;
  color: #fff;
  box-shadow: none;
}
*/
form {
	text-align: left;
}
.back h1 {
	margin: 0;
}
form label, form input {
	display: block;
}
form input, form textarea {
	background: transparent;
	border: 0;
	border-bottom: 2px solid #444;
	padding: 5px;
	width: 100%;
	color:#fff
}
form label {
	margin: 15px 0;
}
form input[type="submit"] {
	/* display: block; */
	width: auto;
	margin: 10px auto;
	padding: 5px 10px;
	border: 3px solid #555;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
}
/* Моя вставка */
/* Чтобы не конфликтовала с другой настройкой - закомментировал */
form input[type="button"] {
	display: block;
	width: auto;
	margin: 10px auto;
	padding: 5px 10px;
	border: 3px solid #555;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
}

/* ************* */
/* my button style  */

.white-mode {
	text-decoration: none;
	padding: 7px 10px;
	background-color: #010202;
	border-radius: 3px;
	color: #0F0F0F;

	-webkit-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	
	position: fixed;
	left: 15px;
	bottom: 15px;
	font-family: "GOST-Type-A";
}

.white-mode:hover {
	background-color: #0F0F0F;
	color: #010202;
}