/*

    palette:
    
    #a79c93 gray
    #0294Af blue
    #C1403D red
    #03353E dark blue
    #04060F black

    */

      @media screen and (min-width: 320px) and (orientation: portrait) {
        .override #Rotate {
          display:block;
        }
      }
  
      body.override {
        padding: 0;
        margin: 0;
        background:#04060F;
        color: #fff;
        font-size: 13px;
        line-height: 1.5em;
        text-align: center;
        position: relative;
        height: 100%;
        font-family: "Source Sans Pro","Helvetica Neue", Arial, sans-serif
      }

      h1 {
        font-family: 'Literata', serif;
      }

      #Leaderboard h1,
      #DomainSelect h1 { 
        text-decoration: underline dashed;
      }

      #Rotate {
        position:fixed;
        width:100%;
        height:100%;
        background:#03353E;
        z-index:6000;
        opacity:1;
        display:none;
      }

      .phone-animation {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
      }
  
      .button {
        /* background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%); */
        background-color:#03353E;
        border-radius:6px;
        border:2px solid #C1403D;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-size:17px;
        padding:7px 31px;
        text-decoration:none;
        text-shadow:0px 1px 6px #a79c93;
        font-family:'Roboto Condensed', sans-serif;
        text-transform:uppercase;
      }
      .button:hover {
        /* background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%); */
        box-shadow: 0px 0px 8px 0px #C1403D;
        background-color:#0294Af;
      }
      .button:active {
        position:relative;
        top:1px;
      }
  
      #Main {
        z-index:1000;
        position:fixed;
        width:100%;
        height:100%;
      }

      #ClickToContinue {
        position:fixed;
        z-index: 4000;
        top: 5vh;
        left: 5vh;
        text-shadow: 0px 1px 6px #0294af;
        font-family: 'Roboto Condensed', sans-serif;
        text-transform: uppercase;
        font-size: 1.3rem;
        display: none;
        background: #a79c93;
        padding: 9px;
        border-radius: 9px;
        opacity: 0.4;
      }
  
      #AddItem {
        z-index:2000;
        position:fixed;
        width:'0%';
        height:'0%';
        top:96%;
        left:96%;
        border-radius: 50%;
        background-color:#03353E;
      }
  
      #AddForm {
        display:none;
  
      }
  
      #Battle {
        display:none;
      }
  
      #Logo {
        font-family: 'Literata', serif;
        position:fixed;
        bottom:50vh;
        left:50%;
        transform:translate(-50%, 0);
        font-size:50px;
        color:#fff;
        text-shadow: #0294Af 2px 2px;
        z-index:5000;
      }
  
      #Logo .letter {
        display: inline-block;
        line-height: 2rem;
      }
  
      /* Split the screen in half */
      .split {
        height: 100%;
        width: 50%;
        position: fixed;
        z-index: 10;
        top: 0;
        overflow-x: hidden;
        padding-top: 20px;
        z-index:1;
      }
  
      /* Control the left side */
      .left {
        left: 0;
        
      }
  
      /* Control the right side */
      .right {
        right: 0;
      }
  
      .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
  
      .centered img {
        opacity:0;
        transform: scale(0) rotate(0);
        width: 50vh;
        height: 50vh;
        object-fit: cover;
        border:solid 0.2rem #fff;
        border-radius:50%;
        box-shadow: 5px 5px 6px rgba(68, 68, 68, 0.3);
      }

      #Main .image-container {
          cursor:pointer;
      }
  
  
      p.description {
        font-family: 'Indie Flower', cursive;
        text-shadow: 5px 5px 6px rgba(68, 68, 68, 0.3);
        font-size: 1.4rem;
        margin-top:0.5rem;
      }
      
      h2.title {
        font-family:'Architects Daughter', cursive;
        font-size: 2rem;
        text-shadow: 5px 5px 6px rgba(68, 68, 68, 0.3);
      }
  
      #Actions {
        position:absolute;
        bottom:2%;
        height:2rem;
        right:5%;
        z-index:1000;
      }
  
      #AddButton {
        z-index:500;
        font-size:2rem;
        color:#fff;
        background:#03353E;
        border-radius:50%;
        height:2.5rem;
        width:2.5rem;
        line-height:2.4rem;
        position:absolute;
        bottom:3%;
        right:3%;
        text-decoration:none;
        cursor:pointer;
      }
  
      #AddForm {
        position:absolute;
        width:50%;
        left:50%;
        top:3rem;
        transform: translate(-50%,0);
        text-align:left;
      }
  
      #Scores {
        position: absolute;
        bottom: 15%;
        height: 3rem;
        width: 100%;
        z-index: 1000;
        display:none;
      }
  
      #LeftScore {
        width: 25%;
        position: absolute;
        text-align: center;
        left: 0;
      }
  
      #RightScore {
        width:75%;
        position: absolute;
        text-align: center;
        right: 0;
      }
  
      .score-percent {
        font-size: 3rem;
        line-height: 3.3rem;
        font-family: 'Literata', serif;
        color: white;
        text-shadow: #0294af 2px 2px;
      }
  
      .score-total {
        font-size:0.8rem;
        color:#fff;
      }

      .icon-button {
        opacity: 0.6;
        border-radius: 50%;
        border: solid 4px #eee;
        width: 30px;
        height: 30px;
        padding: 8px;
        cursor: pointer;
        background: #0294af;

      }

      .icon-button:hover {
        opacity:1;
      }

      #DomainSwitch {
        position: fixed;
        top: 2%;
        right: 30px;
        z-index: 3000;
        background-size: 30px;
        background-position: center;
        background-repeat: no-repeat;
        background-image:url("https://whichonewins.s3.amazonaws.com/grid.svg");
      }
  
      #LeaderboardSwitch {
        position: fixed;
        display:none;
        top: 2%;
        right: 100px;
        z-index: 3000;
        background-size: 30px;
        background-position: center;
        background-repeat: no-repeat;
        background-image:url("https://whichonewins.s3.amazonaws.com/trophy-svgrepo-com.svg");
      }
  
      #LeaderboardSwitch.active {
        background-image:url("https://whichonewins.s3.amazonaws.com/connections-svgrepo-com.svg");
      }
  
      .card {
        position:fixed;
        height:100%;
        width:100%;
        transition: transform 0.4s;
        transform-style: preserve-3d;
      }
  
      .card.flipped {
        transform: rotateY(180deg);
      }
  
      .face {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }
  
      .face.back {
        transform: rotateY(180deg);
      }
  /*
      #LeaderboardSwitch:hover {
        opacity:1;
      } */
  
      #Leaderboard {
        position:fixed;
        width:100%;
        height:100%;
        background:#03353E;
        overflow-y:scroll;
        z-index:2000;
      }
  
      .leader-item {
        margin-left: 5px;
        margin-right: 5px;
      }
  
      .leader-item 
      h2.title {
        font-size:1rem;
        margin-top: 0.1rem;
      }

      .leader-item .rank {
        font-size:1.5rem;
      }
  
      .leader-item img {
  
        width: 30vh;
        height: 30vh;
        object-fit: cover;
        border:solid 0.2rem #fff;
        border-radius:50%;
        box-shadow: 5px 5px 6px rgba(68, 68, 68, 0.3);
      }
  
      #LeaderItems {
        padding: 8px;
        display: grid;
        width: 87%;
        margin:0 auto;
        grid-template-columns: repeat(auto-fill, minmax(32vh, 1fr)) ;
        grid-auto-rows: minmax(30vh, auto);
        grid-gap: 1rem;
        margin-top: 1rem;
      }

      a.hash-link {
        cursor: pointer;
      }

      .domain-item {
        width: 13vw;
        height: 13vw;
        box-shadow: 5px 5px 6px rgb(68 68 68 / 30%);
        background:#fff;
        border-radius: 1rem;
        padding:3px;
      }

      .domain-item img {
        object-fit: scale-down;
        width: 13vw;
        height: 13vw;
        border-radius: 1rem;
      }

      #DomainSelect {
        background: #03353E;
        width: 100%;
        height: 100%;
        position:fixed;
        display:none;
      }

      #DomainItems {
        display: grid;
        grid-column-gap: 2vw;
        grid-row-gap: 2vh;
        grid-template-columns: 14vw 14vw 14vw 14vw 14vw 14vw;
        padding: 3vw;
      }