input, select {
    margin: 5px;
}
#top {
    position: fixed;
    width: 100%;
    z-index: 1;
    height: 100px;
    top: 0px !important;
}
.section {
    font-style: italic;
    font-weight: bold;
}
#has-back, #submit {
    margin-block: 10px;
}
#theme-list {
    margin: 10px;
}
.theme {
    padding: 10px;
    margin: 10px;
}
.theme-text {
    padding: 5px;
}
.checkbox-selection-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
.checkbox-wrapper {
    border: black solid 1px;
    padding-inline: 5px;
}
.text-input-wrapper {
    display: flex;
    flex-flow: row wrap;
}
.text-input {
    display: flex;
}
.text-input-search {
    width: 600px;
    height: 30px;
}
.text-input-box {
    width: 200px;
    height: 160px;
}
.symbol-button {
    width: 40px;
    height: 40px;
}
.button-input-row {
    display: flex;
    flex-flow: row wrap;
}
#content {
    margin-top: 100px;
}
#card-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    position:absolute;
}
#sort-menu {
    background: darkgray;
    padding-left: 4px;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}
.card-container {
    width: 215px;
    height: auto;
    position: relative;
    padding: 5px;
}
.card-container .bakuform-button-forms {
    position: absolute;
    bottom: 32%;
    left: 45%;
    height: 7.5%;
    width: 26%;
    font-size: 1em;
}
.card-image {
    padding: 5px;
    object-fit: contain;
    /*height: 300px;*/
    /*width: 215px;*/
    height: auto;
    width: 100%;
}
.card-image:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.bakuforms {
    position: absolute;
    background: #333;
    top: 45px;
    left: 1px;
    width: 100%;
    z-index: 1;
}
.bakuform {
    font-weight: bold;
    position: relative;
    padding: 2px;
    margin: 5px;
}
.bakuform-close {
}
.bakuform-close-button {
}
.bakuform-text {
    margin-top: 3px;
    padding: 2px;
    font-size: 14px;
    font-weight: normal;
    white-space: pre-line;
}
.bakuform-bpower {
    top: 2px;
    left: 55px;
    position: absolute;
}
.bakuform-damage {
    top: 2px;
    left: 130px;
    position: absolute;
}
.bakuform-cost {
    top: 2px;
    left: 170px;
    position: absolute;
}
.bakuform-cores {
    top: 0px;
    left: 165px;
    position: absolute;
}
.bakuform-- {
    background-image: linear-gradient(135deg, dimgray, dimgray);
}
.bakuform-text-- {
    background-image: linear-gradient(135deg, darkgray, darkgray);
}

.bakuform-aquos-aquos {
    background-image: linear-gradient(135deg, dodgerblue, dodgerblue);
}
.bakuform-aquos-aurelus {
    background-image: linear-gradient(135deg, dodgerblue, darkgoldenrod);
}
.bakuform-aquos-darkus {
    background-image: linear-gradient(135deg, dodgerblue, rebeccapurple);
}
.bakuform-aquos-haos {
    background-image: linear-gradient(135deg, dodgerblue, mediumturquoise);
}
.bakuform-aquos-pyrus {
    background-image: linear-gradient(135deg, dodgerblue, orangered);
}
.bakuform-aquos-ventus {
    background-image: linear-gradient(135deg, dodgerblue, darkgreen);
}
.bakuform-text-aquos-aquos {
    background-image: linear-gradient(135deg, cornflowerblue, cornflowerblue);
}
.bakuform-text-aquos-aurelus {
    background-image: linear-gradient(135deg, cornflowerblue, goldenrod);
}
.bakuform-text-aquos-darkus {
    background-image: linear-gradient(135deg, cornflowerblue, mediumpurple);
}
.bakuform-text-aquos-haos {
    background-image: linear-gradient(135deg, cornflowerblue, paleturquoise);
}
.bakuform-text-aquos-pyrus {
    background-image: linear-gradient(135deg, cornflowerblue, darkorange);
}
.bakuform-text-aquos-ventus {
    background-image: linear-gradient(135deg, cornflowerblue, darkseagreen);
}

