/*
 Theme Name:   Drunk Souls
 Theme URI:    https://www.luukoudevrielink.nl
 Description:  Drunk Souls theme
 Author:       Luuk Oude Vrielin
 Author URI:   https://www.luukoudevrielink.nl
 Template:     twentytwentyone
 Version:      1.0.0
 Tags:         drunk,souls
 Text Domain:  drunksouls
*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

body, html {
	height: 100vh;
    width: 100vw;
    position: relative;
    left: 0;
    top: 0;
	margin: 0 !important;
	padding: 0;
	font-family: 'Open Sans', sans-serif !important;
}

html {
	margin-top: 0px !important;
}

h1, h2, h3, a, p, u, b, input, label, button, * {
	font-family: 'Open Sans', sans-serif !important;
}

#background_container {
    width: 100vw;
    height: 100vh;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
	position: absolute;
}
    
@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-100vh);
  }
}

#stars1{
  width: 1px;
  height: 1px;
  background: transparent;
  animation : animStar 150s linear infinite;
  box-shadow: var(--shadows-small);
}
#stars1:after {
    content: " ";
    position: absolute;
    top: 100vh;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: var(--shadows-small);
}

#stars2{
  width: 2px;
  height: 2px;
  background: transparent;
  animation : animStar 150s linear infinite;
  box-shadow: var(--shadows-medium);
}
#stars2:after {
    content: " ";
    position: absolute;
    top: 100vh;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: var(--shadows-medium);
}#stars3{
  width: 3px;
  height: 3px;
  background: transparent;
  animation : animStar 150s linear infinite;
  box-shadow: var(--shadows-big);
}
#stars3:after {
    content: " ";
    position: absolute;
    top: 100vh;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: var(--shadows-big);
}

#players_modal, #player_list_background{
	width: 40%;
	height: 40%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: white;
	text-align: center;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	display: flex;
    flex-direction: column;
    justify-content: space-around;
	border-radius: 5px;
	max-width: 600px;
}

.form-container {
		position: relative;
		overflow-y: auto;
}

#players_modal #begin_drinking_button, .card_next, #start_game_button{
    margin-bottom: 1rem;
}

#players_modal #add_player_button{
	margin: 1rem auto;
}

#add_player_button{
	display: block;
}

#playername_input{
	margin-left: 1rem;
}

#player_list_input {
	width: 100%;
	margin: 2rem -1rem;
	max-width: 100%;
	position: relative;
	display: flex;
}

#player_list_input input {
	flex: 1;
	width: 80%;
	margin-right: 10px;
}

#player_list_input button {
	margin-right: -2rem;
}

@media screen and (max-width: 980px){
	body {
		display: flex;
		align-items: center;
		flex-direction: column;
		overflow: hidden;
	}
	
	body #player_list {
		margin-top: 1rem;
		height: auto;
		top: auto;
		left: auto;
		transform: none;
		display: table;
		position: relative;
		width: 90vw;
		padding: 1rem;
	}
	
	body #player_list_container {
		max-width: none;
		position: relative;
		overflow-y: auto;
		padding: 0;
	}
	
	#player_list_container .name_node {
		width: auto;
		float: left;
		padding: 0 0 0 25px;
	}
	
	body .card_body {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		margin-top: 1rem;
		flex: 1;
	}
	
	#players_modal {
		transform: translateY(calc(-100% - 1rem)) !important;	
	}
	
	#players_modal, #player_list_background {
		width: 400px;
		max-width: 90vw;
		top: auto;
		left: auto;
		transform: none;
		position: relative;
		margin-top: 1rem;
		height: auto;
		min-height: 50vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	body #passive_list {
		position: relative;
		left: auto;
		top: auto;
		display: flex;
		height: 25vh;
		width: 95%;
		margin: 1rem;
		overflow-x: auto;
		position: relative;
	}
	body .passive_card_content{
		width: 200px;
	}
	body .card_content_container{
		overflow-y: auto;
		padding: 1rem !important;
	}
	
	body .card_content_container .card_content{
		max-height: 100%;
	}
	.passive_card {
		display: table;
	}
	
	.next_button_container {
		height: 60px;
		padding-top: 5px;
		min-height: 60px
	}
	
	.card_next {
		padding: 5px 25px;
	}

	#player_list_input {
		width: 100%;
		margin: auto !important; 
		max-width: 100%;
		position: relative;
		display: flex;
	}

	#player_list_input input {
		flex: 1;
		width: 80%;
		margin-right: 10px;
	}

	#player_list_input button {
		margin-right: 0 !important;
	}

}

.custom .card_next {
	position: absolute;
    	bottom: 0;
    	left: 20% !important;
}

.custom_rule_input {
	align-self: center;
	margin: auto;
}

body .card_body.custom .next_button_container > button {
	padding: 5 25px !important;
	position: relative;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	margin-left: 1rem !important;
	right: auto;
}
.card_body.custom:after{ 
	display: none
}


#player_list {
    position: absolute;
    left: 5%;
    height: 60vh;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    padding: 2rem;
	text-align: center;
	display: none;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	width: 250px;
	background-color: #343a40;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.25' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to right top, #fff, #eee, #ddd, #ccc, #bbb);
	border-radius: 5px;
	border: 1px solid white;
}

#player_list.show {
	display: block;
}

#player_list_container {
    overflow-y: auto;
    padding: 1rem;
	max-width: 200px;
}

.name_node.current {
	font-weight: bold;
}
.name_node {
	width: 100%;
	word-wrap: break-word;
	position: relative;
}

.remove_name_node {
	position: absolute;
	top: 0;
    	color: red;
    	cursor: pointer;
    	transform: translateX(-150%);
}

.card_body{
	width: 400px;
	max-width: 90vw;
	min-height: 40%;
	position: absolute;
	display: flex;
	flex-direction: column;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: black !important;
	border-radius: 15px;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	/* -webkit-animation: fadeIn linear 1s; */
	/* -moz-animation: fadeIn linear 1s; */
	/* -o-animation: fadeIn linear 1s; */
	/* -ms-animation: fadeIn linear 1s; */
	overflow: hidden;
	user-select: none;
	border: solid 1px white;
	animation: gradient 10s ease infinite;
	background-size: 400% 400% !important;
}

