@font-face {
  font-family: 'doomsong';
  src:  url('../fonts/DOOMSONG_FONT_v14.eot');
  src:  url('../fonts/DOOMSONG_FONT_v14.eot') format('embedded-opentype'),
		url('../fonts/DOOMSONG_FONT_v14.ttf') format('truetype'),
		url('../fonts/DOOMSONG_FONT_v14.woff') format('woff'),
		url('../fonts/DOOMSONG_FONT_v14.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'fed';
  src:  url('../fonts/FeDPrm.eot');
  src:  url('../fonts/FeDPrm.eot') format('embedded-opentype'),
		url('../fonts/FeDPrm.ttf') format('truetype'),
		url('../fonts/FeDPrm.woff') format('woff'),
		url('../fonts/FeDPrm.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'fedhead';
  src:  url('../fonts/FeDPsc2.eot');
  src:  url('../fonts/FeDPsc2.eot') format('embedded-opentype'),
		url('../fonts/FeDPsc2.ttf') format('truetype'),
		url('../fonts/FeDPsc2.woff') format('woff'),
		url('../fonts/FeDPsc2.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
	--dice-width: 50px;
	font-family: 'fed', BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

#board {
	position: relative;
	min-height: 80vh;
}

#board::before, #board::after {
	content: '';
	border-left: solid 2px black;
	top: 0;	
	position: absolute;
	height: 100%;
	z-index: -1;
}

#board::before {
	left: calc(50% - 3px);
}

#board::after {
	right: calc(50% - 3px);
}

#board .card {
	background: none;
	box-shadow: none;
}

#board .card.done {
	position: absolute;
	left: 0;
	top: 0;
	margin: 10px;
}

h1, h2, h3, h4, .title, .subtitle, .card-header-title, .modal-card-title {
	font-family: 'doomsong';
	font-size: 3rem !important;
	font-weight: normal !important;
	letter-spacing: 0.05em !important;
}

 .heading, .help strong {
	 font-family: 'fedhead', BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	 font-weight: bold;
	 text-transform: revert;
 }
 
 span.heading {
	 display: inline-block;
	 margin-right: 1em;
 }

.button {
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 20px;
	border-radius: 0;
	white-space: normal;
}

.buttons .button {
	height: auto;
}

.card-header {
	box-shadow: none;
}

.roll {
	cursor: pointer;
	transition: background-color 0.2s ease;
	border-top: solid 3px black;
	border-bottom: solid 3px black;
	border-radius: 0;
}
.roll:hover{
	background-color: #EFEFEF;
}

.dice-container {
  width: 100px;
  aspect-ratio: 1;
  cursor: pointer;
  margin: 20px;
  position: relative;
  z-index: 1;
}

.dice {
  position: relative;
  width: 100px;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform-origin: 50% 50% -50px;
  transform: rotateX(180deg) rotateY(180deg);
  transition: transform 2s ease-in-out;
}

.pulse {
  animation: pulse-animation 2s infinite;
}

