@media screen and (max-width: 930px) {
    body {
      background: url('https://i.imgur.com/oQ9kymR.png') repeat;
    }

    .frame, .particle-container, .mobile-frame {
      display: none;
      visibility: hidden;
    }

    /* Font Styles */
    div, a, #tactics-summon, li, .buttonTitle, .limitTitle, p {
      font-family: 'Altima', sans-serif;
      font-size: 32px;
      color: rgb(48, 40, 32);
      text-shadow: 3px 3px rgb(132, 121, 107);
    }

    .brave-faith-font {
      font-family: 'BraveFaith', sans-serif;
      font-size: 32px;
    }

    .job-header-font {
      color: white;
      text-shadow: 0px -2px rgb(33, 24, 16), -2px 0px rgb(33, 24, 16), -2px -2px rgb(33, 24, 16),
                   0px 2px rgb(33, 24, 16), 2px 0px rgb(33, 24, 16), 2px 2px rgb(33, 24, 16),
                   -2px 2px rgb(33, 24, 16), 2px -2px rgb(33, 24, 16);
    }

    .stat-font {
      font-size: 6.06060606vw;
    }

    .tactics-stats, .tactics-lv-points, .lv-points-grid,
    .tactics-lv, .tactics-stat-name, .tactics-denominator,
    .tactics-numerator, .tactics-slash, .brave-faith,
    #formation, #tactics-name, .tactics-job,
    #brave-faith-points, .stat-font {
      font-size: 6.06060606vw;
    }

    .tactics-lv, .tactics-stat-name {
      color: white;
      text-shadow: 0px -0.378787878vw rgba(33, 24, 16, 0.75), -0.378787878vw 0px rgba(33, 24, 16, 0.75), -0.378787878vw -0.378787878vw rgba(33, 24, 16, 0.75), 
                   0px 0.378787878vw rgba(33, 24, 16, 0.75), 0.378787878vw 0px rgba(33, 24, 16, 0.75), 0.378787878vw 0.378787878vw rgba(33, 24, 16, 0.75),
                   -0.378787878vw 0.378787878vw rgba(33, 24, 16, 0.75), 0.378787878vw -0.378787878vw rgba(33, 24, 16, 0.75);
    }

    #brave-faith-points, #formation {
      text-shadow: 0px -0.378787878vw rgb(156, 146, 123), -0.378787878vw 0px rgb(156, 146, 123), -0.378787878vw -0.378787878vw rgb(156, 146, 123), 
                   0px 0.378787878vw rgb(156, 146, 123), 0.378787878vw 0px rgb(156, 146, 123), 0.378787878vw 0.378787878vw rgb(156, 146, 123),
                   -0.378787878vw 0.378787878vw rgb(156, 146, 123), 0.378787878vw -0.378787878vw rgb(156, 146, 123);
    }

    .tactics-slash {
      color: rgb(123, 121, 115);
    }

    .tactics-credit {
      padding: 0.75em;
    }

    .tactics-credit p {
      color: white;
      text-shadow: 2px 2px rgba(82, 81, 74);
      margin-bottom: 0.5em;
    }

    p {
      text-align: justify;
      margin: 0 0.3em;
      line-height: 1.07em;
    }

    .personae-name {
      margin-top: 0.2em;
    }

    .red-name {
      color: rgb(99, 32, 8);
      text-shadow: 3px 3px rgb(140, 121, 107);
    }

    .total-slash {
      opacity: 0.5;
      position: relative;
      right: 4px;
    }

  /* Hyperlink Styles */
    a:hover, #tactics-summon:hover {
      opacity: 1;
      transition: none;
    }

    a:link, a:visited, .tactics-navigation a {
      color: white;
    }

    .tactics-navigation a:link, .tactics-navigation a:visited {
      text-decoration: none;
      color: white;
    }

    a:hover, .tactics-navigation a:hover, #tactics-summon:hover {
      color: white;
      text-shadow: 0px -2px rgba(33, 24, 16, 0.75), -2px 0px rgba(33, 24, 16, 0.75), -2px -2px rgba(33, 24, 16, 0.75), 
                   0px 2px rgba(33, 24, 16, 0.75), 2px 0px rgba(33, 24, 16, 0.75), 2px 2px rgba(33, 24, 16, 0.75);
    }

  /* Box Styles */
    .tactics-navigation, .tactics-menu, .tactics-url, #tactics-mogContainer, .brave-faith,
    .tactics-original-bio, .war-of-the-lions-bio, .arazlam, .tactics-job-stats, .tactics-list-container,
    .ability-description, .limit-definition {
      background-color: rgb(173, 162, 140);
      background: url('https://i.imgur.com/G5Fyhqt.png');
      background-repeat: repeat;
    }

    .tactics-navigation, .tactics-menu, .tactics-url, #tactics-mogContainer,
    .tactics-original-bio, .war-of-the-lions-bio, .arazlam, .ability-description,
    .limit-definition {
      border-top: 2px solid rgb(214, 202, 173);
      border-left: 2px solid rgb(140, 129, 115);
      border-right: 2px solid rgb(82, 81, 66);
      border-bottom: 2px solid rgb(115, 105, 82);
      box-shadow: 0px 4px rgb(33, 24, 16), 2px 4px rgb(33, 24, 16), 2px 0px rgb(33, 24, 16),
                  4px 2px rgb(33, 24, 16), 4px 4px rgb(33, 24, 16),
                  0 -2px rgb(49, 40, 33), -2px 0px rgb(49, 40, 33),
                  -2px -2px rgb(49, 40, 33), 2px -2px rgb(49, 40, 33),
                  -2px 2px rgb(33, 24, 16);
    }

    /* Flexbox */
    .tactics-frame {
      display: flex;
      flex-direction: column;
      gap: 5px;
      width: 100vw;
      height: 100vh;
      visibility: visible;
      position: absolute;
      top: 0;
      left: 0;
    }

    /* Navigation */
    .tactics-navigation {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    /* Mog Containers */
  
    #tactics-mogContainer {
      display: flex;
      position: fixed;
      align-items: center;
      top: 54px;
      left: auto;
      right: 14px;
      padding: 10px 10px 10px 10px;
      width: 300px;
      visibility: hidden;
      opacity: 0;
      z-index: 510;
    }
  
    #tacticsMog {
      height: 89px;
      width: auto;
      float: right;
      padding-right: 15px;
    }

    #tactics-summon:hover ~ #tactics-mogContainer {
      visibility: visible;
      opacity: 1;
    }

    /* Menu */

  .tactics-menu ul{
    margin: 10px;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  li {
    display: inline;
    position: relative;
  }

  .tactics-menu ul li:hover::before, .ability-list li:hover::before,
  #tactics-radio1:checked ~ .tactics-menu ul #tactics-label1 li::before,
  #tactics-radio2:checked ~ .tactics-menu ul #tactics-label2 li::before,
  #tactics-radio3:checked ~ .tactics-menu ul #tactics-label3 li::before,
  #tactics-radio4:checked ~ .tactics-menu ul #tactics-label4 li::before {
    content: url('https://i.imgur.com/Ro4Sayo.png');
    position: absolute;
    height: 1px;
    width: 1px;
    left: -1.375em;
  }

  .personae-options ul li:hover::before,
  #personae-radio1:checked ~ .arazlam .arazlam-dialogue .personae-options ul #personae-label1 li::before,
  #personae-radio2:checked ~ .arazlam .arazlam-dialogue .personae-options ul #personae-label2 li::before {
    content: url('https://i.imgur.com/Ro4Sayo.png');
    position: absolute;
    height: 1px;
    width: 1px;
    right: 0.85em;
    transform: scaleX(-1);
  }

