@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700;900&display=swap");

:root {
	--theme-color-1: #e9dda2;
	--theme-color-2: #8f2d2d;
	--theme-color-3: #af9158;
	--theme-text-color: #fff;
	--theme-error-color: #ff0000;
	--background-color: #000;

	--scrollbar-color: #bbbcc0;
	--scrollbar-background-color: #ffffff;

	--title-color: #fd7a44;
	--text-color: var(--theme-text-color);
	--button-text-color: var(--theme-text-color);
	--button-bg-color: #fd7a44;
	--button-hover-text-color: #ffffff;
	--button-hover-bg-color: #fe5711;

	--modal-color: var(--theme-color-1);
	--modal-bg-color: #616161;

	--card-text-color: #757575;
	--card-bg-color: var(--theme-text-color);
	--bs-border-radius: 0;
	--bs-border-radius-sm: 0;
	--bs-border-radius-lg: 0;
	--bs-border-radius-xl: 0;
	--bs-border-radius-xxl: 0;
	--bs-border-radius-2xl: 0;
	--bs-border-radius-pill: 0;
	--bs-btn-border-radius: 0;
	--bs-btn-border-radius-sm: 0;
	--bs-btn-border-radius-lg: 0;
	--bs-card-border-radius: 0;
	--bs-list-group-border-radius: 0;
	--bs-alert-border-radius: 0;
	--bs-badge-border-radius: 0;
	--bs-pagination-border-radius: 0;
	--bs-form-control-border-radius: 0;
	--bs-form-select-border-radius: 0;
	--bs-modal-border-radius: 0;
	--bs-toast-border-radius: 0;
}

html body {
	background: var(--background-color) url(../images/bg.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--theme-color-1);
}

html {
	height: 100%;
}

.hide {
	display: none !important;
}

.show {
	display: block !important;
}

/*scrollbar*/
::-webkit-scrollbar {
	-webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
	width: 8px;
}

::-webkit-scrollbar:horizontal {
	height: 12px;
}

::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-color);
	border-radius: 0;
	border: 0px solid var(--scrollbar-color);
}

::-webkit-scrollbar-track {
	border-radius: 0;
	background-color: var(--scrollbar-background-color);
}

/* container */
.wrapper {
	position: relative;
	height: 100vh !important;
	max-width: 1000px;
	width: 100%;
	/*padding: 200px 0 150px 0;*/
	margin: 0 auto;
	display: block;
}

.wrapper .video {
	width: 100%;
	max-width: 1200px;
	/* position: absolute;
   top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
}

#top {
	/*	position: absolute;
	top:0;
	height:100px;*/
	width: 100%;
	background: rgba(0, 0, 0, 0.76);
	z-index: 9999;
}

.logo {
	height: 35px;
}

.top_logo {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: block;
}

#nav {
	position: absolute;
	max-width: 1200px;
}

.nav-wrapper {
	position: absolute;
	max-width: 1200px;
	top: 100px !important;
	font-weight: 500;
}

#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 150px;
	z-index: 9999;
}

.navbar-dark {
	background: rgba(255, 255, 255, 0.1) !important;
}

.navbar-toggler-icon {
	width: 1.3rem !important;
	height: 1.3rem !important;
}

.content {
	width: 100%;
}

.nav-item {
	font-weight: 700;
	padding: 0 15px !important;
	font-size: 18px;
}

.offcanvas-body {
}

.v-container {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.v-container > .v-fixed-content {
	flex-grow: 0;
	flex-shrink: 0;
}

.v-container > .v-flex-content {
	flex-grow: 1;
	flex-shrink: 1;
}

.vote__subtitle {
	color: var(--title-color);
    font-size: 1rem;
    text-align: center;
    margin-top: -0.8em !important;
    margin-bottom: 0.8em !important;
}

@media (min-width: 320px) and (max-width: 480px) {
	.logo {
		width: 200px;
		height: auto;
	}

	.wrapper {
		height: 100vh;
		padding: 0;
	}

	.wrapper .video {
		width: 100%;
	}

	#footer {
		position: absolute;
		bottom: -300px;
		height: 500px;
		background: rgba(0, 0, 0, 0.76);
	}
}