.bakuform-aurelus-aquos {
    background-image: linear-gradient(135deg, darkgoldenrod, dodgerblue);
}
.bakuform-aurelus-aurelus {
    background-image: linear-gradient(135deg, darkgoldenrod, darkgoldenrod);
}
.bakuform-aurelus-darkus {
    background-image: linear-gradient(135deg, darkgoldenrod, rebeccapurple);
}
.bakuform-aurelus-haos {
    background-image: linear-gradient(135deg, darkgoldenrod, mediumturquoise);
}
.bakuform-aurelus-pyrus {
    background-image: linear-gradient(135deg, darkgoldenrod, orangered);
}
.bakuform-aurelus-ventus {
    background-image: linear-gradient(135deg, darkgoldenrod, darkgreen);
}
.bakuform-text-aurelus-aquos {
    background-image: linear-gradient(135deg, goldenrod, cornflowerblue);
}
.bakuform-text-aurelus-aurelus {
    background-image: linear-gradient(135deg, goldenrod, goldenrod);
}
.bakuform-text-aurelus-darkus {
    background-image: linear-gradient(135deg, goldenrod, mediumpurple);
}
.bakuform-text-aurelus-haos {
    background-image: linear-gradient(135deg, goldenrod, paleturquoise);
}
.bakuform-text-aurelus-pyrus {
    background-image: linear-gradient(135deg, goldenrod, darkorange);
}
.bakuform-text-aurelus-ventus {
    background-image: linear-gradient(135deg, goldenrod, darkseagreen);
}

.bakuform-darkus-aquos {
    background-image: linear-gradient(135deg, rebeccapurple, dodgerblue);
}
.bakuform-darkus-aurelus {
    background-image: linear-gradient(135deg, rebeccapurple, darkgoldenrod);
}
.bakuform-darkus-darkus {
    background-image: linear-gradient(135deg, rebeccapurple, rebeccapurple);
}
.bakuform-darkus-haos {
    background-image: linear-gradient(135deg, rebeccapurple, mediumturquoise);
}
.bakuform-darkus-pyrus {
    background-image: linear-gradient(135deg, rebeccapurple, orangered);
}
.bakuform-darkus-ventus {
    background-image: linear-gradient(135deg, rebeccapurple, darkgreen);
}
.bakuform-text-darkus-aquos {
    background-image: linear-gradient(135deg, mediumpurple, cornflowerblue);
}
.bakuform-text-darkus-aurelus {
    background-image: linear-gradient(135deg, mediumpurple, goldenrod);
}
.bakuform-text-darkus-darkus {
    background-image: linear-gradient(135deg, mediumpurple, mediumpurple);
}
.bakuform-text-darkus-haos {
    background-image: linear-gradient(135deg, mediumpurple, paleturquoise);
}
.bakuform-text-darkus-pyrus {
    background-image: linear-gradient(135deg, mediumpurple, darkorange);
}
.bakuform-text-darkus-ventus {
    background-image: linear-gradient(135deg, mediumpurple, darkseagreen);
}

.bakuform-haos-aquos {
    background-image: linear-gradient(135deg, mediumturquoise, dodgerblue);
}
.bakuform-haos-aurelus {
    background-image: linear-gradient(135deg, mediumturquoise, darkgoldenrod);
}
.bakuform-haos-darkus {
    background-image: linear-gradient(135deg, mediumturquoise, rebeccapurple);
}
.bakuform-haos-haos {
    background-image: linear-gradient(135deg, mediumturquoise, mediumturquoise);
}
.bakuform-haos-pyrus {
    background-image: linear-gradient(135deg, mediumturquoise, orangered);
}
.bakuform-haos-ventus {
    background-image: linear-gradient(135deg, mediumturquoise, darkgreen);
}
.bakuform-text-haos-aquos {
    background-image: linear-gradient(135deg, paleturquoise, cornflowerblue);
}
.bakuform-text-haos-aurelus {
    background-image: linear-gradient(135deg, paleturquoise, goldenrod);
}
.bakuform-text-haos-darkus {
    background-image: linear-gradient(135deg, paleturquoise, mediumpurple);
}
.bakuform-text-haos-haos {
    background-image: linear-gradient(135deg, paleturquoise, paleturquoise);
}
.bakuform-text-haos-pyrus {
    background-image: linear-gradient(135deg, paleturquoise, darkorange);
}
.bakuform-text-haos-ventus {
    background-image: linear-gradient(135deg, paleturquoise, darkseagreen);
}