/* Info */
  .tactics-info {
    display: flex;
    flex-grow: 1;
    overflow-y: scroll;
  }

  #tactics-radio1:checked ~ .tactics-info {
    background-color: rgba(0, 0, 0, 0.25);
  }

  #tactics-radio2:checked ~ .tactics-info .tactics-personae {
    display: flex;
    visibility: visible;
    flex-direction: column;
    gap: 1em;
    margin-top: 1em;
  }

  #tactics-radio3:checked ~ .tactics-info .tactics-limit {
    display: flex;
    visibility: visible;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #tactics-radio4:checked ~ .tactics-info {
    background-color: rgba(0, 0, 0, 0.5);
  }

/* Navigation */
  .tactics-navigation {
    flex-wrap: wrap;
    height: fit-content;
  }

  .tactics-navigation a {
    margin: 10px;
  }

  /* Personal URL */
  .tactics-url {
    padding: 0.45em 0.35em;
  }

  /* Audio Container */
  .audio-container {
    visibility: hidden;
  }

  /* Job Class: Soldier */
  .Soldier {
    position: fixed;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 74px;
  }

  /* Tactics Info */
  .tactics-stats {
    padding: 1.325757575vw;
    width: 100%;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.5);
    position: relative;
    top: 4.734848484vw;
    justify-content: center;
  }

  .tactics-stats, .tactics-personae, .tactics-limit, .tactics-credit {
    display: none;
    visibility: hidden;
  }

  #tactics-radio1:checked ~ .tactics-info .tactics-stats {
    display: flex;
    visibility: visible;
  }

  #tactics-radio4:checked ~ .tactics-info .tactics-credit {
    display: block;
    visibility: visible;
  }

  .tactics-lv-points {
    display: flex;
  }

  .lv-points-grid {
    display: grid;
    grid-template-rows: 4.545454545vw 4.545454545vw 4.545454545vw 4.545454545vw;
    position: relative;
    bottom: 2.272727272vw;
    right: 1.136363636vw;
  }

  .tactics-portrait {
    width: 14.583333333vw;
    height: 18.181818181vw;
    padding: 0 0.378787878vw;
  }

  .tactics-lv {
    position: relative;
    left: 6.06060606vw;
  }

  .tactics-stat-bar {
    width: 17.234848484vw;
    height: 2.272727272vw;
    position: relative;
    bottom: 0.378787878vw;
    right: 0.378787878vw;
  }

  .tactics-numerator {
    position: relative;
    bottom: 0.378787878vw;
    right: 0.378787878vw;
    z-index: 10;
  }

  .tactics-slash, .tactics-denominator {
    position: relative;
    top: 1.136363636vw;
    right: 0.757575757vw;
  }

  .brave-faith {
    position: relative;
    display: grid;
    grid-template-columns: 10.416666666vw 34.469696969vw;
    grid-template-rows: 6.06060606vw 6.06060606vw 6.06060606vw;
    padding: 0.378787878vw 0;
  }

  .blue-tactics-icon {
    height: 4.545454545vw;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    position: relative;
    z-index: 10;
  }

  #formation {
    position: relative;
    right: 0.378787878vw;
    z-index: 1;
  }

  #tactics-name {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    position: relative;
    top: 0.378787878vw;
  }

  .tactics-job {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    position: relative;
    top: 0.303030303vw;
  }

  #brave-faith-points {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    position: relative;
    left: 1.136363636vw;
    bottom: 1.06060606vw;
  }

  #aquarius-sign {
    width: 9.469696969vw;
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 2;
    margin-left: 0.757575757vw;
    position: relative;
    bottom: 0.606060606vw;
  }

  .tactics-portrait, .brave-faith {
    background-color: rgb(173, 162, 140);
    border-top: 0.378787878vw solid rgb(214, 202, 173);
    border-left: 0.378787878vw solid rgb(140, 129, 115);
    border-right: 0.378787878vw solid rgb(82, 81, 66);
    border-bottom: 0.378787878vw solid rgb(115, 105, 82);
    box-shadow: 0px 0.757575757vw rgb(33, 24, 16), 0.378787878vw 0.757575757vw rgb(33, 24, 16), 0.378787878vw 0px rgb(33, 24, 16),
    0.757575757vw 0.378787878vw rgb(33, 24, 16), 0.757575757vw 0.757575757vw rgb(33, 24, 16),
                0 -0.378787878vw rgb(49, 40, 33), -0.378787878vw 0px rgb(49, 40, 33),
                -0.378787878vw -0.378787878vw rgb(49, 40, 33), 0.378787878vw -0.378787878vw rgb(49, 40, 33),
                -0.378787878vw 0.378787878vw rgb(33, 24, 16);
  }

  /* Personae */
  .personae-portrait {
    background-color: rgb(173, 162, 140);
    width: 77px;
    height: 96px;
    margin: 0.1em 0.3em 0 0.3em;
    position: relative;
    top: 4px;
  }

  .personae-portrait-cloud {
    float: left;
  }

  .arazlam {
    display: flex;
    padding-bottom: 6px;
  }

  .tactics-original-bio, .war-of-the-lions-bio {
    padding-bottom: 2px;
    display: none;
    visibility: hidden;
  }

  #personae-radio1:checked ~ .tactics-original-bio,
  #personae-radio2:checked ~ .war-of-the-lions-bio {
    display: block;
    visibility: visible;
  }

  /* Personae Menu */
  .personae-options ul {
    padding: 0;
    text-align: justify;
    margin: 0 0.3em;
    line-height: 1.07em;
  }

  .personae-options ul li {
    display: block;
  }

  /* Limit */
  .tactics-limit {
    width: 100%;
  }

  .limit-ability {
    margin: 0;
    padding: 0.3em 0.5em;
  }

  .limit-ability li {
    display: block;
    line-height: 1em;
    cursor: default;
  }

  .radius-speed {
    margin-left: 0.5em;
  }

  .tactics-job-header, .job-ability-header {
    position: relative;
    width: 437px;
    height: 8px;
    background-color: rgb(99, 89, 74);
    border-top: 2px solid rgb(214, 202, 173);
    border-bottom: 2px solid rgb(115, 105, 82);
    box-shadow: inset 2px -2px 0 rgb(173, 162, 140), inset -2px 0 0 rgb(82, 81, 66),
                inset -4px 0 0 rgb(173, 162, 140), inset -6px 0 0 rgb(115, 105, 82),
                inset 4px 0 0 rgb(164, 154, 132), inset 6px 0 0 rgb(115, 105, 82),
                0 -2px rgb(49, 40, 33), -2px 0 rgb(49, 40, 33), 0 2px rgb(49, 40, 33),
                -2px -2px rgb(49, 40, 33), -2px 2px rgb(49, 40, 33), 2px 0 rgb(33, 24, 16),
                2px -2px rgb(33, 24, 16), 2px 2px rgb(33, 24, 16);
    overflow: visible;
  }

  .tactics-job-header, .job-ability-header {
    top: 50px;
    z-index: -1;
  }

  .job-ability-footer {
    position: relative;
    top: 2px;
    width: 437px;
    height: 2px;
    border-top: 2px solid rgb(214, 202, 173);
    border-bottom: 2px solid rgb(115, 105, 82);
    box-shadow: 0 -2px rgb(49, 40, 33), -2px 0 rgb(49, 40, 33), 0 2px rgb(49, 40, 33),
                -2px -2px rgb(49, 40, 33), -2px 2px rgb(49, 40, 33), 2px 0 rgb(33, 24, 16),
                2px -2px rgb(33, 24, 16), 2px 2px rgb(33, 24, 16), inset 2px 0 rgb(173, 162, 140),
                inset 0 -2px 0 rgb(156, 146, 123), inset -2px 0 rgb(82, 81, 66), inset -4px 0 rgb(156, 146, 123);
  }

  .tactics-left-header-square {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: rgb(132, 121, 107);
    bottom: -2px;
    left: 0;
  }

  .tactics-top-right-header-square {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: rgb(140, 129, 115);
    top: -2px;
    right: 0;
  }

  .tactics-bottom-right-header-square {
    position: absolute;
    width: 2px;
    height: 4px;
    background-color: rgb(82, 81, 66);
    bottom: -2px;
    right: 0;
  }

  .job-categories, .job-stats-list {
    display: grid;
    grid-template-columns: 205px 27px 75px 47px 83px;
  }

  .tactics-job-stats {
    position: relative;
  }

  .ability-categories, .action-list {
    display: grid;
    grid-template-columns: 215px 56px 71px 95px;
  }

  .reaction-list, .support-list, .movement-list {
    display: grid;
    grid-template-columns: 215px 127px 95px;
    align-items: center;
  }

  .action-list, .reaction-list, .support-list, .movement-list {
    display: none;
    visibility: hidden;
  }

  #tactics-limit-radio1:checked ~ .tactics-list-container .action-list,
  #tactics-limit-radio2:checked ~ .tactics-list-container .reaction-list,
  #tactics-limit-radio3:checked ~ .tactics-list-container .support-list,
  #tactics-limit-radio4:checked ~ .tactics-list-container .movement-list {
    display: grid;
    visibility: visible;
  }

  .tactics-list-container {
    position: relative;
    width: 437px;
    height: 279px;
  }

  .tactics-list-container, .tactics-job-stats {
    border-top: 2px solid rgb(214, 202, 173);
    border-bottom: 2px solid rgb(115, 105, 82);
    box-shadow: 0 -2px rgb(49, 40, 33), -2px 0 rgb(49, 40, 33), 0 2px rgb(49, 40, 33),
                -2px -2px rgb(49, 40, 33), -2px 2px rgb(49, 40, 33), 2px 0 rgb(33, 24, 16),
                2px -2px rgb(33, 24, 16), 2px 2px rgb(33, 24, 16), inset 2px 0 rgb(173, 162, 140),
                inset 0 -2px 0 rgb(156, 146, 123), inset -2px 0 rgb(82, 81, 66), inset -4px 0 rgb(156, 146, 123);
  }

  .job-categories, .ability-categories {
    position: relative;
    top: 10px;
  }

  .job-header {
    padding-left: 0.6em;
  }

  .ability-icon-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.47em;
    padding-left: 0.6em;
  }

  .ability-mp-header, .ability-speed-header, .ability-jp-header,
  .job-lv-header, .job-total-header, .job-next-header {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ability-icon {
    filter: grayscale(100%) brightness(58%);
  }

  #tactics-limit-radio1:checked ~ .ability-categories .ability-icon-header label #action-ability,
  #tactics-limit-radio2:checked ~ .ability-categories .ability-icon-header label #reaction-ability,
  #tactics-limit-radio3:checked ~ .ability-categories .ability-icon-header label #support-ability,
  #tactics-limit-radio4:checked ~ .ability-categories .ability-icon-header label #movement-ability {
    filter: grayscale(0%) brightness(100%);
  }

  .mp-speed-jp {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tactics-tilde {
    width: 96px;
    height: 20px;
  }

  .tilde-ability {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* Ability Descriptions */
  .ability-description {
    display: none;
    visibility: hidden;
  }

  .ability-list li:hover + .ability-description {
    display: block;
    visibility: visible;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -150%);
    z-index: 1000;
  }

  .limit-definition-container {
    position: fixed;
    display: none;
    visibility: hidden;
    z-index: 500;
    width: 384px;
    top: 5em;
  }

  .limit-definition-header {
    position: absolute;
    top: -28px;
    left: 2px;
    z-index: 10;
    padding: 0;
    margin: 0;
  }

  #tactics-radio3:checked ~ .tactics-menu ul #tactics-label3:hover + .limit-definition-container {
    display: block;
    visibility: visible;
  }

  #tactics-job-description {
    width: 456px;
  }

  #tactics-braver {
    width: 384px;
  }

  #tactics-cross-slash {
    width: 472px;
  }

  #tactics-blade-beam {
    width: 394px;
  }

  #tactics-climhazzard {
    width: 452px;
  }

  #tactics-meteorain {
    width: 388px;
  }

  #tactics-finishing-touch {
    width: 432px;
  }

  #tactics-omnislash, #tactics-cherry-blossom {
    width: 374px;
  }

  #tactics-counter-tackle {
    width: 242px;
  }

  #tactics-equip-axe {
    width: 252px;
  }

  #tactics-monster-skill {
    width: 396px;
  }

  #tactics-defend {
    width: 278px;
  }

  #tactics-gained-jp-up {
    width: 368px;
  }

   /* Radio Button Styles */
   input[type="radio"] {
    display: none;
  }

  @-moz-document url-prefix() {
    .lv-points-grid {
      bottom: -0.757575757vw;
    }

    #brave-faith-points {
      bottom: -1.818181818vw;
    }
  }

}

@-moz-document url-prefix() {
  
  @media screen and (max-width: 930px) {

    .tactics-job-header, .job-ability-header {
      top: 27px;
      z-index: -1;
    }

    .job-categories, .ability-categories {
      position: relative;
      top: 0px;
      z-index: 10;
    }

    .job-header-font {
      position: relative;
      top: 5px;
    }

    .limit-definition-header {
      position: absolute;
      top: -8px;
      left: 2px;
    }

  }

}