Template:Spoilers2/styles.css

h2,
h3 {
  font-family: arial;
  border-bottom: 0px;
  padding-left:10px;
}

/* adds shadows to images */
div.picture img,
div.houseList img {
  filter: drop-shadow(0 0 0.2rem #909090);
}

/* sets up larger screens */
@media screen and (min-width: 601px) {

  /* sets up the house logo menu */
  div.houseList {
    background-color: #efefef;
    border-radius: 10px;
    text-align: center;
    width: 100%;
    max-width: 500px;
    margin-top: 10px;
    margin-left:8px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #aaaaaa;
    box-shadow: 15px 15px 15px -15px rgba(0, 0, 0, 0.3);
  }


  /* sets up the outer container and cards */
  .spoilerOuter {
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content:flex-start;
  }

  div.spoilerEntry {
    display: table;
    border: 1px solid #a0a0a0;
    background-color: #eaeaea;
    padding: 8px;
    height: 385px;
    width: 260px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 15px 15px 15px -15px rgba(0, 0, 0, 0.3);
    margin-left: 8px;
    margin-bottom: 8px;
    transition: background-color .2s, box-shadow .2s, border .2s, transform .05s;
    position: relative;
  }

  .newCard {
    position: absolute;
    top: 5px;
    right: 2px;
    transform: rotate(45deg);
    font-variant: small-caps;
    color: white;
    font-size: .9em;
    z-index: 10;
  }

  .spoilerEntry::before,
  .spoilerEntry::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
  }

  .spoilerEntry::after {
    border-radius: 0px;
    border-width: 20px;
    border-right-color: #eb3449;
    border-top-color: #eb3449;
    border-top-right-radius: 10px;
    opacity: .9;
  }

  .spoilerReprint::after {
    border-radius: 0px;
    border-width: 0px;
    border-right-color: #fc0349;
    border-top-color: #fc0349;
    border-top-right-radius: 0px;
    opacity: 0;
  }

  div.spoilerReprint {
    display: table;
    border: 1px solid #a0a0a0;
    background-color: #eaeaea;
    padding: 8px;
    height: 385px;
    width: 260px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 15px 15px 15px -15px rgba(0, 0, 0, 0.3);
    margin-left: 8px;
    margin-bottom: 8px;
    transition: background-color .3s, box-shadow .3s, border .3s, transform .05s;
  }

  div.spoilerUnknown {
    display: table;
    border: 1px solid #a0a0a0;
    background-color: #cacaca;
    padding: 8px;
    height: 385px;
    width: 260px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 15px 15px 15px -15px rgba(0, 0, 0, 0.3);
    margin-left: 8px;
    margin-bottom: 8px;
  }

  /* sets up the headers */
  div.spoilerUnknown .header,
  div.spoilerReprint .header {
    display: flex;
    width: 100%;
    padding-bottom: 5px;
    border-bottom: 1px dotted #a0a0a0;
    border-top: 0px;
    box-sizing: border-box;
    height: 25px;
  }

  div.spoilerEntry .header {
    display: flex;
    width: 100%;
    padding-bottom: 5px;
    border-bottom: 1px dotted #a0a0a0;
    border-top: 0px;
    box-sizing: border-box;
    height: 25px;
  }

  div.header .number,
  div.spoilerUnknown .number {
    font-size: 1.1em;
    width: 40px;
    text-align: center;
    box-sizing: border-box;
  }

  div.header .name {
    font-weight: bold;
    font-size: 1.1em;
    flex: 1;
    padding-left: 5px;
    box-sizing: border-box;
  }

  /* sets up the card image section */
  div.image .picture {
    margin-top: 10px;
    text-align: left;
    flex: 1;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  /* hides and displays elements for the hover effect */
  div.spoilerEntry .image {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  div.spoilerEntry .text {
    display: none;
  }


  /* hides and displays elements for the hover effect */

  div.spoilerEntry:hover .image {
    display: none;
  }

  div.spoilerEntry:hover .text {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 350px;
  }

  div.spoilerEntry:hover,
  div.spoilerReprint:hover {
    box-shadow: 15px 15px 15px -15px rgba(0, 0, 0, .5);
    background-color: #fafafa;
    background-image: none;
    border: 1px solid #808080;
    display: table;
    padding: 8px;
    height: 385px;
    width: 260px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-left: 8px;
    margin-bottom: 8px;
    transform: scale(1);
  }

  /* sets up the middle section */

  div.spoilerEntry:hover .cardInfo {
    flex: 1;
    height: 100%;
    min-height: 200px;
    line-height: 18px;
    padding-top: 10px;
    width: 240px;
  }

  /* sets up the reprint text */

  div.spoilerReprint:hover .reprint {
    font-size: .9em;
    text-align: right;
    font-variant: small-caps;
    padding-top: 3px;
  }



  /* sets up the bottom row */

  div.spoilerEntry:hover .bottomRow {
    display: flex;
  }

  div.spoilerEntry:hover .type {
    font-size: .9em;
    padding-bottom: 5px;
    flex: 1;
    text-align: center;
  }

  div.spoilerEntry:hover .rarity {
    font-size: .9em;
    padding-bottom: 5px;
    flex: 1;
    text-align: center;
  }


  /* hides mobile elements */

  div.mobileUnknown,
  div.mobileEntry,
  div.mobileReprint {
    display: none;
  }

}



/* changes the display for mobile screens */

@media screen and (max-width: 600px) {

  /* sets up the house logo menu */
  div.houseList {
    background-color: #efefef;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    max-width: 400px;
    margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #aaaaaa;
    margin-right: auto;
    margin-left: auto;
  }

  /* sets up the outer container  */

  .spoilerOuter {
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
  }

  /* sets up unknown cards */

  div.mobileUnknown {
    display: table;
    border: 1px solid #a0a0a0;
    background-color: #dadada;
    background-image: linear-gradient(#eaeaea, #fafafa);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: .9em;
  }

  div.mobileUnknown .number {
    font-size: 1.1em;
    width: 40px;
    padding-left: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: center;
  }


  /* sets up mobile card entries */

  div.mobileEntry {
    display: table;
    border: 1px solid #a0a0a0;
    background-color: #efefef;
    background-image: linear-gradient(#eaeaea, #fafafa 25%);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: .9em;
    position: relative;

  }

  div.mobileEntry .newCard {
    background-color: #eb3449;
    color: white;
    font-variant: small-caps;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
    position: absolute;
    border-radius: 5px;
    top: 5px;
    right: 8px;
  }


  /* sets up reprint entries */

  div.mobileReprint {
    display: table;
    border: 1px solid #a0a0a0;
    background-color: #efefef;
    background-image: linear-gradient(#eaeaea, #fafafa);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: .9em;

  }

  /* sets up the headers */
  div.mobileEntry .header {
    display: flex;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 0px;
    border-top: 0px;
    box-sizing: border-box;
    height: 35px;
  }

  div.mobileEntry .number {
    font-size: 1.1em;
    width: 56px;
    padding-bottom: 0px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 1px;
    text-align: center;
    box-sizing: border-box;
  }

  div.mobileEntry .name {
    font-weight: bold;
    font-size: 1.2em;
    flex: 1;
    padding-bottom: 0px;
    box-sizing: border-box;
  }

  /* sets up the mobile header */

  div.reprintHeader {
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    width: 100%;
  }

  div.mobileReprint .reprint {
    font-variant: small-caps;
    margin-right: 8px;
  }

  div.reprintNumber {
    font-size: 1.1em;
    width: 56px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 1px;

    text-align: center;
    box-sizing: border-box;
  }

  div.reprintName {
    flex: 1;
    font-size: 1.2em;
    font-weight: bold;
  }

  /* centers the image */
  div.mobileEntry .picture {
    margin-top: 10px;
    text-align: left;
    flex: 1;
    margin-left: 56px;
  }

  /* sets up the middle section */
  div.mobileText {
    margin-top: 10px;
    padding-right: 8px;
    padding-left: 56px;
    line-height: 1.7em;
    box-sizing: border-box;
  }

  /* sets up the bottom row */
  div.mobileBottomRow {
    display: flex;
    margin-bottom: 15px;
  }

  div.mobileBottomRow .type {
    padding-top: 10px;
    padding-left: 56px;
    flex: 1;
    box-sizing: border-box;
    text-align: left;
  }

  div.mobileBottomRow .rarity {
    padding-top: 10px;
    flex: 1;
    text-align: left;
  }

  /* hides desktop elements */
  div.spoilerUnknown,
  div.spoilerEntry,
  div.spoilerReprint {
    display: none;
  }


}