.face {
  position: absolute;
  background: radial-gradient(circle at center, #111, #222);
  width: 100px;
  aspect-ratio: 1;
  border-radius: 0px;
  transform: rotateX(0deg) rotateY(180deg);
  transform-origin: 50% 50% -50px;
  /*backface-visibility: hidden;*/
}

.face:nth-child(1) {
  transform: rotateY(0deg);
}

.face:nth-child(2) {
  transform: rotateY(90deg);
}

.face:nth-child(3) {
  transform: rotateY(180deg);
}

.face:nth-child(4) {
  transform: rotateY(270deg);
}

.face:nth-child(5) {
  transform: rotateX(90deg);
}

.face:nth-child(6) {
  transform: rotateX(270deg);
}

.point {
  position: absolute;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 100%;
  align-self: center;
  justify-self: center;
  background: #EFEFEF;
  box-shadow: inset 5px 0 10px #222;
}

.point-top {
  top: 10px;
}

.point-middle {
  top: 40px;
}

.point-bottom {
  bottom: 10px;
}

.point-left {
  left: 10px;
}

.point-center {
  left: 40px;
}

.point-right {
  right: 10px;
}

.roll-btn {
  padding: 4px 6px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bolder;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(127, 132, 12, 0.7);
  }
  100% {
    box-shadow: 0 0 0 17.5px rgba(127, 132, 12, 0);
  }
}
@media(max-width: 979px){
	:root {
		 --drawer-width: 400px;
		 --color-bg: var(--color-font);
		 --shadow-md: none;
		 --ease-in-out: 0.3;
	}
}
@media(min-width: 980px){
	:root {
		 --drawer-width: 50vw;
		 --color-bg: var(--color-font);
		 --shadow-md: none;
		 --ease-in-out: 0.3;
	}
}
 .drawer {
	 position: fixed;
	 z-index: 99999;
	 width: 100%;
	 max-width: var(--drawer-width);
	 height: 100%;
	 top: 0;
	 right: 0;
	 visibility: hidden;
	 transition: visibility 0s 0.3s;
}
 .drawer:focus {
	 outline: none;
}
 .drawer--is-visible {
	 visibility: visible;
	 transition: none;
	 z-index: 39;
}
 .drawer--open-left {
	 right: auto;
	 left: 0;
}
 .drawer__content {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 top: 0;
	 right: 0;
	 background-color: var(--color-bg);
	 box-shadow: var(--shadow-md);
	 transform: translateX(100%);
	 transition: transform 0.3s;
	 transition-timing-function: var(--ease-in-out);
}
 .drawer--open-left .drawer__content {
	 transform: translateX(-100%);
}
 .drawer--is-visible .drawer__content {
	 transform: translateX(0);
}
 .drawer__body {
	height: 100%;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	border-radius: 0;
}
 .drawer__close-btn {
	 z-index: var(--zindex-fixed-element);
	 top: var(--space-xxs);
	 right: var(--space-xxs);
	 width: 2em;
	 height: 2em;
	 display: flex;
	 flex-shrink: 0;
	 justify-content: center;
	 align-items: center;
	 border-radius: 50%;
	 background-color: alpha(var(--color-bg), 0.95);
	 box-shadow: var(--shadow-sm);
	 transition: 0.2s;
}
 .drawer__close-btn:hover {
	 background-color: var(--color-bg);
	 box-shadow: var(--shadow-md);
}
 .drawer__close-btn .icon {
	 display: block;
	 color: var(--color-contrast-high);
}
 .drawer__header {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 flex-shrink: 0;
	 padding: var(--space-xs) var(--component-padding);
	 border-bottom: 1px solid var(--color-contrast-lower);
}
 .drawer--modal {
	 max-width: none;
	 background-color: alpha(var(--color-contrast-higher), 0);
	 transition: background-color 0.3s, visibility 0s 0.3s;
}
 .drawer--modal.drawer--is-visible {
	 background-color: alpha(var(--color-contrast-higher), 0.6);
	 transition: background-color 0.3s;
}
 .drawer--modal.drawer--open-left .drawer__content {
	 right: auto;
	 left: 0;
}
 .drawer--modal .drawer__content {
	 max-width: var(--drawer-width);
}
.badge {
	padding-left: 9px;
	padding-right: 9px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	position: absolute;
	background: red;
	bottom: -5px;
	right: -5px;
	font-size: 0.5em;
	padding: 0.2em 0.6em;
}
.drawer .message-body {
	height: calc(100vh - 100px);
	overflow-y: scroll;
}
.drawer .footer{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding: 10px;
	color: #000;
}

.navbar-item img {
	max-width: 5.18rem;
}

.is-framed {
	background: white;
	padding: 20px;
	border: solid black 3px;
}

.modal-card, .modal-card-head, .modal-card-foot {
	border-radius: 0;
}