@media (min-width: 481px) {
	.mobile {
		display: none;
	}

	.desktop {
		display: block;
	}
}

@media (min-width: 320px) and (max-width: 480px) {
	body {
		background-image: url(../images/bg.jpg);
	}

	.wrapper .video {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.mobile {
		display: block;
	}

	.desktop {
		display: none;
	}
}

/* Caption */

.caption {
	background: rgba(143, 78, 150, 0.8);
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	display: block;
	color: #fff000;
	padding: 10px 0;
}

/* Button */

.menu-wrapper {
	padding: 10px;
}

.menu {
	display: flex;
	max-width: 1000px;
	width: 100%;
	margin: 10px auto;
	color: #fff;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: space-around;
	align-items: center;
}

.glow-on-hover {
	width: 300px;
	height: 50px;
	border: #fff solid rgba(142, 142, 142, 0.8);
	outline: none;
	color: #fffcce;
	background: rgba(159, 159, 159, 0.65);
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 0;
	font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
	font-size: 20px;
	font-weight: 700;
	margin: 10px 0;
}

.glow-on-hover:before {
	content: "";
	background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
	position: absolute;
	top: -2px;
	left: -2px;
	background-size: 400%;
	z-index: -1;
	filter: blur(5px);
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	animation: glowing 20s linear infinite;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	border-radius: 0;
}

.glow-on-hover:active {
	color: #000;
}

.glow-on-hover:active:after {
	background: transparent;
}

.glow-on-hover:hover:before {
	opacity: 1;
}

.glow-on-hover:after {
	z-index: -1;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: #111;
	left: 0;
	top: 0;
	border-radius: 0;
}

@keyframes glowing {
	0% {
		background-position: 0 0;
	}

	50% {
		background-position: 400% 0;
	}

	100% {
		background-position: 0 0;
	}
}

@media (min-width: 320px) and (max-width: 480px) {
}

/* Top & Footer*/

/* KV */

.cybr-kv {
	--primary: hsl(var(--primary-hue), 65%, calc(var(--primary-lightness, 50) * 1%));
	--shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
	--primary-hue: 0;
	--primary-lightness: 50;
	--color: hsl(0, 0%, 100%);
	--font-size: 26px;
	--shadow-primary-hue: 180;
	--label-size: 9px;
	--shadow-secondary-hue: 60;
	--shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
	--clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
	--border: 4px;
	--shimmy-distance: 5;
	--clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
	--clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
	--clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
	--clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
	--clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
	--clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
	--clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
	font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
	color: var(--color);
	background: transparent;
	outline: transparent;
	position: relative;
	border: 0;
	transition: background 0.4s;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1100px;
}

.cybr-kv img {
	width: 100%;
}

.cybr-kv:hover {
	--primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.8%));
}

.cybr-kv:active {
	--primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.6%));
}

.cybr-kv:after,
.cybr-kv:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	clip-path: var(--clip);
	z-index: -1;
}

.cybr-kv:before {
	display: block;
	transform: translate(var(--border), 0);
}

.cybr-kv:after {
	display: block;
}

.cybr-kv__glitch2 {
	position: absolute;
	top: calc(var(--border) * -1);
	left: calc(var(--border) * -1);
	right: calc(var(--border) * -1);
	bottom: calc(var(--border) * -1);
	background: var(--shadow-primary);
	text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
	clip-path: var(--clip);
	animation: glitch2 1.8s infinite;
	display: none;
}

.cybr-kv .cybr-kv__glitch2 {
	display: block;
}

.cybr-kv__glitch2:before {
	content: "";
	position: absolute;
	top: calc(var(--border) * 1);
	right: calc(var(--border) * 1);
	bottom: calc(var(--border) * 1);
	left: calc(var(--border) * 1);
	clip-path: var(--clip);
	background: var(--primary);
	z-index: -1;
}

