:root { 
    --primcol1:#F6921E; /*ORANGE*/
    --primcol2:#CB1E58; /*RED*/
    --primcol3:#333A96; /*BLUE*/
    
    --black:#101025;
    
    --stripecol1: #E26838; /*RED HUE*/
    --stripecol2: #DE5341; /*RED HUE*/
    --stripecol3: #D63B4B; /*RED HUE*/
    
    --stripecol4: #FAB217; /*YELLOW HUE*/
    --stripecol5: #F9A31E; /*YELLOW HUE*/
    --stripecol6: #F79524; /*YELLOW HUE*/
  
    --base: 20px;
  }
  
  html {
    height: -webkit-fill-available;
  }

  body {
    margin:0;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none;
    min-height: -webkit-fill-available;
    user-select: none;
    color: var(--black);
  }

  .full-toggle {
    position:absolute;
    z-index:9999;
    right:1rem;
    top:1rem;
    color:white;
  }
  .material-icons {
    font-size: 4rem;
    cursor:pointer;
  }

  #full {

  }

  #full-exit {
    display:none;
  }

  @media screen and (max-width: 770px) {
    .material-icons {
      font-size:3rem;
    }
  }
  @media screen and (max-width: 360px) {
    .material-icons {
      font-size:2.5rem;
    }
    .full-toggle {
      right:0.5rem;
      top:0.5rem;
    }
  }

  /*CONTAINER GENERAL STYLE*/
  .container {
    width:100vw;
    height:100vh;
    position:fixed;
  }
  
  /*FONT STYLE*/
  .coda-font {
    font-family:'Coda';
    color:white;
    font-size:5rem;
  }
  
  /*WIN-LOSE-NEW CHARACTER*/
  .win-container {
    display:none;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:999;
  }
  .winlose{
    display:flex;
    justify-content:center;
  }
  .win-img{
    max-width:50%;
  }
  .winlosetransition{
    animation:win 2s ease forwards;
  }
  @keyframes win{
    0% { transform: scale(0); }
    25% { transform: scale(1); }
    75% { transform: scale(1); }
    100% { transform: scale(0); }
      }
    /*WIN-LOSE RESPONSIVE*/
    @media screen and (max-width: 510px) {
        .win-img{
            max-width:80%;
          }
    }
    @media screen and (max-width: 360px) {
        .win-img{
            max-width:85%;
          }
    }
  
  /*TITLE*/
  .title-container {
    background-color:var(--primcol1);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:900;
  }
  .title-logo{
    display:flex;
    justify-content:center;
  }
  .title-img{
    max-width:60%;
  }
  .btn {
    text-align:center;
    font-family:'Coda';
    color:white;
    padding:0.5rem 2rem;
    margin:0.5rem;
    font-size:2rem;
    border-radius:0.9rem;
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none;
    user-select: none;
  }
  .btn:hover {
    outline:0.25rem solid white;
    box-shadow:0.1rem 0.1rem 0.5rem 0.1rem #101025;
  }
  .play-btn {
    background-color:var(--primcol2);
  }
  .full-btn {
    background-color:var(--primcol3);
  }
  /*TITLE - RESPONSIVE*/
  @media screen and (max-width: 770px) {
    .title-img {
      max-width:70%;
    }
    .btn {
      font-size:1.5rem;
      padding:0.375rem 1.5rem;
      margin:0.375rem;
      border-radius:0.65rem;
    }
  }
  @media screen and (max-width: 360px) {
    .title-img {
      max-width:90%;
    }
    .btn {
      font-size:1rem;
      padding:0.25rem 1rem;
      margin:0.25rem;
      border-radius:0.4rem;
    }
    .btn:hover {
      outline:0.15rem solid white;
      box-shadow:0.05rem 0.05rem 0.2rem 0.05rem #101025;
    }
  }

  /*EPILOG*/
  .epilog-container {
    background-color:var(--primcol1);
    display:none;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:900;
    font-family: 'Coda';
  }
  .epilog {
    text-align:center;
    font-size:1.7rem;
    width:60%;
    margin-bottom:2rem;
  }
  .article-btn {
    background-color:var(--primcol2);
  }
  .back-btn {
    background-color:var(--primcol3);
  }
  
  /*EPILOG-RESPONSIVE*/
  @media screen and (max-width: 770px) {
    .epilog {
        font-size:1.2rem;
        width:60%;
        margin-bottom:1.5rem;
      }
  }
  @media screen and (max-width: 360px) {
    .epilog {
        font-size:1rem;
        width:80%;
        margin-bottom:1rem;
      }
  }
  
  
  /*TRANSITION*/
  .transition{
    display:none;
    z-index:1000;
  }
  .transitionout{
    width:100vw;
    height:100vh;
    position:absolute;
    z-index:1000;
    background:#CB1D58;
    -webkit-mask:
      linear-gradient(90deg,#0000 50%,#000 0) 0,
      linear-gradient(90deg,#0000 50%,#000 0) 0;
    -webkit-mask-size:200px 100%;
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    animation:out 1s ease forwards;
  }
  @keyframes out{
    to {-webkit-mask-position:100px,0}
  }
  .transitionin{
    width:100vw;
    height:100vh;
    position:absolute;
    z-index:1000;
    background:#CB1D58;
    -webkit-mask:
      linear-gradient(90deg,#0000 50%,#000 0) 0,
      linear-gradient(90deg,#0000 50%,#000 0) 0;
    -webkit-mask-size:200px 100%;
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    animation:in 1s ease reverse;
  }
  @keyframes in{
    to {-webkit-mask-position:100px,0}
  }
  
  /*NAME INPUT*/
  .input-container {
    background-color:var(--primcol1);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:900;
    font-family:'Coda';
    font-size:2rem;
  }
  #fname {
    font-size:3rem;
    font-family:'Coda';
    padding: 12px 20px;
    margin: 8px 0;
    width:60%;
    border:solid 5px var(--primcol2);
    border-radius:3rem;
    text-align:center;
  }
  .input-btn {
    background-color:var(--primcol2);
  }
  /*NAME INPUT - RESPONSIVE*/
  @media screen and (max-width: 770px) {
      .transitionin, .transitionout {
      -webkit-mask-size:100px 100%;
    }
    @keyframes in{
      to {-webkit-mask-position:50px,0}
    }
    @keyframes out{
      to {-webkit-mask-position:50px,0}
    }
    .fnamelabel {
      font-size: 1.5rem;
    }
    #fname {
      font-size:2rem;
      border:solid 4px var(--primcol2);
    }
    .btn {
      font-size:1.5rem;
      padding:0.375rem 1.5rem;
      margin:0.375rem;
      border-radius:0.65rem;
    }
  }
  @media screen and (max-width: 360px) {
    .transitionin, .transitionout {
      -webkit-mask-size:50px 100%;
    }
    @keyframes in{
      to {-webkit-mask-position:25px,0}
    }
    @keyframes out{
      to {-webkit-mask-position:25px,0}
    }
    .fnamelabel {
      font-size: 1rem;
    }
    #fname {
      font-size:1rem;
      border:solid 3px var(--primcol2);
    }
    .btn {
      font-size:1rem;
      padding:0.25rem 1rem;
      margin:0.25rem;
      border-radius:0.4rem;
    }
  }
  
  /*INTRO*/
  .intro-container {
    width:100%;
    height:100%;
    background-color:var(--primcol1);
    display:none;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:900;
    font-family:'Coda';
  }
  .intro{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-direction:column;
    height:80%;
    width:60%;
  }
  .intro-page {
    font-size:1.2rem;
    display:flex;
    flex-direction:column;
  }
  .intro-nav {
    display:flex;
    justify-content:space-between;
    width:60%;
    font-size:2rem;
  }
  .anchor {
    color:var(--primcol3);
    text-decoration:none;
  }
  #page-1 {
    display:flex;
  }
  #page-2 {
    display:none;
  }
  #page-3 {
    display:none;
  }
  .intro-nav-btn {
    cursor:pointer;
  }
  .intro-nav-btn:hover {
    cursor:pointer;
    color:white;
  }
  /*INTRO - RESPONSIVE*/
  @media screen and (max-width: 770px) {
    .intro {
      width:85%;
    }
    .intro-page {
      font-size:0.9rem;
    }
    .intro-nav {
      font-size:1.2rem;
    }
  }
  @media screen and (max-width: 360px) {
    .intro {
      width:90%;
    }
    .intro-page {
      font-size:0.8rem;
    }
    .intro-nav {
      font-size:1rem;
    }
  }
  
  /*LINK CONTAINER*/
  .link-container {
    width:100vw;
    height:100vh;
    position:absolute;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .chara-link-container {
    width:100vw;
    height:100vh;
    position:absolute;
    overflow:hidden;
  }
  .stripe-background {
    width: calc( ((3 * var(--base)) / 0.707) * 100vw);    /*cos(45deg) = 0.707*/
    height: 100vh;
    background: repeating-linear-gradient(
    45deg,
    var(--stripecol4),
    var(--stripecol4) var(--base),
    var(--stripecol5) var(--base),
    var(--stripecol5) calc((2 * var(--base))),
    var(--stripecol6) calc((2 * var(--base))),
    var(--stripecol6) calc((3 * var(--base)))
      );
    background-size:2000% 100%;
    animation: gradient 150s linear infinite;
  }
  @keyframes gradient {
      0% {
          background-position: left;
      }
      100% {
          background-position: right;
      }
  }
  .dummy{
    width:100vw;
    height:100vh;
  }
  
  /*TAMPILAN NAMA KARAKTER TENGAH*/
  .select {
    position:absolute;
    text-align:center;
    font-family:'Coda';
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  .sel {
    font-size:2rem;
    pointer-events:none;
  }
  .sel-char {
    font-size:3rem;
    line-height:3rem;
    pointer-events:none;
  }
  .sel-sel {
    margin:0.5rem;
    padding:0.5rem 1rem;
    background-color:var(--primcol2);
    border-radius:0.5rem;
    cursor:pointer;
    color:white;
  }
  
  @media screen and (max-width: 770px) {
    .coda-font {
      font-size:4rem;
    }
    .sel {
      font-size:0.8rem;
    }
    .sel-char {
      font-size:1.8rem;
      line-height:1.8rem;
    }
    .sel-sel {
      font-size:1.2rem;
      padding:0.35rem 0.7rem;
      border-radius:0.35rem;
    }
  }
  @media screen and (max-width: 360px) {
    .coda-font {
      font-size:2rem;
    }
    .sel {
      font-size:0.6rem;
    }
    .sel-char {
      font-size:1.2rem;
      line-height:1.2rem;
    }
    .sel-sel {
      font-size:1rem;
      padding:0.25rem 0.5rem;
      border-radius:0.25rem;
    }
  }
  
  /*LINGKARAN KARAKTER PILIHAN*/
  .chara-circle{
    font-family:'Coda';
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3rem;
    text-align:center;
    border: solid 0.4rem var(--black);
    overflow:hidden;
    color:white;
  }
  /*-----------------------------------------------------*/
  /*-----------------------------------------------------*/
  /*CARD CONTAINER*/
  .card-container {
    width:100vw;
    height:100vh;
    background-color:rgba(16,16,37,0.98);
    opacity:1;
    position:absolute;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow:hidden;
  }
  /*ACTUAL CARD CONTAINER*/
  .card-top{
    height:90%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  /*CARD ANIMATION*/
  .card-flipper{
    width:100%;
    max-width: 285px;
    height: 500px;
    perspective: 500px;
  }
  .card-flipper-inner{
    height:100%;
    width:100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:0.7rem;
  }
  .flip-animation {
    animation: flipper 2s;
      }
  @keyframes flipper {
    0% {
      transform:
        rotateY(0deg)
        scale(0,0)
        translate(0px, 1000px);
    }
    100%{
      transform:
        rotateY(1080deg)
        scale(1,1)
        translate(0px, 0px);
    };
    }
  /*BUTTON CONTAINER*/
  .card-bottom{
    height:10%;
    /*background-color:antiquewhite;*/
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .fight-button{
    background-color:#CB1E58;
    width:150px;
    border-radius:1rem;
    font-family:'Coda';
    text-align:center;
    font-size:1.4rem;
    font-weight:400;
    color:white;
    padding:0.3rem;
    cursor:pointer;
  }
  /*CARD CONTENT*/
  .card-back{
    width:285px;
    height:500px;
    background-color:orangered;
    border-radius:0.7rem;
    position:absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background-color: var(--primcol3);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 18c0-1.105.887-2 1.998-2 1.104 0 2-.895 2.002-1.994V14v6h-4v-2zM0 13.998C0 12.895.888 12 2 12c1.105 0 2 .888 2 2 0 1.105.888 2 2 2 1.105 0 2 .888 2 2v2H0v-6.002zm16 4.004A1.994 1.994 0 0 1 14 20c-1.105 0-2-.887-2-1.998v-4.004A1.994 1.994 0 0 0 10 12c-1.105 0-2-.888-2-2 0-1.105-.888-2-2-2-1.105 0-2-.887-2-1.998V1.998A1.994 1.994 0 0 0 2 0a2 2 0 0 0-2 2V0h8v2c0 1.105.888 2 2 2 1.105 0 2 .888 2 2 0 1.105.888 2 2 2 1.105 0 2-.888 2-2 0-1.105.888-2 2-2 1.105 0 2-.888 2-2V0h4v6.002A1.994 1.994 0 0 1 22 8c-1.105 0-2 .888-2 2 0 1.105-.888 2-2 2-1.105 0-2 .887-2 1.998v4.004z' fill='%239C92AC' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
  }
  .card-front{
    width:285px;
    height:500px;
    background-color:#F6921E;
    border-radius:0.7rem;
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  /*CARD INSET*/
  .card-small {
    width:265px;
    height:480px;
    background-color:indianred;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
  }
  /*CARD TOP CONTENT*/
  .card-image {
    /*border:solid 3px black;*/
    overflow:hidden;
    position:relative;
    
    width: calc( ((3 * var(--base)) / 0.707) * 100vw);  /*cos(45deg) = 0.707*/
    height: 55%;
    background: repeating-linear-gradient(
    45deg,
    var(--stripecol1),
    var(--stripecol1) var(--base),
    var(--stripecol2) var(--base),
    var(--stripecol2) calc((2 * var(--base))),
    var(--stripecol3) calc((2 * var(--base))),
    var(--stripecol3) calc((3 * var(--base)))
      );
    background-size:2000% 100%;
    animation: gradient 150s linear infinite;
  }
  @keyframes gradient {
      0% {
          background-position: left;
      }
      100% {
          background-position: right;
      }
  }
  .card-name {
    font-family:'Coda';
    color:white;
    width:100%;
    padding:0.2rem 0.4rem 0.2rem 0.4rem;
    position:absolute;
    font-size:1.2rem;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .name-text {
    z-index:1;
  }
  .name-back {
    width:70%;
    border-top: 2.2rem solid #333A96;
      border-right: 2.2rem solid transparent;
      height: 0;
    position:absolute;
    left:0;
    top:0;
  }
  .card-close {
    background-color:white;
    width:1.2rem;
    height:1.2rem;
    position:absolute;
    right:1.2rem;
    border-radius:1.2rem;
    cursor:pointer;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    border:solid 3px var(--black);
  }
  .fa-close {
    font-size:1rem;
    color:var(--black);
  }
  .profile {
    width:100%;
  }
  .zodiac {
    position:absolute;
    bottom:0;
    right:0;
    font-family:'Coda';
    color:white;
    padding:0.1rem;
    text-align:right;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    width:100%;
  }
  .zodiac-back {
    position:absolute;
    right:0;
    bottom:0;
    width:60%;
    border-bottom:solid 1.8rem var(--primcol2);
    border-left:solid 1.8rem transparent;
  }
  .zodiac-img {
    position:absolute;
    bottom:0.25rem;
    right:0.25rem;
    width:3rem;
    height:3rem;
    border-radius:2rem;
    background-color:white;
    margin-left:0.5rem;
  }
  .z-img {
      width:100%;
      height: 100%;
  }
  .zodiac-buffer {
    width:3rem;
    margin-left:1rem;
  }
  .zodiac-text {
    font-size:1.2rem;
    margin-left:2rem;
    z-index:1;
  }
  /*CARD BOTTOM CONTENT*/
  .card-detail {
    width:100%;
    height:50%;
    background-color:#F6921E;
    display:flex;
    flex-direction:column;
  }
  .content-detail {
    font-family:'Coda';
    font-size:0.9rem;
    /*border:solid 1px black;*/
    height:18%;
    margin:0.2rem 0.2rem 0.2rem 0;
    flex-basis:fit-content;
    line-height:1rem;
  }
  
  #cd-1,#cd-2,#cd-3,#cd-4, #cd-5 {
    border-left: solid 5px var(--primcol3);
    padding-left:5px;
  }
  #cd-6 {
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    margin-top:auto;
  }
  .more-detail {
    cursor:pointer;
    font-family:'Coda';
    font-size:0.8rem;
    background-color:white;
    color:var(--black);
    margin:0.2rem;
    width:75px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:1rem;
  }
  /*CARD - RESPONSIVE*/
  @media screen and (max-width: 770px) {
    .content-detail {
      
    }
  }
  @media screen and (max-width: 360px) {
    .content-detail {
      font-size:0.9rem;
    }
  }
  /*ARTICLE CONTAINER*/
  .article-container {
    width:100vw;
    height:100vh;
    background-color:rgba(16,16,37,0.98);
    opacity:1;
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow:hidden;
  }
  .article {
    margin:2rem;
    height:80%;
    width:60%;
    color:white;
    font-family:'Coda';
    overflow-y:scroll;
    font-size:1rem;
  }
  .article::-webkit-scrollbar {
    width: 10px;
  }
   /* Handle */
  .article::-webkit-scrollbar-thumb {
    background: #FBB317; 
    border-radius: 10px;
  }
  /* Handle on hover */
  .article::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
  }
  .art-back-button{
    background-color:#CB1E58;
    width:150px;
    border-radius:1rem;
    font-family:'Coda';
    text-align:center;
    font-size:1.4rem;
    font-weight:400;
    color:white;
    padding:0.3rem;
    cursor:pointer;
  }
  /*ARTICLE - RESPONSIVE*/
  @media screen and (max-width: 770px) {
    .article {
      font-size:0.9rem;
    }
  }
  @media screen and (max-width: 510px) {
    .article {
      margin-top:3rem;
      width:90%;
      font-size:0.9rem;
    }
  }
  /*-----------------------------------------------------*/
  /*-----------------------------------------------------*/
  /*FIGHT CONTAINER*/
  .fight-container {
    width:100vw;
    height:100vh;
    display:none;
    overflow:hidden;
  }
  .enemy {
    height:100%;
    right:0;
    position:absolute;
  }
  .player {
    height:100%;
    left:0;
    position:absolute;
  }
  .zig-zag {
    width:100vw;
    height:100vh;
    position:absolute;
    background:
    /* color2 */
    linear-gradient(135deg, var(--stripecol5) 25%, transparent 25%),  
    linear-gradient(225deg, var(--stripecol5) 25%, transparent 25%),
    
    /* color3 */
    linear-gradient(135deg, var(--stripecol6) 50%, transparent 50%),  
    linear-gradient(225deg, var(--stripecol6) 50%, transparent 50%);
    background-size: 50px 50px;
    background-color:var(--stripecol5);
    animation: ziggy 15s linear infinite;
    z-index:-1;
  }
  @keyframes ziggy {
      0% {
          background-position: bottom;
      }
      100% {
          background-position: top;
      }
  }
  .statusbar {
    height:10%;
  
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .status {
    background-color:var(--primcol3);
    width:40%;
    height:80%;  
  }
  .status-right {
    text-align:right;
  }
  .status-left {
    text-align:left
  }
  .chara-container {
    height:60%;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
  }
  .quiz-container {
    height:30%;
    background-color:indianred;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: var(--primcol3);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 18c0-1.105.887-2 1.998-2 1.104 0 2-.895 2.002-1.994V14v6h-4v-2zM0 13.998C0 12.895.888 12 2 12c1.105 0 2 .888 2 2 0 1.105.888 2 2 2 1.105 0 2 .888 2 2v2H0v-6.002zm16 4.004A1.994 1.994 0 0 1 14 20c-1.105 0-2-.887-2-1.998v-4.004A1.994 1.994 0 0 0 10 12c-1.105 0-2-.888-2-2 0-1.105-.888-2-2-2-1.105 0-2-.887-2-1.998V1.998A1.994 1.994 0 0 0 2 0a2 2 0 0 0-2 2V0h8v2c0 1.105.888 2 2 2 1.105 0 2 .888 2 2 0 1.105.888 2 2 2 1.105 0 2-.888 2-2 0-1.105.888-2 2-2 1.105 0 2-.888 2-2V0h4v6.002A1.994 1.994 0 0 1 22 8c-1.105 0-2 .888-2 2 0 1.105-.888 2-2 2-1.105 0-2 .887-2 1.998v4.004z' fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  }
  .chara { /*image profile container*/
  
    width:45%;
    height:90%;
    position:relative;
  }
  .chara-img-left {
    position:absolute;
  
    width: 100%;
    height:100%;
  }
  .chara-img-right {
    position:absolute;
  
    width: 100%;
    height:100%;
  }
  .name {
    font-family:'Coda','cursive';
    color:white;
    font-size:1.4rem;
    margin:0.3rem;
    pointer-events:none;
  }
  .health-container {
    background-color:var(--black);
    height:2.3rem;  
    display:flex;
  }
  .health {
    width:1.5rem;
    height:1.5rem;
    margin:0.4rem;
  }
  .fa-heart {
    font-size:1.5rem;
    color:var(--primcol2);
  }
  .hc-right {
    justify-content:flex-end;
  }
  .quiz {
    width:600px;
    max-width:90%;
    height:90%;
    background-color:var(--black);
    display:flex;
    flex-direction:column;
    align-items:center;
    border-radius:1rem;
  }
  .quiz-q {
  
    width:80%;
    color:white;
    font-family:'Coda';
    pointer-events:none;
    margin:0.5rem;
      
  }
  .quiz-a {
  
    width:100%;
  }
  .quiz-s {
    background-color:yellow;
    height:20%;
    width:50%;
  }
  .answer-container {
  
    font-family:'Coda';
    font-size: 1rem;
    display:flex;
    flex-direction:column;
    align-items: center;
  }
  .answer {
    width:80%;
    background-color:lightyellow;
    padding:0.15rem;
    margin:0.15rem;
    padding-left:1rem;
    border-radius:0.5rem;
    cursor:pointer;
  }
  .answer:hover{
    background-color:green;
    color:white;
  }
  .answer:focus{
    background-color:green;
    color:white;
  }
  .quiz-s {
    font-family:'Coda';
    text-align:center;
    border-radius:0.5rem;
    margin-top:0.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    background-color:var(--primcol2);
    color:white;
  }
  .quiz-s:hover {
    border:solid 3px white;
    color:white;
  }
  .chara-shaker {
    animation: shake 0.25s;
    animation-iteration-count: 3;
  }
  @keyframes shake {
    0% { transform: translate(4px, 4px) rotate(0deg); }
    10% { transform: translate(-4px, -8px) rotate(-2deg); }
    20% { transform: translate(-12px, 0px) rotate(2deg); }
    30% { transform: translate(12px, 2px) rotate(0deg); }
    40% { transform: translate(4px, -4px) rotate(2deg); }
    50% { transform: translate(-4px, 8px) rotate(-2deg); }
    60% { transform: translate(-12px, 4px) rotate(0deg); }
    70% { transform: translate(12px, 4px) rotate(-2deg); }
    80% { transform: translate(-4px, -4px) rotate(2deg); }
    90% { transform: translate(4px, 8px) rotate(0deg); }
    100% { transform: translate(4px, -8px) rotate(-2deg); }
  }
  .hit-shaker {
    animation: hitshake 0.15s;
    animation-iteration-count: 5;
  }
  @keyframes hitshake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
  .disappear {
    transition: opacity 0.5s;
    opacity:0;
  }
  .hit {
    font-family:'Coda';
    font-weight:800;
    color:red;
    font-size:3rem;
    position:absolute;
    left:calc(50% - 3rem);
    top:calc(50% - 3rem);
    pointer-events:none;
    opacity:0;
  }
  /*FIGHT - RESPONSIVE*/
  @media screen and (max-width: 770px) {
    .chara {
      height:90%;
    }
    .name {
      font-size:1.2rem;
    }
    .health-container {
      height:2rem;
    }
    .fa-heart {
      font-size:1.2rem;
    }
    .health {
      width:1.2rem;
      height:1.2rem;
      margin:0.4rem;
    }
    .chara-container {
      height:50%;
    }
    .quiz-container {
      height:35%;
    }
    .quiz {
      justify-content:center;
    }
  }
  @media screen and (max-width: 510px) {
    .chara {
      height:60%;
    }
    .fa-heart {
      font-size:1.1rem;
    }
    .health-container {
      height:1.8rem;
    }
    .health {
      width:1.1rem;
      height:1.1rem;
      margin:0.3rem;
    }
    .status {
      width:45%;
    }
    .name {
      font-size:1rem;
    }
    .chara-container {
      height:40%;
    }
    .quiz-container {
      height:50%;
    }
    .quiz-s {
      height:15%;
    }
  }
  @media screen and (max-width: 360px) {
    .chara {
      height:50%;
    }
    .health-container {
      height:1.6rem;
    }
    .fa-heart {
      font-size:1rem;
    }
    .health {
      width:1rem;
      height:1rem;
      margin:0.3rem;
    }
    .name {
      font-size:0.9rem;
    }
    .status {
      width:48%
    }
    .quiz-q {
      font-size:0.9rem;
    }
    .answer {
      font-size:0.9rem;
      padding-right:1rem;
    }
    .quiz-s {
      font-size:0.9rem;
      height:15%;
    }
    .chara-container {
      height:35%;
    }
    .quiz-container {
      height:55%;
    }
    .quiz-a {
      width:80%;
    }
    .answer {
      margin-left:0.5rem;
      margin-right:0.5rem;
    }
  }
  
@media screen and (max-width: 310px) {
    .chara {
      height:50%;
    }
}