/* COIN */
:root {
  --flips: 540deg;
}
.coin-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px;
}
.coin {
  height: 150px;
  width: 150px;
  transform-style: preserve-3d;
  transform-origin: 50%;
  cursor: pointer;
}
.coin.anim {
  animation: flip 1s linear forwards;
}
.coin:before, .coin:after {
  display: grid;
  place-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: #ccc;
  border: 2px solid #ccc;
  box-shadow: inset 0 0 0 3px #bbb;
  font-size: 60px;
  font-family: "Raleway", sans-serif;
  color: #ccc;
  text-shadow: 1.5px 1.5px 0 #bbb, -1.5px -1.5px 0 #ddd;
}
.coin:before {
  transform: translateZ(12.5px);
  content: " ";
  background: url('../img/Heads.png') center center;
  background-size: auto;
}
.coin:after {
  transform: translateZ(-12.5px) rotateY(180deg) rotateZ(180deg);
  content: " ";
  background: url('../img/Tails.png') center center;
  background-size: auto;
}
.coin .edge {
  transform: translateX(62.5px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.coin .edge .segment {
  height: 150px;
  width: 25px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.coin .edge .segment:before, .coin .edge .segment:after {
  content: "";
  display: block;
  height: 15px;
  width: 25px;
  position: absolute;
  transform: rotateX(84.375deg);
}
.coin .edge .segment:before {
  transform-origin: top center;
  background: repeating-linear-gradient(#ccc 0, #ccc 25%, #bbb 25%, #bbb 50%);
}
.coin .edge .segment:after {
  bottom: 0;
  transform-origin: center bottom;
  background: repeating-linear-gradient(#bbb 0, #bbb 25%, #ccc 25%, #ccc 50%);
}
.coin .edge .segment:nth-child(1) {
  transform: rotateY(90deg) rotateX(11.25deg);
}
.coin .edge .segment:nth-child(2) {
  transform: rotateY(90deg) rotateX(22.5deg);
}
.coin .edge .segment:nth-child(3) {
  transform: rotateY(90deg) rotateX(33.75deg);
}
.coin .edge .segment:nth-child(4) {
  transform: rotateY(90deg) rotateX(45deg);
}
.coin .edge .segment:nth-child(5) {
  transform: rotateY(90deg) rotateX(56.25deg);
}
.coin .edge .segment:nth-child(6) {
  transform: rotateY(90deg) rotateX(67.5deg);
}
.coin .edge .segment:nth-child(7) {
  transform: rotateY(90deg) rotateX(78.75deg);
}
.coin .edge .segment:nth-child(8) {
  transform: rotateY(90deg) rotateX(90deg);
}
.coin .edge .segment:nth-child(9) {
  transform: rotateY(90deg) rotateX(101.25deg);
}
.coin .edge .segment:nth-child(10) {
  transform: rotateY(90deg) rotateX(112.5deg);
}
.coin .edge .segment:nth-child(11) {
  transform: rotateY(90deg) rotateX(123.75deg);
}
.coin .edge .segment:nth-child(12) {
  transform: rotateY(90deg) rotateX(135deg);
}
.coin .edge .segment:nth-child(13) {
  transform: rotateY(90deg) rotateX(146.25deg);
}
.coin .edge .segment:nth-child(14) {
  transform: rotateY(90deg) rotateX(157.5deg);
}
.coin .edge .segment:nth-child(15) {
  transform: rotateY(90deg) rotateX(168.75deg);
}
.coin .edge .segment:nth-child(16) {
  transform: rotateY(90deg) rotateX(180deg);
}

.floor {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
.floor .line {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -3.125px;
  width: 150px;
  height: 6.25px;
  transform-origin: center left;
  border-radius: 6.25px;
  background: linear-gradient(90deg, white 20%, transparent 20%);
  background-repeat: no-repeat;
  opacity: 0;
}
.floor .line.anim {
  animation: lines 0.6s ease-out forwards;
  animation-delay: 0.65s;
}
.floor .line:nth-child(1) {
  transform: rotate(30deg) scale(1.1);
}
.floor .line:nth-child(2) {
  transform: rotate(60deg);
}
.floor .line:nth-child(3) {
  transform: rotate(90deg) scale(1.1);
}
.floor .line:nth-child(4) {
  transform: rotate(120deg);
}
.floor .line:nth-child(5) {
  transform: rotate(150deg) scale(1.1);
}
.floor .line:nth-child(6) {
  transform: rotate(180deg);
}
.floor .line:nth-child(7) {
  transform: rotate(210deg) scale(1.1);
}
.floor .line:nth-child(8) {
  transform: rotate(240deg);
}
.floor .line:nth-child(9) {
  transform: rotate(270deg) scale(1.1);
}
.floor .line:nth-child(10) {
  transform: rotate(300deg);
}
.floor .line:nth-child(11) {
  transform: rotate(330deg) scale(1.1);
}
.floor .line:nth-child(12) {
  transform: rotate(360deg);
}

@keyframes flip {
  0% {
    transform: rotateY(0) rotateX(0deg) scale(1);
  }
  10% {
    transform: rotateY(45deg) rotateX(calc(var(--flips) / 3)) scale(1.6);
  }
  60% {
    transform: rotateY(-30deg) rotateX(calc(var(--flips) / 1.5)) scale(2);
  }
  100% {
    transform: rotateY(0) rotateX(var(--flips)) scale(1);
  }
}
@keyframes lines {
  40% {
    opacity: 1;
    background-position: -120px 0;
  }
  70% {
    opacity: 1;
    background-position: 75px 0;
  }
  100% {
    opacity: 1;
    background-position: 150px 0;
  }
}