@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=ABeeZee|Roboto');
@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap');

:root{
	--font-family-body:  Roboto;
	--font-family-headings:  ABeeZee;
	--font-family-brand:  'Sansita Swashed';

	--def-border-radius: 0.5rem;

	--collect: var(--bs-success);
	--keep: var(--bs-warning);
	--wishlist: var(--bs-primary);
}

[data-bs-theme='dark'] {
	--collect: var(--bs-success);
	--keep: var(--bs-warning-text-emphasis);
	--wishlist: var(--bs-primary);
}


.ff-brand {
	font-family: var(--font-family-brand);
}

.navbar-toggler{
	border: 0;
}
.navbar-toggler:focus {
	outline: 0;
}

.navbar-brand, .navbar-brand:hover {
	color: var(--bs-primary);
	font-family: var(--font-family-brand);
	font-size: 1.75rem;
	text-shadow: 
		1px 0px 0px var(--bs-body-bg),
		1px 1px 0px var(--bs-body-bg),
		2px 1px 3px rgba(var(--bs-body-color-rgb), 0.6);
}


.navbar-brand small{
	color: var(--bs-gray-500);
	font-size: 0.8rem;
}


/* design 2 */

#design2 .navbar-brand {
	text-shadow: none;
}

#design2 .btn{
	--bs-btn-border-radius: 1.5rem !important;
}
@media (min-width: 1400px){
	#design2 .container, #design2 .container-lg, #design2 .container-md, #design2 .container-sm, #design2 .container-xl, #design2 .container-xxl {
		max-width: 1140px;
	}
}


/* html tags */
body{
	background-color: var(--bs-body-bg);
	font-family: var(--font-family-body);
}

a {
	text-decoration: none;
}

a:not([class]):hover{
	text-decoration: underline;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-headings);
	letter-spacing: -.1rem;
}

.btn {
	box-shadow: 0 0.15rem 0.25rem -0.15rem var(--bs-btn-bg); 
}
.btn[class*='btn-outline'] {
	box-shadow: 0 0.15rem 0.25rem -0.15rem var(--bs-btn-color); 
}

.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}

.breadcrumb {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

.theme-toggle {
	cursor: pointer;
}
.theme-toggle.toggle-light {
	display: none;
}

[data-bs-theme='dark'] .theme-toggle.toggle-light {
	display: inline-block;
}
.theme-toggle.toggle-dark {
	display: inline-block;
}

[data-bs-theme='dark'] .theme-toggle.toggle-dark {
	display: none;
}

.btn-outline-dark:hover svg {
	color: var(--bs-primary);
}

[data-bs-theme='dark'] .btn-outline-dark {
	color: var(--bs-light);
	border-color: var(--bs-light);
}

[data-bs-theme='dark'] .btn-outline-dark:hover {
	color: var(--bs-dark);
	background-color: var(--bs-light);
}

[data-bs-theme='dark'] .btn-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-gray-500);
    --bs-btn-hover-border-color: var(--bs-gray-500);
    --bs-btn-focus-shadow-rgb: 66,70,73;
    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-bg: var(--bs-gray-500);
    --bs-btn-active-border-color: var(--bs-gray-500);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-light);
    --bs-btn-disabled-bg: var(--bs-gray-500);
    --bs-btn-disabled-border-color: var(--bs-gray-500);
}

.deckname {
	text-transform: uppercase;
}
.deckname::before, .deckname::after {
	color: var(--bs-gray-400);
}
.deckname:before {
	content: "[";
}
.deckname:after {
	content: "]";
}

.cardimage, .mastercardimage  {
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 2px;
	background-color: rgba(0,0,0,0.1);
	vertical-align: bottom;
}

.card-cardmanager {
	border-radius: 0.25rem;
	border: 1px solid rgba(0,0,0,0.25);
	padding: 0.25rem;
}
.card-member-profil, .shop-card-image {
	border-radius: 0.25rem;
	border: 1px solid transparent;
	background-color: transparent;
	padding: 0.25rem;
	margin: 0.1rem;
	position: relative;
}

.card-link {
	display: contents;
}

.card-member-profil .badge {
	position: absolute;
	right: 0;
	bottom: 0;
}

/* Card Backgrounds */

.card-missing-wishlist {
	background-image: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75) 100%);
	background-color: var(--wishlist);
	border-color: var(--wishlist);
}

.card-missing-collect {
	background-image: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75) 100%);
	background-color: var(--collect);
	border-color: var(--collect);
}

.card-missing-keep {
	background-image: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75) 100%);
	background-color: var(--keep);
	border-color: var(--keep);
}

[data-bs-theme='dark'] [class*=' card-missing-'],
[data-bs-theme='dark'] [class^='card-missing-'] {
	background-image: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,0.75) 100%);
}

.card-mastered {
	background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.04), rgba(0,0,0,0.04) 6px, transparent 6px, transparent 12px);
	border-color: rgba(0,0,0,0.05);
}
[data-bs-theme='dark'] .card-mastered {
	background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 6px, transparent 6px, transparent 12px);
	border-color: rgba(255,255,255,0.05);
}

.card-mastered.card-missing-keep, 
.card-mastered.card-missing-collect, 
.card-mastered.card-missing-wishlist {
	background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.7), rgba(255,255,255,0.7) 6px, rgba(255,255,255,0.75) 6px, rgba(255,255,255,0.75) 12px);
	border-color: rgba(0,0,0,0.05);
}

[data-bs-theme='dark'] .card-mastered.card-missing-keep, 
[data-bs-theme='dark'] .card-mastered.card-missing-collect,
[data-bs-theme='dark'] .card-mastered.card-missing-wishlist {
	background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.7), rgba(0,0,0,0.7) 6px, rgba(0,0,0,0.75) 6px, rgba(0,0,0,0.75) 12px);
	border-color: rgba(255,255,255,0.05);
}

.puzzle-view .cardimage {
		margin: 0;
}

.border-rounded{ border-radius: var(--def-border-radius);  }
.border-tl-rounded{ border-top-left-radius: var(--def-border-radius);  }
.border-bl-rounded{ border-bottom-left-radius: var(--def-border-radius);  }
.border-tr-rounded{ border-top-right-radius: var(--def-border-radius);  }
.border-br-rounded{ border-bottom-right-radius: var(--def-border-radius);  } 

.text-deg80 {
    transform: rotate(-80deg);
    -moz-transform: rotate(-80deg);
    -webkit-transform: rotate(-80deg);
    -o-transform: rotate(-80deg);
    -ms-transform: rotate(-80deg);
    display: inline-block;
    position: relative;
    width: 40px;
	
}