step2.css

/**
    Card-Generator. A program designed to make cards.
    Copyright (C) 2020  Elijah Anderson<contact@frustratedprogrammer.com>

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, version 3 of the License.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 **/

@keyframes highlight {
	0%, 100% {
		background-color: #747474;
	}
	50% {
		background-color: #CECECE;
	}
}
#step2_closeBttn{
	float: right;
	margin-right: 10px;
	border: none;
	width: 20px;
	border-radius: 20px;
	background-color: #1290ff;
	height: 20px;
	font-family: cursive;
	font-size: 82%;
}
.moreBttn {
	background-color: transparent;
	border: none;
	color: blue;
	font-style: italic;
	text-decoration: underline;
	font-family: monospace;
	font-size: 120%;
}

#spell_preview img {
	height: 25px;
	width: inherit;
}

#spell_preview_list {
	overflow: auto;
	width: inherit;
}

#spell_preview_list::-webkit-scrollbar {
	width: 10px;
}

#spell_preview_list::-webkit-scrollbar-track {
	background: #AFA896;
	border-radius: 20px;
}

#spell_preview_list::-webkit-scrollbar-thumb {
	background-color: #979283;
	border-radius: 20px;
}

#spell_preview {
	background-image: url("./images/website/ScrollMiddle.png");
	padding: 1px;
	display: none;
	position: absolute;
	background-color: #9E9E9E;
	border: #3A3A3A 1px solid;
	height: 350px;
	max-width: 400px;
	z-index: 10;
}

#spell_preview table {
	width: 100%;
	height: 100%;
}

#step2_title {
	text-align: center;
	font-size: 200%;
	font-family: ringbearer, sans-serif;
	margin: 0;
}

#approve_step2 {
	position: fixed;
	left: 90%;
	top: 80%;
	z-index: 11;
	font-size: 150%;
	transform: translate(-50%, -50%);
	padding: 10px;
	font-family: mplantin;
	font-weight: bold;
	animation: highlight 5s infinite ease-in-out;
}

#step2_subtitle {
	text-align: center;
	font-size: 175%;
	width: 100%;
	display: block;
	font-family: mplantin;
	color: #424242;
}
.step2_spell_list_item:hover{
	cursor: help;
}
.step2_spell_list_item {
	padding: 2px;
	height: auto;
	font-family: ringbearer;
	width: calc(100% - 4px);
	display: flex;
	font-size: 150%;
}

.step2_spell_list_item span {
	text-overflow: ellipsis;
	width: 90%;
	white-space: nowrap;
	display: block;
	overflow: hidden;
}

.step2_spell_list_item button {
	float: right;
	height: 28px;
	margin: 3px;
}

.step2_spell_list_item img {
	height: 100%;
}

#step2_spell_list {
	width: 100%;
}

#step2_spell_list tr {
	width: 100%;
	display: flex;
}

#step2_spell_list td {
	width: 33.333%;
	display: block;
}