.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display      : flex;
  flex-wrap    : wrap;
  margin-top   : calc(-1 * var(--bs-gutter-y));
  margin-right : calc(-.5 * var(--bs-gutter-x));
  margin-left  : calc(-.5 * var(--bs-gutter-x));
}

.container {
  width        : 100%;
  padding-right: var(--bs-gutter-x, .75rem);
  padding-left : var(--bs-gutter-x, .75rem);
  margin-right : auto;
  margin-left  : auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

body {
  margin                     : 0;
  font-family                : var(--bs-body-font-family);
  font-size                  : var(--bs-body-font-size);
  font-weight                : var(--bs-body-font-weight);
  line-height                : var(--bs-body-line-height);
  color                      : var(--bs-body-color);
  text-align                 : var(--bs-body-text-align);
  background-color           : var(--bs-body-bg);
  -webkit-text-size-adjust   : 100%;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --edge               : calc(var(--radius) * 0.069799);
  --edge-radius        : calc(var(--radius) * 0.999391);
  --bs-font-sans-serif : system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size  : 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color      : #212529;
  --bs-body-bg         : #fff;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

:root {
  --size      : 140px;
  --radius    : calc(var(--size) / 2);
  --thick     : 14px;
  --thick-half: calc(var(--thick) / 2);
  --border    : var(--thick);
}



@media (min-width: 1600px) {
  :root {
    --size : 300px;
    --thick: 18px;
  }
}

@media (min-width: 1900px) {
  :root {
    --size : 360px;
    --thick: 22px;
  }
}

.row>* {
  flex-shrink  : 0;
  width        : 100%;
  max-width    : 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left : calc(var(--bs-gutter-x) * .5);
  margin-top   : var(--bs-gutter-y);
}

.col-12 {
  flex : 0 0 auto;
  width: 100%;
}

@media (min-width: 1200px) {
  .col-xl-8 {
    flex : 0 0 auto;
    width: 66.66666667%;
  }

  .offset-xl-2 {
    /* margin-left: 16.66666667%; */
  }
}

#content {
  /* min-height     : 80vh; */
  display        : flex;
  flex-direction : column;
  justify-content: center;
}

*,
:after,
:before {
  box-sizing: border-box;
}

#coin-wrapper {
  padding: 3rem 0 0 0;
}

.my-3 {
  margin-top   : 1rem !important;
  margin-bottom: 1rem !important;
}

.fs-2 {
  font-size: calc(1.325rem + .9vw) !important;
}

.text-center {
  text-align: center !important;
}

@media (min-width: 1200px) {
  .fs-2 {
    font-size: 2rem !important;
  }
}

#result {
  visibility: hidden;
}

#coin {
  transition      : transform 6s cubic-bezier(.2, .2, 0, 1);
  width           : var(--size);
  height          : var(--size);
  margin          : 0 auto;
  transform-origin: calc(var(--size)/ 2);
  transform-style : preserve-3d;
  transform       : rotateX(0) rotateY(0) rotateZ(0);
  cursor          : pointer;
}

.demo #coin {
  transition: transform 150s linear;

}

button {
  border-radius     : 0;
  margin            : 0;
  font-family       : inherit;
  font-size         : inherit;
  line-height       : inherit;
  text-transform    : none;
  -webkit-appearance: button;
}

.btn {
  display            : inline-block;
  font-weight        : 400;
  line-height        : 1.5;
  color              : #212529;
  text-align         : center;
  text-decoration    : none;
  vertical-align     : middle;
  cursor             : pointer;
  -webkit-user-select: none;
  -moz-user-select   : none;
  user-select        : none;
  background-color   : transparent;
  border             : 1px solid transparent;
  padding            : .375rem .75rem;
  font-size          : 1rem;
  border-radius      : .25rem;
  transition         : color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-info {
  color           : #000;
  background-color: #0dcaf0;
  border-color    : #0dcaf0;
}

.btn-lg {
  padding      : .5rem 1rem;
  font-size    : 1.25rem;
  border-radius: .3rem;
}

button:not(:disabled) {
  cursor: pointer;
}

.btn:hover {
  color: #212529;
}

.btn-info:hover {
  color           : #000;
  background-color: #31d2f2;
  border-color    : #25cff2;
}

#coin>* {
  position: absolute;
}

.sides {
  transform-style: preserve-3d;
  left           : 0;
}

.face {
  font-size      : var(--size);
  width          : 1em;
  height         : 1em;
  border-radius  : .5em;
  border         : var(--border) solid gray;
  box-sizing     : content-box;
  box-sizing     : border-box;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : #dcdcdc;
}

.heads {
  transform: translateZ(var(--thick-half));
}

.face {
  border: none;
}

.tails {
  transform: rotateY(180deg) translateZ(var(--thick-half));
}

#flip i {
  font-style: normal;
}

.side {
  position     : absolute;
  width        : var(--thick);
  height       : var(--edge);
  top          : calc((var(--size) - var(--edge))/ 2);
  left         : calc((var(--size) - var(--thick))/ 2);
  box-sizing   : border-box;
  background   : silver;
  border-bottom: 1px solid gray;
}