.bakuform-pyrus-aquos {
    background-image: linear-gradient(135deg, orangered, dodgerblue);
}
.bakuform-pyrus-aurelus {
    background-image: linear-gradient(135deg, orangered, darkgoldenrod);
}
.bakuform-pyrus-darkus {
    background-image: linear-gradient(135deg, orangered, rebeccapurple);
}
.bakuform-pyrus-haos {
    background-image: linear-gradient(135deg, orangered, mediumturquoise);
}
.bakuform-pyrus-pyrus {
    background-image: linear-gradient(135deg, orangered, orangered);
}
.bakuform-pyrus-ventus {
    background-image: linear-gradient(135deg, orangered, darkgreen);
}
.bakuform-text-pyrus-aquos {
    background-image: linear-gradient(135deg, darkorange, cornflowerblue);
}
.bakuform-text-pyrus-aurelus {
    background-image: linear-gradient(135deg, darkorange, goldenrod);
}
.bakuform-text-pyrus-darkus {
    background-image: linear-gradient(135deg, darkorange, mediumpurple);
}
.bakuform-text-pyrus-haos {
    background-image: linear-gradient(135deg, darkorange, paleturquoise);
}
.bakuform-text-pyrus-pyrus {
    background-image: linear-gradient(135deg, darkorange, darkorange);
}
.bakuform-text-pyrus-ventus {
    background-image: linear-gradient(135deg, darkorange, darkseagreen);
}

.bakuform-ventus-aquos {
    background-image: linear-gradient(135deg, darkgreen, dodgerblue);
}
.bakuform-ventus-aurelus {
    background-image: linear-gradient(135deg, darkgreen, darkgoldenrod);
}
.bakuform-ventus-darkus {
    background-image: linear-gradient(135deg, darkgreen, rebeccapurple);
}
.bakuform-ventus-haos {
    background-image: linear-gradient(135deg, darkgreen, mediumturquoise);
}
.bakuform-ventus-pyrus {
    background-image: linear-gradient(135deg, darkgreen, orangered);
}
.bakuform-ventus-ventus {
    background-image: linear-gradient(135deg, darkgreen, darkgreen);
}
.bakuform-text-ventus-aquos {
    background-image: linear-gradient(135deg, darkseagreen, cornflowerblue);
}
.bakuform-text-ventus-aurelus {
    background-image: linear-gradient(135deg, darkseagreen, goldenrod);
}
.bakuform-text-ventus-darkus {
    background-image: linear-gradient(135deg, darkseagreen, mediumpurple);
}
.bakuform-text-ventus-haos {
    background-image: linear-gradient(135deg, darkseagreen, paleturquoise);
}
.bakuform-text-ventus-pyrus {
    background-image: linear-gradient(135deg, darkseagreen, darkorange);
}
.bakuform-text-ventus-ventus {
    background-image: linear-gradient(135deg, darkseagreen, darkseagreen);
}

.bakuform-prisma-prisma {
    background-image: linear-gradient(
            135deg,
            rgba(255, 0, 0, 1) 0%,
            rgba(255, 154, 0, 1) 10%,
            rgba(208, 222, 33, 1) 20%,
            rgba(79, 220, 74, 1) 30%,
            rgba(63, 218, 216, 1) 40%,
            rgba(47, 201, 226, 1) 50%,
            rgba(28, 127, 238, 1) 60%,
            rgba(95, 21, 242, 1) 70%,
            rgba(186, 12, 248, 1) 80%,
            rgba(251, 7, 217, 1) 90%,
            rgba(255, 0, 0, 1) 100%
    );;
}
.bakuform-text-prisma-prisma {
    background-image: linear-gradient(135deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 255, 0, 1) 33%,
    rgba(0, 192, 255, 1) 66%,
    rgba(192, 0, 255, 1) 100%);
}

