* {
  box-sizing: content-box;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: black;
  color: white;
  font-size: 1rem;
  font-family: Lato, sans-serif;
  font-weight: 300;
}

.text-shadow {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  overflow: hidden;
}

.flex-item {
  flex: 0 100%;
}
.flex-item div, .flex-item h1, .flex-item h2 {
  text-align: center;
}

.main_content {
	z-index:100;
}

.bkg__spotlight {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(75% 35% at 50% 95%, rgba(80, 82, 98, 0.6) 20%, rgba(80, 82, 98, 0) 90%), linear-gradient(rgba(28, 35, 50, 0) 0%, #1c2332 80%);
  z-index: -1;
}
.bkg__spotlight:before {
  content: "";
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(50vw 60vw at 50% 70%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(35% 15% at 50% 85%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 100%);
}

header {
  padding-top: 2%;
}
header :first-child {
  padding-bottom: 25px;
}
header p {
  text-align: center;
  padding-top: 60px;
  margin: auto 25%;
  color: #eee;
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.85px;
}

.animate-slide-up {
  opacity: 0;
}

h1, h2 {
  text-transform: uppercase;
  letter-spacing: 8px;
  word-spacing: 5px;
  margin: 0;
}

h1 {
  font-family: "Josefin Sans", sans-serif;
  font-size: 2.25rem;
  font-weight: 100;
}

h2 {
  font-family: "Lato", sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  margin-top: 1rem;
}

a.link {
  border: none;
  position: absolute;
  bottom: 1rem;
  width: auto;
  right: 1rem;
}
a {
  color: rgba(255,255,255,0.5);
  font-size: 1rem;
  font-family: Inter, sans-serif;
  border-top: 1px solid rgba(255,255,255,0.2);
  display: block;
  font-size: 1.25rem;
  padding: 1rem 1.5rem;
  float: left;
  width: 100%;
}
    #dark-light-container > div {
        float: left;
        box-sizing: border-box;
        position: relative;
        padding: 2rem;
        width: 50%;
        text-align: center;

    }
    .white-container { background: white; }
    .black-container { background: black; }

    .card {
        box-shadow: none;
        backface-visibility: visible;
        background: transparent;
      font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
        transform-style: preserve-3d;
        padding: 0;
        height: auto;
        margin: 0 0rem 2rem 0;
        width: 250px;
        height: 374px;
        transition: all 0.2s ease-out;
        border: none;
        letter-spacing: 1px;
    }
    .flip, .unflip {
        background: rgba(0,0,0,0.1);
        font-size: 1rem;
        position: absolute;
        top: 1rem;
        right: 1rem;
        padding: 0.5rem 0.75rem;
        border-radius: 100px;
        line-height: 1rem;
        cursor: pointer;
        transition: all 0.1s ease-out;
    }
    
.blastoise{

  align-items: center;

}
.blastoise .flip, .blastoise .unflip {
    background: #1b29ed;
    box-shadow: 0 2px 20px #0b1485;
}
.blastoise .inner-card-backface .image {
  background-image: url('VS_CARD.png');
}
.blastoise .inner-card-backface .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 14px;
  height: 100%;
  transform: rotateY(180deg);
  background-size: auto 102%;
  background-position: -2px -5px;
}
.unflip {
  top: auto;
  background: #2d2d62;
  bottom: 1rem;
}
    .flip:hover {
      background: rgba(0,0,0,0.3);
    }