@keyframes glitch2 {
	0% {
		clip-path: var(--clip-one);
	}

	4%,
	9% {
		clip-path: var(--clip-two);
		transform: translate(calc(var(--shimmy-distance) * -1%), 0);
	}

	8% {
		clip-path: var(--clip-two);
		transform: translate(calc(var(--shimmy-distance) * 1%), 0);
	}

	9% {
		clip-path: var(--clip-two);
		transform: translate(0, 0);
	}

	11% {
		clip-path: var(--clip-three);
		transform: translate(calc(var(--shimmy-distance) * 1%), 0);
	}

	13% {
		clip-path: var(--clip-three);
		transform: translate(0, 0);
	}

	14%,
	22% {
		clip-path: var(--clip-four);
		transform: translate(calc(var(--shimmy-distance) * 1%), 0);
	}

	27% {
		clip-path: var(--clip-five);
		transform: translate(calc(var(--shimmy-distance) * 1%), 0);
	}

	32% {
		clip-path: var(--clip-five);
		transform: translate(calc(var(--shimmy-distance) * -1%), 0);
	}

	33%,
	44% {
		transform: translate(calc(var(--shimmy-distance) * -1%));
	}

	42% {
		transform: translate(calc(var(--shimmy-distance) * 1%));
	}

	50% {
		transform: translate(0, 0);
	}

	58% {
		transform: translate(calc(var(--shimmy-distance) * 1%), 0);
	}

	63% {
		transform: translate(0, 0);
	}

	31%,
	62%,
	100% {
		clip-path: var(--clip-four);
	}
}

/* cyber button */
@font-face {
	font-family: Cyber;
	src: url("https://assets.codepen.io/605876/Blender-Pro-Bold.otf");
	font-display: swap;
}

* {
	box-sizing: border-box;
}

.cybr-btn {
	--primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%));
	--shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
	--primary-hue: 0;
	--primary-lightness: 50;
	--color: hsl(0, 0%, 100%);
	--font-size: 26px;
	--shadow-primary-hue: 180;
	--label-size: 9px;
	--shadow-secondary-hue: 60;
	--shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
	--clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
	--border: 4px;
	--shimmy-distance: 5;
	--clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
	--clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
	--clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
	--clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
	--clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
	--clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
	--clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
	font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
	color: var(--color);
	/*cursor: pointer;*/
	background: transparent;
	font-size: var(--font-size);
	outline: transparent;
	letter-spacing: 2px;
	position: relative;
	font-weight: 900;
	border: 0;
	min-width: 300px;
	/*  height: 75px; */
	/*  line-height: 75px;*/
	transition: background 0.2s;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 5px;
	opacity: 0.95;
}

.cybr-btn:hover {
	--primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.8%));
}

.cybr-btn:active {
	--primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.6%));
}

.cybr-btn:after,
.cybr-btn:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	clip-path: var(--clip);
	z-index: -1;
}

.cybr-btn:before {
	display: block;
	transform: translate(var(--border), 0);
}

.cybr-btn:after {
	display: block;
}

.cybr-btn__tag {
	position: absolute;
	padding: 1px 4px;
	letter-spacing: 1px;
	line-height: 1;
	bottom: -5%;
	right: 5%;
	font-weight: normal;
	color: hsl(0, 0%, 0%);
	font-size: var(--label-size);
}

.cybr-btn__glitch {
	position: absolute;
	top: calc(var(--border) * -1);
	left: calc(var(--border) * -1);
	right: calc(var(--border) * -1);
	bottom: calc(var(--border) * -1);
	background: var(--shadow-primary);
	text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
	clip-path: var(--clip);
	animation: glitch 2s infinite;
	display: none;
}

.cybr-btn .cybr-btn__glitch {
	display: block;
}

.cybr-btn:hover .cybr-btn__glitch {
	display: none;
}

.cybr-btn__glitch:before {
	content: "";
	position: absolute;
	top: calc(var(--border) * 1);
	right: calc(var(--border) * 1);
	bottom: calc(var(--border) * 1);
	left: calc(var(--border) * 1);
	clip-path: var(--clip);
	background: var(--primary);
	z-index: -1;
}