.side:nth-child(1) {
  transform: rotateZ(0deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(2) {
  transform: rotateZ(4deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(3) {
  transform: rotateZ(8deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(4) {
  transform: rotateZ(12deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(5) {
  transform: rotateZ(16deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(6) {
  transform: rotateZ(20deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(7) {
  transform: rotateZ(24deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(8) {
  transform: rotateZ(28deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(9) {
  transform: rotateZ(32deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(10) {
  transform: rotateZ(36deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(11) {
  transform: rotateZ(40deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(12) {
  transform: rotateZ(44deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(13) {
  transform: rotateZ(48deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(14) {
  transform: rotateZ(52deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(15) {
  transform: rotateZ(56deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(16) {
  transform: rotateZ(60deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(17) {
  transform: rotateZ(64deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(18) {
  transform: rotateZ(68deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(19) {
  transform: rotateZ(72deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(20) {
  transform: rotateZ(76deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(21) {
  transform: rotateZ(80deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(22) {
  transform: rotateZ(84deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(23) {
  transform: rotateZ(88deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(24) {
  transform: rotateZ(92deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(25) {
  transform: rotateZ(96deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(26) {
  transform: rotateZ(100deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(27) {
  transform: rotateZ(104deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(28) {
  transform: rotateZ(108deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(29) {
  transform: rotateZ(112deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(30) {
  transform: rotateZ(116deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(31) {
  transform: rotateZ(120deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(32) {
  transform: rotateZ(124deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(33) {
  transform: rotateZ(128deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(34) {
  transform: rotateZ(132deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(35) {
  transform: rotateZ(136deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(36) {
  transform: rotateZ(140deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(37) {
  transform: rotateZ(144deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(38) {
  transform: rotateZ(148deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(39) {
  transform: rotateZ(152deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(40) {
  transform: rotateZ(156deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(41) {
  transform: rotateZ(160deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(42) {
  transform: rotateZ(164deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(43) {
  transform: rotateZ(168deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(44) {
  transform: rotateZ(172deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(45) {
  transform: rotateZ(176deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(46) {
  transform: rotateZ(180deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(47) {
  transform: rotateZ(184deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(48) {
  transform: rotateZ(188deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(49) {
  transform: rotateZ(192deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(50) {
  transform: rotateZ(196deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(51) {
  transform: rotateZ(200deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(52) {
  transform: rotateZ(204deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(53) {
  transform: rotateZ(208deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(54) {
  transform: rotateZ(212deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(55) {
  transform: rotateZ(216deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(56) {
  transform: rotateZ(220deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(57) {
  transform: rotateZ(224deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(58) {
  transform: rotateZ(228deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(59) {
  transform: rotateZ(232deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(60) {
  transform: rotateZ(236deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(61) {
  transform: rotateZ(240deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(62) {
  transform: rotateZ(244deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(63) {
  transform: rotateZ(248deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(64) {
  transform: rotateZ(252deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(65) {
  transform: rotateZ(256deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(66) {
  transform: rotateZ(260deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(67) {
  transform: rotateZ(264deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(68) {
  transform: rotateZ(268deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(69) {
  transform: rotateZ(272deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(70) {
  transform: rotateZ(276deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(71) {
  transform: rotateZ(280deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(72) {
  transform: rotateZ(284deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(73) {
  transform: rotateZ(288deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(74) {
  transform: rotateZ(292deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(75) {
  transform: rotateZ(296deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(76) {
  transform: rotateZ(300deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(77) {
  transform: rotateZ(304deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(78) {
  transform: rotateZ(308deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(79) {
  transform: rotateZ(312deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(80) {
  transform: rotateZ(316deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(81) {
  transform: rotateZ(320deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(82) {
  transform: rotateZ(324deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(83) {
  transform: rotateZ(328deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(84) {
  transform: rotateZ(332deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(85) {
  transform: rotateZ(336deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(86) {
  transform: rotateZ(340deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(87) {
  transform: rotateZ(344deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(88) {
  transform: rotateZ(348deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(89) {
  transform: rotateZ(352deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.side:nth-child(90) {
  transform: rotateZ(356deg) rotateY(90deg) translateX(0px) translateY(0px) translateZ(var(--edge-radius));
}

.heads i {
  background-image: url('../img/heads.svg');
}

.face i {
  font-size  : calc(var(--size) * .7);
  width      : 1em;
  height     : 1em;
  line-height: 1em;
  font-style : normal;
}

.heads i {
  background-image: url('../img/RUB-heads.png');
}

.face i {
  font-size      : var(--size);
  border-radius  : calc(var(--size)/ 2);
  background-size: var(--size) var(--size);
}

.tails i {
  background-image: url('../img/RUB-tails.png');
}


.buttons {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

button {
  width        : 150px;
  padding      : 15px 0;
  border       : none;
  font-size    : 16px;
  border-radius: 5px;
  cursor       : pointer;
}

#flip-button {
  background-color: #053469;
  color           : #ffffff;
}

@media screen and (max-width:430px) {
  button {
    width: 90px;

  }
}

.select_block {
  padding: 10px !important;
}

.text_big {
  margin: 0px !important;
}