.deck-fire{
background:#e32d14;}

.deck-wind{
background:#33cc33;}

.deck-water{
background-color:#03a1fc;}

.deck-wind-luxem{
background:linear-gradient(to right, #33cc33 20%, #ffcc00
 80%);}

.deck-wind-umbra{
background:linear-gradient(to right, #33cc33 20%, #7a34eb
 80%);}

.deck-wind-astra{
background:linear-gradient(to right, #33cc33 20%, #9900cc
 80%);}

.deck-fire-luxem{
background:linear-gradient(to right, #e32d14 20%, #ffcc00
 80%);}

.deck-fire-tera{
background:linear-gradient(to right, #e32d14 20%, #1ea632 80%);}

.deck-water-crux{
background:linear-gradient(to right, #03a1fc 20%, #ff66cc
 80%);}

.deck-water-luxem{
background:linear-gradient(to right, #03a1fc 20%, #ffcc00
 80%);}

.decklist-hover1 {
    cursor: pointer;
}
.decklist-hover2 {
    cursor: pointer;
}
.decklist-hover3 {
    cursor: pointer;
}
.decklist-hover4 {
    cursor: pointer;
}
.decklist-hover5 {
    cursor: pointer;
}
.decklist-hover6 {
    cursor: pointer;
}
.decklist-hover7 {
    cursor: pointer;
}
.decklist-hover8 {
    cursor: pointer;
}

#decklist-button1 {
  margin-top: 10px;
display: none;
}
#decklist-button2 {
  margin-top: 10px;
display: none;
}
#decklist-button3 {
  margin-top: 10px;
display: none;
}
#decklist-button4 {
  margin-top: 10px;
display: none;
}
#decklist-button5 {
  margin-top: 10px;
display: none;
}
#decklist-button6 {
  margin-top: 10px;
display: none;
}
#decklist-button7 {
  margin-top: 10px;
display: none;
}
#decklist-button8 {
  margin-top: 10px;
display: none;
}

.deck{
width:800px;
height:500px;
}
.ascent-top8 {
display:grid;
grid-template-columns: 1fr 1fr;
}
.ascent-decklist {
display:grid;
grid-template-columns: 25% 50% 25%;
line-height:110%;
gap:2%;
}
.decklist-header {
display:grid;
grid-template-columns: 100px 85%;
grid-template-rows: 100px;
text-align:right;
}
.decklist-cards{
font-size:.8em;
}
.decklist-title{
font-size:1em;
text-decoration: underline;
}
.deck-pilot{
font-size:20px;
}
.deck-title{
font-size:25px;
}
.placement{
font-size:30px;
}
.column{
padding:5px;
}

/* Tablet */
@media screen and (min-width:601px) and (max-width:1079px) {
.deck{
width:100%;
height:500px;
}
.ascent-top8 {
display:grid;
grid-template-columns: 1fr;}
}
.ascent-decklist {
display:grid;
grid-template-columns: 25% 25% 50%;
line-height:110%;
gap:2%;
}
.decklist-header {
display:grid;
grid-template-columns: 100px 80%;
grid-template-rows: 100px;
text-align:right;
}
/* Mobile */
@media screen and (max-width:600px) {
.deck{
width:100%;
height:500px;
}
.ascent-top8 {
display:grid;
grid-template-columns: 1fr;
}
.ascent-decklist {
display:grid;
grid-template-columns: 25% 25% 50%;
line-height:110%;
gap:2%;
}
.decklist-header {
display:grid;
grid-template-columns: 100px 70%;
grid-template-rows: 100px;
text-align:right;
}
.decklist-cards{
font-size: .5em;
}
.decklist-title{
font-size:.6em;
text-decoration: underline;
}
.deck-pilot{
font-size:1em;
}
.deck-title{
font-size:1em;
}
.placement{
font-size:1em;
}
.column{
padding:5px;
}