@keyframes glitch {
	0% {
		clip-path: var(--clip-one);
	}

	2%,
	8% {
		clip-path: var(--clip-two);
		transform: translate(calc(var(--shimmy-distance) * -1%), 0);
	}

	6% {
		clip-path: var(--clip-two);
		transform: translate(calc(var(--shimmy-distance) * 1%), 0);
	}

	9% {
		clip-path: var(--clip-two);
		transform: translate(0, 0);
	}

	10% {
		clip-path: var(--clip-three);
		transform: translate(calc(var(--shimmy-distance) * 1%), 0);
	}

	13% {
		clip-path: var(--clip-three);
		transform: translate(0, 0);
	}

	14%,
	21% {
		clip-path: var(--clip-four);
		transform: translate(calc(var(--shimmy-distance) * 1%), 0);
	}

	25% {
		clip-path: var(--clip-five);
		transform: translate(calc(var(--shimmy-distance) * 1%), 0);
	}

	30% {
		clip-path: var(--clip-five);
		transform: translate(calc(var(--shimmy-distance) * -1%), 0);
	}

	35%,
	45% {
		transform: translate(calc(var(--shimmy-distance) * -1%));
	}

	40% {
		transform: translate(calc(var(--shimmy-distance) * 1%));
	}

	50% {
		transform: translate(0, 0);
	}

	55% {
		transform: translate(calc(var(--shimmy-distance) * 1%), 0);
	}

	60% {
		transform: translate(0, 0);
	}

	31%,
	61%,
	100% {
		clip-path: var(--clip-four);
	}
}

.cybr-btn:nth-of-type(1) {
	--primary-hue: 260;
}

.cybr-btn:nth-of-type(2) {
	--primary-hue: 380;
}

.cybr-btn:nth-of-type(3) {
	--primary-hue: 110;
}

.main-btn {
	height: 110px;
	opacity: 0.95;
}

.main-btn:hover {
	filter: drop-shadow(16px 16px 20px white);
	opacity: 1;
}

.main-btn:active {
	filter: drop-shadow(16px 16px 20px white);
	opacity: 1;
}

@media (min-width: 320px) and (max-width: 480px) {
	.cybr-btn {
		font-size: 20px;
		line-height: 1.6;
	}

	.main-btn {
		opacity: 1;
	}
}

/*  Game  */

.game__intro {
	background: var(--theme-color-3);
	width: 100%;
	padding: 10px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
}

/*  Coming */

.coming__bg {
	background: #573884;
	width: 100%;
	height: calc(100% - 30%);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.coming__content {
	color: #c0edfe;
	font-weight: 900;
	text-align: center;
	font-size: 30px;
	padding: 30px;
}

/*  Voting  */

.vote__bg {
	background: var(--theme-color-2);
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	padding-bottom: 150px;
}

.vote__title {
	color: var(--title-color);
	font-weight: 900;
	text-align: center;
	font-size: 30px;
	padding: 10px;
}

.vote__text {
	color: var(--text-color);
	font-size: 20px;
	text-align: center;
	font-weight: bold;
}

.vote__container {
	max-height: 70vh;
	/* height: 100%; */
	overflow-y: scroll;
	padding: 5px;
	margin-top: 10px !important;
}

.vote__display__container {
	padding: 5px;
}

@media (min-width: 481px) {
	.vote__display__container {
		min-width: 630px;
	}
}

.vote__error__text {
	min-height: 2rem;
	margin: 2px;
}

.vote__error__text span {
	color: var(--theme-error-color);
	font-size: 20px;
	text-align: center;
	font-weight: bold;
}

.vote__btn__wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	padding: 10px;
}

.vote__btn__wrapper img {
	height: 100px;
	margin: 10px;
}

.vote__btn {
	max-width: 280px;
	font-size: 20px;
	text-align: center;
	color: var(--button-text-color);
	font-weight: bold;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	background: var(--button-bg-color);
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	margin: 0 auto;
	display: block;
}

.vote__btn:hover {
	color: var(--button-hover-text-color);
	background-color: var(--button-hover-bg-color);
}