.bakuform-aurelus {
    background: darkgoldenrod;
}
.bakuform-text-aurelus {
    background: goldenrod;
}
.bakuform-darkus {
    background: rebeccapurple;
}
.bakuform-text-darkus {
    background: mediumpurple;
}
.bakuform-haos {
    background: mediumturquoise;
}
.bakuform-text-haos {
    background: paleturquoise;
}
.bakuform-pyrus {
    background: orangered;
}
.bakuform-text-pyrus {
    background: darkorange;
}
.bakuform-ventus {
    background: darkgreen;
}
.bakuform-text-ventus {
    background: darkseagreen;
}
.symbol {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width:14px;
    height:12px;
    text-indent:-999em;
    overflow:hidden;
}
.symbol-core {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width:25px;
    height:25px;
    text-indent:-999em;
    overflow:hidden;
}
.symbol-Aquos {
    background-image: url("20px-Aquos.png");
}
.symbol-Aurelus {
    background-image: url("20px-Aurelus.png");
}
.symbol-Darkus {
    background-image: url("20px-Darkus.png");
}
.symbol-Haos {
    background-image: url("20px-Haos.png");
}
.symbol-Pyrus {
    background-image: url("20px-Pyrus.png");
}
.symbol-Ventus {
    background-image: url("20px-Ventus.png");
}
.symbol-Prisma {
    background-image: url("20px-Prisma.png");
}
.symbol-GreenFist {
    background-image: url("20px-GreenFist.png");
}
.symbol-RedFist {
    background-image: url("20px-RedFist.png");
}
.symbol-BlueShield {
    background-image: url("20px-BlueShield.png");
}
.symbol-OrangeShield {
    background-image: url("20px-OrangeShield.png");
}
.symbol-GrayHelix {
    background-image: url("20px-GrayHelix.png");
}
.symbol-GreenFist-core {
    background-image: url("35px-BakuCore_GreenFist.png");
}
.symbol-RedFist-core {
    background-image: url("35px-BakuCore_RedFist.png");
}
.symbol-BlueShield-core {
    background-image: url("35px-BakuCore_BlueShield.png");
}
.symbol-OrangeShield-core {
    background-image: url("35px-BakuCore_OrangeShield.png");
}
.symbol-GrayHelix-core {
    background-image: url("35px-BakuCore_GrayHelix.png");
}
.symbol-BPower {
    background-image: url("15px-BattlePower_Symbol.png");
}
.symbol-Damage {
    background-image: url("25px-Damage_Symbol.png");
}
.symbol-Energy {
    background-image: url("25px-Energy_Symbol.png");
}
.symbol-Diamond {
    background-image: url("20px-Diamond.png");
}
.symbol-AddCore {
    background-image: url("25px-AddCore_Symbol.png");
}
.symbol-DoubleStrike {
    background-image: url("25px-DoubleStrike_Symbol.png");
}
.symbol-DualBakuGear {
    background-image: url("25px-DualBakuGear_Symbol.png");
}
.symbol-Draw {
    background-image: url("25px-DrawaCard_Symbol.png");
}
.symbol-Fusion {
    background-image: url("25px-Fusion_Symbol.png");
}
.symbol-FrostStrike {
    background-image: url("25px-FrostStrike_Symbol.png");
}
.symbol-RemoveCore {
    background-image: url("25px-RemoveCore_Symbol.png");
}
.symbol-Reroll {
    background-image: url("25px-Reroll_Symbol.png");
}
.symbol-Scan {
    background-image: url("25px-Scan_Symbol.png");
}
.symbol-ShadowStrike {
    background-image: url("25px-ShadowStrike_Symbol.png");
}
.symbol-StealCore {
    background-image: url("25px-StealCore_Symbol.png");
}
.symbol-Stop {
    background-image: url("25px-Stop_Symbol.png");
}
.symbol-TeamAttack {
    background-image: url("25px-TeamAttack_Symbol.png");
}
.symbol-Victor {
    background-image: url("25px-Victor_Symbol.png");
}
#message {
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
}
.message-fail {
    padding: 3px;
    background: red;
    color: darkred;
    margin: 1px;
}
.message-success {
    padding: 3px;
    background: lightgreen;
    color: green;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
nav ul li {
    float: left;
}
nav ul li a {
    display: flex;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
nav ul li a:hover, nav ul li div:hover {
    background-color: #111;
}

.theme-list ul {
    padding-left: 15px;
}
.theme-gen-number {
    padding-left: 10px;
    padding-top: 10px;
    font-size: 130%;
    font-weight: bolder;
}
.theme-name {
    font-size: 115%;
    font-weight: bold;
    padding-bottom: 5px;
}
.theme-description, .theme-stats {
    font-size: 95%;
    padding-left: 20px;
    padding-bottom: 5px;
}
* {
    margin: 0;
    padding: 0;
    /*border: 0;*/
    /*outline: 0;*/
    font-size: 100%;
    font-family: Arial;
    vertical-align: baseline;
    /*background: transparent;*/
}
.search {
    border: 6px solid #111;
    border-radius: 5px;
    font-size: 36px;
    height: 50px;
    width: 500px;
    max-width: 80%;
    padding: 2px 6px 2px 6px;
    /*outline: 0;*/
    background-color: #DFE2DB;
    margin: 6px;
}
.search:hover, .search:focus {
    border: 6px solid dimgrey;
}
#submit {
    height: 3em;
    width: 6em;
}
@media only screen and (min-width: 960px) {
    /* styles for browsers larger than 960px; */
}
@media only screen and (min-width: 1440px) {
    /* styles for browsers larger than 1440px; */
}
@media only screen and (min-width: 2000px) {
    /* for sumo sized (mac) screens */
}
@media only screen and (max-device-width: 480px) {
    /* styles for mobile browsers smaller than 480px; (iPhone) */
    .card-container {
        width: 96%;
        height: auto;
    }
    .card-container .bakuform-button-forms {
        position: absolute;
        bottom: 31%;
        left: 45%;
        height: 7.5%;
        width: 26%;
        font-size: 1.8em;
    }
}
@media only screen and (device-width: 768px) {
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
}