@media only screen and (max-width: 1200px) {
    body {
        font-family: "Segoe UI", Times, serif;
    }
    
    h1 {
        font-family: "Segoe UI", Times, serif;
    }
    
    h2 {
        font-family: "Segoe UI", Times, serif;
    }
    
    h3 {
        font-family: "Segoe UI", Times, serif;
        font-size: 1em;
        margin-block-start: 2px;
        margin-block-end: 2px;
    }
    
    a {
        font-family: "Segoe UI", Times, serif;
        color: black;
        font-size: 1em;
    }

        .statusWrapper {
            width: 100%;
            height: auto;
            display: flex;
            justify-content: center;
        }

        .status {
            width: 75%;
            max-width: 20em;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;;
            border-width: 1px;
            border-style: solid;
        }
        
        .topWrapper {
            width: 100%;
            display: flex;
            justify-content: center;
        }
    
        .logo {
            width: 40%;
            height: 8em;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mainWrapper {
            display: flex;
            flex-direction: column;
        }
    
        .navWrapper {
            width: 100%;
            height: 20%;
            display: flex;
        }
    
        .navigation {
            width: 100%;
            border-width: 1px;
            border-style: solid;
            text-align: center;
            font-size:x-small;
            display: flex;
            justify-content: space-around;
        }
    
        .gameWrapper {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            
        }
    
        .gameWindow {
            width: 100%;
            border-width: 1px;
            border-style: solid;
            text-align: center;
            margin-top: 3px;
            padding-bottom: 1em;
        }

        .phWrapper {
            display: none;
        }

        .footerWrapper {
            display: flex;
            justify-content: center;
            margin-top: 5px;
        }

        .footer {
            text-align: center;
        }

        input[type=text], input[type=password], input[type=email] {
            width: 75%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
        }
    
        input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
            border: 1px solid #555;
        }
    
        input[type=button] {
            border: 1px solid;
            padding: 8px 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        button {
            border: 1px solid;
            padding: 8px 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .button {
            border: 1px solid;
            padding: 8px 16px;
            margin: 4px 2px;
            cursor: pointer;
            background-color: #F0F0F0;
            text-decoration: none;
        }

        .deleteButton button {
            border: 1px solid;
            padding: 4px 8px;
            margin: 4px 2px;
            cursor: pointer;
        }
    
        .gameBar {
            display: flex;
            justify-content: center;
            gap: 1em;
            flex-direction: row;
            flex-wrap: wrap;
            margin-bottom: 1em;
        }
    
        .characterBox {
            display: flex;
            flex-direction: column;
            justify-content: end;
            margin: 1px;
            height: 8em;
            width: 8em;
            border: 1px solid;
        }

        .charPage {
            display: none;
        }
    
        .charPage.active {
            display: block;
        }
        
        .charButton {
            display: none;
        }
    
        .charButton.active {
            display: inline;
        }

        .submitButton {
            display: none;
        }
    
        .submitButton.active {
            display: inline;
        }

        .classDesc {
            height: 13em;
            border: none;
        }

        .profileWindow {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    
        .profileInfo {
            
            text-align: start;
            margin-left: 1em;
        }
    
        .profileStats {
           
            margin: 1em;
        }
    
        .profileInventory {
            border: 1px solid;
            margin-left: 1em;
            margin-right: 1em;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
    
        .skillsTable {
            display: none;
        }

        .mobileSkillsTable {
            width: 10em;
            margin-left: auto;
            margin-right: auto;
        }

        .mobileSkillsTable td {
            border: 1px solid;
            border-collapse: collapse;
            text-align: center;
        }
    
        .skillsTableHeading {
            width: 100%;
            text-align: left;
            text-decoration: underline;

        }
    
        .itemBox {
            margin: 1em;
            height: 8em;
            width: 6em;
            border: 1px solid;
        }
    
        .itemBox i {
            font-size: 15px;
        }

        .jobwindow {
            display: flex;
            align-items: center;
            flex-direction: column;
        }
        .jobinfo {
            border: 1px solid;
            width: 10em;
            height: 4em;
            margin-top: 1em;
            margin-bottom: 1em;
        }

        input[type=number] {
            width: 5em;
            height: 2em;
            -moz-appearance:textfield;
            text-align: center;
        }

        .red {
            background-color: #EC3B43;
        }
    
        .green {
            background-color: #00CC87;
        }

        .gangWindow {
            display: flex;
            align-items: center;
            flex-direction: column;
            height: 35em;
            overflow: auto;
        }
    
        .gangTable {
            border: 1px solid;
            border-collapse: collapse;
            text-align: left;
            width: 65%;
        }
    
        .gangTable th {
            border: 1px solid;
            border-collapse: collapse;
            text-align: left;
            width: 30%;
        }
    
        .gangTable td {
            border: 1px solid;
            border-collapse: collapse;
            text-align: left;
        }
    
        .memberListTable {
            margin-top: 1em;
            border: 1px solid;
            border-collapse: collapse;
            text-align: left;
            width: 75%;
        }
    
        .memberListTable th, td {
            border: 1px solid;
            border-collapse: collapse;
            text-align: left;
        }
    
        .gangListTable {
            border: 1px solid;
            border-collapse: collapse;
            text-align: left;
            width: 75%;
        }

        .storeWindow {
            display: flex;
            align-items: center;
            flex-direction: column;
        }
    
        .storeTable {
            width: 90%;
            height: 25em;
            margin-top: 1em;
            margin-bottom: 1em;
            overflow: auto;
        }
    
        .storeTable table {
            width: 100%;
            border: 1px solid;
            border-collapse: collapse;
            text-align: left;
        }
    
        .storeTable th {
            border-bottom: 1px solid;
        }
    
        .storeButton {
            border: 1px solid;
            padding: 4px 8px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .townWindow {
            display: flex;
            align-items: center;
            flex-direction: column;
        }
    
        .townGraphic {
            border: 1px solid;
            width: 90%;
            height: 15em;
            margin-top: 1em;
            margin-bottom: 1em;
            
        }

        .townGraphic img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

    
        .townButtons {
            display: flex;
            justify-content: space-around;
        }

        .aboutUs {
            margin: 1em;
        }
}


@media only screen and (min-width: 1200px) { 
    body {
        font-family: "Segoe UI", Times, serif;
    }

    h1 {
        font-family: "Segoe UI", Times, serif;
    }

    h2 {
        font-family: "Segoe UI", Times, serif;
    }

    h3 {
        font-family: "Segoe UI", Times, serif;
        font-size: 1em;
    }

    a {
        font-family: "Segoe UI", Times, serif;
        color: black;
    }


    .statusWrapper {
        width: 80%;
        height: auto;
        display: flex;
        justify-content: right;
    }

    .status {
        font-size: 12px;
        width: 20%;
        max-width: 20em;
        height: auto;
        display: flex;
        align-items: left;
        border-width: 5px;
        border-style: solid;
        padding-left: 1em;
        padding-right: 1em;
    }

    .topWrapper {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .logo {
        width: 40%;
        height: 8em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mainWrapper {
        display: flex;
    }

    .navWrapper {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: right;
    }

    .navigation {
        width: 40%;
        height: 20em;
        border-width: 5px;
        border-style: solid;
        text-align: center;
    }

    .gameWrapper {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
    }

    .gameWindow {
        width: 90%;
        height: 40em;
        border-width: 5px;
        border-style: solid;
        text-align: center;
        
    }

    .phWrapper {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: left;
    }

    .phWindow {
        width: 40%;
        height: 20em;
        border-width: 5px;
        border-style: solid;
        text-align: center;
    }

    .footerWrapper {
        display: flex;
        justify-content: center;
    }

    .footer {
        text-align: center;
        margin: auto;
    }

    input[type=text], input[type=password], input[type=email] {
        width: 50%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
    }

    input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
        border: 3px solid #555;
    }

    .charButton {
        border: 1px solid;
        padding: 16px 32px;
        margin: 4px 2px;
        cursor: pointer;
    }

    .submitButton {
        border: 1px solid;
        padding: 16px 32px;
        margin: 4px 2px;
        cursor: pointer;
    }


    button {
        border: 1px solid;
        padding: 16px 32px;
        margin: 4px 2px;
        cursor: pointer;
    }

    .button {
        border: 1px solid;
        padding: 16px 32px;
        margin: 4px 2px;
        cursor: pointer;
        background-color: #F0F0F0;
        text-decoration: none;
    }

    .deleteButton button {
        border: 1px solid;
        padding: 4px 8px;
        margin: 4px 2px;
        cursor: pointer;
    }

    .gameBar {
        display: flex;
        justify-content: flex-start;
    }

    .characterBox {
        display: flex;
        flex-direction: column;
        justify-content: end;
        margin: 0.3em;
        height: auto;
        width: 10em;
        border: 4px solid;
        font-size: 1vw;
    }

    .charPage {
        display: none;
    }

    .charPage.active {
        display: block;
    }
    
    .charButton {
        display: none;
    }

    .charButton.active {
        display: inline;
    }

    .submitButton {
        display: none;
    }

    .submitButton.active {
        display: inline;
    }

    .classDesc {
        height: 13em;
        border: none;
    }

    .specialSkills {
        display: flex;
        justify-content: space-around;
        height: 7em;
    }

    #specialNumber1, #specialNumber2, #specialNumber3, #specialNumber4, #specialNumber5, #specialNumber6, #specialNumber7 {
        height: 4em;
        width: 4em;
    }

    input[type=number] {
        width: 3em;
        height: 3em;
        -moz-appearance:textfield;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    .profileWindow {
        display: flex;
        justify-content: space-between;

    }

    .profileInfo {
        border: 0px solid;
        text-align: start;
        margin-left: 1em;
    }

    .profileStats {
        border: 0px solid;
        margin-right: 1em;
    }

    .profileInventory {
        border: 1px solid;
        margin-left: 1em;
        margin-right: 1em;
        display: flex;
        justify-content: center;
        flex-wrap:wrap;
        overflow:auto;
        width: 95%;
        height: 15em;
    }

    .mobileSkillsTable {
        display: none;
    }

    .skillsTable td {
        border: 1px solid;
        border-collapse: collapse;
        text-align: center;
        width: 2em;
    }

    .skillsTableHeading {
        width: 100%;
        text-align: left;
        text-decoration: underline;
    }

    .itemBox {
        margin: 1em;
        height: 10em;
        width: 25%;
        border: 1px solid;
    }

    .itemBox i {
        font-size: 12px;
    }

    .gangWindow {
        display: flex;
        align-items: center;
        flex-direction: column;
        height: 35em;
        overflow: auto;
    }

    .gangTable {
        border: 1px solid;
        border-collapse: collapse;
        text-align: left;
        width: 65%;
    }

    .gangTable th {
        border: 1px solid;
        border-collapse: collapse;
        text-align: left;
        width: 30%;
    }

    .gangTable td {
        border: 1px solid;
        border-collapse: collapse;
        text-align: left;
    }

    .memberListTable {
        margin-top: 1em;
        border: 1px solid;
        border-collapse: collapse;
        text-align: left;
        width: 75%;
    }

    .memberListTable th, td {
        border: 1px solid;
        border-collapse: collapse;
        text-align: left;
    }

    .gangListTable {
        border: 1px solid;
        border-collapse: collapse;
        text-align: left;
        width: 75%;
    }


    .joinButton {
        width: 98%;
        border: 1px solid;
        padding: 4px 8px;
        margin: 4px 2px;
        cursor: pointer;
    }

    .townWindow {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .townGraphic {
        border: 1px solid;
        width: 90%;
        height: 15em;
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .townGraphic img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: 25% 75%;
    }

    .townButtons {
        display: flex;
        justify-content: space-around;
    }

    .storeWindow {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .storeTable {
        width: 90%;
        height: 25em;
        margin-top: 1em;
        margin-bottom: 1em;
        overflow: auto;
    }

    .storeTable table {
        width: 100%;
        border: 1px solid;
        border-collapse: collapse;
        text-align: left;
    }

    .storeTable th {
        border-bottom: 1px solid;
    }

    .storeButton {
        border: 1px solid;
        padding: 4px 8px;
        margin: 4px 2px;
        cursor: pointer;
    }

    .skillButton {
        margin-top: 1em;
        border: 1px solid;
        height: 2em;
        width: 2em;
        cursor: pointer;
    }

    .red {
        background-color: #EC3B43;
    }

    .green {
        background-color: #00CC87;
    }

    .jobwindow {
        display: flex;
        align-items: center;
        flex-direction: column;
        overflow:auto;
        width: 100%;
        height: 30em;
    }

    .jobselect {
        display: block;
        width: 10em;
        height: 3em;
        margin: 1em;
        text-align: center;
    }
    
    .jobinfo {
        display: none;
    }

    .jobButton:hover + .jobinfo {
        display: block;
        border: 1px solid;
        width: 10em;
        height: 5em;
        margin-left: 11em;
        margin-top: -3em;
    }

    .jobDescription {
        margin-top: -2em;
        margin-bottom: 2em;
    }
    
    .expReward {
        margin: 1em;
    }

    .moneyReward {
        margin: 1em;
    }
    
    .aboutUs {
        height: 34em;
        width: 100%;
        overflow: auto;

    }

    textarea {
        width: 60%;
        height: 150px;
        padding: 12px 20px;
        box-sizing: border-box;
        border: 1px solid #000;
        resize: none;
        font-family: "Segoe UI", Times, serif;
      }
}