Dracula theme inspired Anki cards

anki-dracula-card.md

## 👋

I've created Dracula inspired theme for Anki Cards. You're going to find Basic and Cloze cards. You can see theme here.

Basic

Cloze

basic-back.html

<div class="card-container">
	<div class="tags">
		{{Tags}}
	</div>
	{{Front}}
	<div class="back">
		{{Back}}
	</div>
</div>

basic-front.html

<div class="card-container">
	<div class="tags">
		{{Tags}}
	</div>
	{{Front}}
</div>

basic.css

html {
	overflow: scroll;
	overflow-x: hidden;
}

/* Tags on top */
.tags { 
    color: #A6ABB9;
    opacity: 0;
    font-size: 10px; 
    width: 100%;
    text-align: center;
    text-transform: uppercase; 
    position: fixed; 
    padding: 0; 
    top:0;  
    right: 0;
}
.tags:hover {
	opacity: 1;
	position: fixed;
}

/* Card container */
.card-container {
    padding: 0px 0px;
    max-width: 700px; /* Size card */
    margin: 0 auto; /* Center in the middle */
    word-wrap: break-word;
}

/* Card */
.card {
    font-family: Menlo, baskerville, sans;
    font-size: 18px;
    text-align: center;
    color: #f8f8f2;
    line-height: 1.6em;
    background-color: #282a36;
}

/* Back on bottom */
.back {
	display: block;
	margin-top: 20px;
}

.back,
.back i {
	font-size: 15px;
	color:#D7DEE9;
	font-style: italic;
}

/* For images */
img {
	display: block;
	max-width: 100%; 
	max-height: none; 
	margin-left: auto; 
	margin: 10px auto 10px auto;
}

/* Styles for bold, italic, underline and links */
b {
	color: #ff79c6 !important;
}

u {
	text-decoration: none;
	color: #8be9fd;
}

i  { 
	color: #ff5555;
}

a {
	color: #6272a4 !important;
	text-decoration: none;
	font-size: 10px; 
	font-style: normal;
}

/* Mobile only */
.mobile .card {
	color: #f8f8f2;
	background-color: #282a36;
} 
.mobile .tags:hover {
	opacity: 1;
	position: relative;
}

cloze-back.html

<div class="card-container">
	<div class="tags">
		{{Tags}}
	</div>
  {{cloze:Text}}

	{{#Extra}}
    <div class="extra">
			{{Extra}}
		</div>
	{{/Extra}}
</div>

cloze-front.html

<div class="card-container">
	<div class="tags">
		{{Tags}}
	</div>
	{{cloze:Text}}
</div>

cloze.css

html {
	overflow: scroll;
	overflow-x: hidden;
}

/* Tags on top */
.tags { 
    color: #A6ABB9;
    opacity: 0;
    font-size: 10px; 
    width: 100%;
    text-align: center;
    text-transform: uppercase; 
    position: fixed; 
    padding: 0; 
    top:0;  
    right: 0;
}
.tags:hover {
	opacity: 1;
	position: fixed;
}

/* Card container */
.card-container {
    padding: 0px 0px;
    max-width: 700px; /* Size card */
    margin: 0 auto; /* Center in the middle */
    word-wrap: break-word;
}

/* Card */
.card {
    font-family: Menlo, baskerville, sans;
    font-size: 18px;
    text-align: center;
    color: #f8f8f2;
    line-height: 1.6em;
    background-color: #282a36;
}

/* Cloze styles */
.cloze,
.cloze b,
.cloze u,
.cloze i {
	font-weight: bold;
	color: #50fa7b !important;
}

/* Extra on bottom */
.extra {
	display: block;
	margin-top: 20px;
}

.extra,
.extra i {
	font-size: 15px;
	color:#D7DEE9;
	font-style: italic;
}

/* For images */
img {
	display: block;
	max-width: 100%; 
	max-height: none; 
	margin-left: auto; 
	margin: 10px auto 10px auto;
}

/* Styles for bold, italic, underline and links */
b {
	color: #ff79c6 !important;
}

u {
	text-decoration: none;
	color: #8be9fd;
}

i  { 
	color: #ff5555;
}

a {
	color: #6272a4 !important;
	text-decoration: none;
	font-size: 10px; 
	font-style: normal;
}

/* Mobile only */
.mobile .card {
	color: #f8f8f2;
	background-color: #282a36;
} 
.mobile .tags:hover {
	opacity: 1;
	position: relative;
}