a.vote__btn {
	cursor: pointer;
}

.vote__btn__title {
	font-size: 20px;
	text-align: center;
	padding: 15px 0;
	color: var(--theme-text-color);
	font-weight: bold;
}

.vote__card.card {
	text-wrap: pretty;
	text-align: center;
	color: var(--card-text-color);
	height: 100% !important;
}

.vote__card .card-title {
	padding: 0;
	margin-top: 0;
	text-wrap: balance;
	font-size: 21px;
}

.vote__card .card-body {
	text-wrap: balance;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.vote__checkbox:not(.vote__img) {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-size: 17px;
}

.vote__checkbox:not(.vote__img) > label {
	width: 100%;
}

.vote__checkbox:not(.vote__img)::before {
	content: "";
}

.vote__checkbox > label {
	margin: 5px;
	font-weight: bold;
	cursor: pointer;
}

.vate__checkbox > label > img {
	margin: 5px;
	height: 30px;
}

.vote__checkbox > input {
	min-height: 1em;
	min-width: 1em;
	vertical-align: text-bottom;
	cursor: pointer;
    appearance: none;
    border: 1px solid #858585;
}

.vote__checkbox > input:checked {
    background-color: #4c4c4c;
}

.vote__checkbox > input:checked::before {
    content: '✓';
    display: block;
    color: #ffffff;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    font-weight: bold;
}

.vote__checkbox.vote__img {
	text-align: center;
}

.vote__checkbox.vote__img input {
	vertical-align: text-bottom;
	height: 30px;
}

.vote__checkbox.vote__img img {
	height: 30px;
	vertical-align: text-bottom;
}

/* Remove rounded corners across boxes / inputs */
.card,
.card img,
.form-control,
.form-select,
.form-check-input,
.form-check-label::before,
.rounded,
.rounded-0,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-circle,
.rounded-pill,
input,
textarea,
select,
button,
.btn,
.vote__card,
.vote__dialog,
.vote__checkbox > input,
.vote__modal,
.vote__btn,
.btn_trigger_modal {
	border-radius: 0 !important;
}

.vote__select {
	width: 100%;
	/* height: 1.5em; */
	padding: 10px;
}

.form-group {
	font-size: 20px;
	color: var(--theme-text-color);
	font-weight: bolder;
	padding: 5px;
}

.form-group label {
	color: var(--theme-text-color) !important;
}

.form-group img {
	color: #e39b6b;
	padding: 0% 0 1% 0;
	width: 100%;
	max-width: 260px;
	cursor: pointer;
}

.btn_trigger_modal {
	padding: 5px;
	width: 360px;
	border: 1px solid #fff;
	border-radius: 0;
	background-color: inherit;
	color: inherit;
}

.vote__dialog {
	display: none;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
}

.vote__modal {
	max-width: 1000px;
	max-height: 700px;
	min-width: 500px;
	min-height: 350px;
	overflow-y: auto;
	background-color: var(--modal-bg-color);
	border: 3px outset var(--modal-bg-color);
	border-radius: 0;
	padding: 1em;
}

.vote__dialog * {
	color: #fff;
}

.vote__dialog .dialog__title {
}

.vote__dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
}

.vote__dialog button.dialog__close,
.vote__dialog a.dialog__close {
	padding: 5px;
	width: 35px;
	height: 35px;
	background: url(../images/icon_close.svg) no-repeat center;
	background-size: 25px;
	cursor: pointer;
	float: right;
	background-color: var(--modal-bg-color);
	border: 3px outset var(--modal-color);
	border-radius: 0;
}

#vote__footer {
	position: relative;
	background-color: #000b;
	padding: 5px;
}

@media (min-width: 320px) and (max-width: 480px) {
	.vote__title {
		font-size: 24px;
		padding: 10px;
	}

	.vote__modal {
		min-width: 90vw;
		max-width: 90vw;
		/* min-height: 90vh; */
		max-height: 90vh;
		word-wrap: break-word;
	}

	.vote__container {
		max-height: 52vh;
	}

	#vote__footer {
		position: sticky;
		bottom: 0;
	}
}