.card_body:after{
    position: absolute;
    bottom: -125px;
    right: -125px;
    transform: rotate(-45deg);
    width: 200px;
    height: 200px;
	font-weight: bold;
	color: black;
    font-weight: bold;
    text-shadow: -1px -1px 0 #ffffff47, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
	opacity: 0.8;
	background-size: 20px 35px;
	background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

.card_title{
	padding-top: 1rem;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.card_body:before {
  
  /* animation: shine 5s ease-in-out  infinite; */
  animation-fill-mode: forwards;  
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  pointer-events: none;  
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

@keyframes shine{
  10% {
    opacity: 0.2;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
  }
  100% {
    opacity: 0;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
  }
}

.card_body.individual:after{ 
	content: "Solo";
	background-image:  linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777), linear-gradient(60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777);
	background-color: #e5e5f7;
}

.card_body.group:after{
	content: "Group";
	background-color: #f7e6e6;
	background-image:  linear-gradient(30deg, #f74545 12%, transparent 12.5%, transparent 87%, #f74545 87.5%, #f74545), linear-gradient(150deg, #f74545 12%, transparent 12.5%, transparent 87%, #f74545 87.5%, #f74545), linear-gradient(30deg, #f74545 12%, transparent 12.5%, transparent 87%, #f74545 87.5%, #f74545), linear-gradient(150deg, #f74545 12%, transparent 12.5%, transparent 87%, #f74545 87.5%, #f74545), linear-gradient(60deg, #f7454577 25%, transparent 25.5%, transparent 75%, #f7454577 75%, #f7454577), linear-gradient(60deg, #f7454577 25%, transparent 25.5%, transparent 75%, #f7454577 75%, #f7454577);
}	

.card_body.passive:after{
	content: "Passive";
	background-color: #f7f7e6;
	background-image:  linear-gradient(30deg, #f7d745 12%, transparent 12.5%, transparent 87%, #f7d745 87.5%, #f7d745), linear-gradient(150deg, #f7d745 12%, transparent 12.5%, transparent 87%, #f7d745 87.5%, #f7d745), linear-gradient(30deg, #f7d745 12%, transparent 12.5%, transparent 87%, #f7d745 87.5%, #f7d745), linear-gradient(150deg, #f7d745 12%, transparent 12.5%, transparent 87%, #f7d745 87.5%, #f7d745), linear-gradient(60deg, #f7d74577 25%, transparent 25.5%, transparent 75%, #f7d74577 75%, #f7d74577), linear-gradient(60deg, #f7d74577 25%, transparent 25.5%, transparent 75%, #f7d74577 75%, #f7d74577);
}

.card_body.custom:after{
	content: "Custom";
	background-color: #dbdbdb;
	background-image:  linear-gradient(30deg, #949494 12%, transparent 12.5%, transparent 87%, #949494 87.5%, #949494), linear-gradient(150deg, #949494 12%, transparent 12.5%, transparent 87%, #949494 87.5%, #949494), linear-gradient(30deg, #949494 12%, transparent 12.5%, transparent 87%, #949494 87.5%, #949494), linear-gradient(150deg, #949494 12%, transparent 12.5%, transparent 87%, #949494 87.5%, #949494), linear-gradient(60deg, #94949477 25%, transparent 25.5%, transparent 75%, #94949477 75%, #94949477), linear-gradient(60deg, #94949477 25%, transparent 25.5%, transparent 75%, #94949477 75%, #94949477);
}		

.card_body.individual{
	background: linear-gradient(-45deg, #0008f7, #23a6d5, #23d5ab);
}

.card_body.group{
	background: linear-gradient(-45deg, #f70000, #d56523, #d523bf);
}
.card_body.custom{
	/* background: repeating-radial-gradient(white, #cdcdcd 7px); */
	background: linear-gradient(-45deg, #c9dbd9, #7a7a7a, #aef7f7);
}

.card_body.passive{
	background: linear-gradient(-45deg, #E4D6A7, #f9ff00, #f98b00);
}

.card_body .card_content_container {
    position: relative;
	flex: 1;
	display: flex;
}

.card_body .card_content, #add_player_form {
	align-self: center;
	width: 100%;
	overflow-y: auto;
	max-height: 80vh;
	padding: 0 1rem;
}

#add_player_form {
    width: 80%;
	margin: auto;
    margin-bottom: 15%;
    display: flex;
    flex-direction: column;
}

#passive_list {
    position: absolute;
    right: 0;
    top: 0;
    height: 100vh;
    width: 240px;
	overflow-y: auto;
}

#continue_button {
	margin-left: 2rem;
}

.passive_card {
    background: white;
    margin: 0.25rem;
    border-radius: 15px;
    font-size: 20px;
    line-height: 1em;
	position: relative;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23dedbdb' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.passive_card_content{
    padding: 1rem;
}

.passive_card_close_button {
    position: absolute;
    right: 10px;
    top: 5px;
    cursor: pointer;
    font-weight: bold;
	user-select: none;
}

.passive_turn_counter {
	font-size: 11px;
    padding: 4px 16px;
}

.card_body.custom .card_content_container {
	height: 40% !important;
}

.custom_rule_input {
    width: 80%;
    height: 50px;
	margin-bottom: 20px;
}
.card_body.custom .card_next{
    left: 30% !important;
}

.card_body.custom .submit_custom{
    position: absolute;
    bottom: 0;
    right: 20%;
    margin-bottom: 1rem;
}

.card_content {
	text-shadow: #a7a7a74f 1px 1px;
}

#player_list_background:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}
#player_list_background {
	z-index: 0;
	--borderWidth: 5px;	
}

button {
	background: black !important;
    border: black solid 2px !important;
    color: white !important;
    border-radius: 2px !important;
    padding: 2px 16px !important;
	transition: 0.1s all;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

button:hover {
	background: white !important;
	color: black !important;
}

button:focus {
	outline: none !important;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
​
@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
​
@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
​
@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
​
@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}