.blastoise .flip:hover, .blastoise .unflip:hover {
  background: #0f1cc5;
}
    .inner-card-backface {
        transform: rotateX(0) rotateY(0deg) scale(1) translateZ(-4px);
      border-radius: 14px;
      background: linear-gradient(45deg, #0b0b2a, #0b0b2a);
      position: absolute;
      top: 0;
      color: white;
      padding: 2rem;
      box-sizing: border-box;
      transition: all 0.15s ease-out;
        will-change: transform, filter;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .card.flipped {
      transform: rotateY(180deg);
    }
    .card .flip-inner-card {
      transform: rotateY(180deg);
      position: absolute;
      top: 0;
      padding: 2rem 1.5rem;
      box-sizing: border-box;
      left: 0;
      width: 100%;
      height: 100%;
   }
      .flip-inner-card h3 {
        font-size: 1.25rem;
        margin-top: 0;
      }
      .flip-inner-card p {
        color: rgba(255,255,255,0.6);
        font-weight: 400;
        line-height: 1.5rem;
      }
    .card .inner-card {
        font-size: 2rem;
        color: white;
        padding: 1rem 2rem;
        line-height: 3rem;
        will-change: transform, filter;
        float: none;
        background: black;
        background-size: calc(100% + 6px) auto;
        background-position: -3px -3px;
        margin: 0;
        transition: all 0.15s ease-out;
        height: auto;
        border-radius: 14px;
        box-sizing: border-box;
        overflow: hidden;
        display: block;
        margin: 0px auto;
        transform: rotateX(0deg) rotateY(0deg) scale(1);
        top: 0;
        height: 100%;
        filter: drop-shadow(0 15px 15px rgba(0,0,0,0.3));
        font-weight: 500;
        perspective-origin: 0 0;
        letter-spacing: 0;
    }
    .card.blastoise .inner-card {
  
        background-image: url('VS_CARD.png');
    }
.card .glare {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 0.1s ease-out;
  opacity: 0.6;
  pointer-events: none;
  height: 100%;
  border-radius: 14px;
  z-index: 9999;
  mix-blend-mode: hard-light;
  background: radial-gradient(circle at 50% 50%, rgb(199 198 243), transparent); 
}

.card .top-section {
  background: linear-gradient(45deg, hsl(0deg 58% 51%), hsl(249deg 100% 54%));
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 14px 14px 0 0;
  width: 100%;
  height: 35%;
  z-index: 99;
}

.user-2 .top-section {
  background: linear-gradient(45deg, hsl(224deg 58% 51%), hsl(166deg 100% 54%));
}
.card .user-icon {
  position: absolute;
  left: calc(50% - 64px);
  top: calc(35% - 72px);
  z-index: 99;
}
.card .user-icon img {
  width: 128px;
  height: 128px;
  box-shadow: 0 4px 9px rgba(0,0,0,0.2);
  border-radius: 100px;
  transform: scale(1);
  transition: all 0.1s ease-out;
}

.card .user-icon img:hover {
  transform: scale(1.08);
}
.card .glare {
  opacity: 0;
}
.card.animated .glare {
  opacity: 0.3;
}

.card.animated.user .glare {
  opacity: 0.15;
}

.card .name {
  color: white;
  font-size: 1.5rem;
}

.card .bottom-section {
  position: absolute;
  top: 35%;
  left: 0;
  background: #0b0b2a;
  width: 100%;
  height: 65%;
  box-sizing: border-box;
  padding-top: 64px;
  text-align: center;
}

.bottom-section .area {
  font-size: 1rem;
  opacity: 0.4;
  display: block;
  line-height: 1rem;
}
.buttons {
  float: left;
  width:  calc(100% - 2rem);
  position: absolute;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 1rem;
}
.buttons > a {    
    border: none;
    width: auto;
    background: #2d2d62;
    padding: 0;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    line-height: 1rem;
    transition: all 0.1s ease-out;
    transform: scale(1);
    padding: 0.75rem 1rem;
    margin: 0 1rem 0 0;
    border-radius: 100px;
    text-decoration: none;
}
.buttons .main {
  background: #3d26e7;
}
.buttons > .main:hover {
  background: #614df1;
}
.buttons > a:hover {
  background: #494989;
}
.buttons .message svg {
  margin: 0 0.5rem 0 0;
}
.buttons .message {
  margin: 0;
}
    @media screen and (max-width: 1000px) {
        #dark-light-container > div {
            width: 100%;
        }
    }