body {
    background: #ffffff url("https://dazoctaron.co.uk/OFMC/Logos/OFMC_logo_BlS_sml.jpg") repeat;
    background-color: rgba(0, 0, 0, 0.3);
    font-family: Tahoma, sans-serif;
}

h1 { font-size: 250% }
h2 { font-size: 200% }
h3 { font-size: 150% }
h4 { font-size: 125% }
h5 { font-size: 100% }
h6 { font-size: 80% }

textarea {
  width: 40%;
  height: 500px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
  background-color: #fbb6b6;
  color: black;
  font-size: 14px;
  resize: none;
}

.maincontainer {
    overflow: hidden;
    background-color: #fbb6b6;
    color: black;
    border: groove 5px white;
    width: 84%;
    display: block !important;
}

.mainsection {
    overflow: hidden;
    background-color: #fbb6b6;
    color: black;
    border: groove 5px white;
    height: 74vh;
    width: 84%;
    display: block !important;
}

.section {
    overflow: hidden;
    background-color: #fbb6b6;
    color: #0c4f0c;
    border: groove 5px white;
    width: 84%;
    display: block !important;
}

.textcontainer { width: 84%; font-size: 120%; } 
.plypos { height: 18px; width: 20px }

#para {
    background-color: black;
    color: #fbb6b6;
    display: inline;
    border: 4px solid black;
    border-radius: 10px;
    padding: 2px;
    font-size: 120%;
}
#head {
    background-color: black;
    color: #fbb6b6;
    display: inline;
    border: 4px solid white;
    border-radius: 10px;
    padding: 2px;
    font-size: 100%;
}
#fix {
    background-color: black;
    color: #fbb6b6;
    display: inline;
    border: none;
    border-radius: 10px;
    padding: 2px;
    font-size: 90%;
}
#title {
    background-color: black;
    color: #fbb6b6;
    display: inline;
    border: 5px solid white;
    border-radius: 10px;
    padding: 2px;
    font-size: 150%;
    font-weight: bold;
}

.but {
    background-color: black;
    border: 2px solid black;
    border-radius: 25px;
    color: #fbb6b6;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 80%;
    transition-duration: 0.4s;
    cursor: pointer;
}
.but:hover {
    background-color: #fbb6b6;
    color: black;
    border: 2px solid black;
}

.box { width: 200px; height: 20px; border: 1px solid black; font-size: 80%; color: black; background-color: #fbb6b6; border-radius: 5px; }
.boxsmall { width: 50px; height: 20px; border: 1px solid black; font-size: 80%; color: black; background-color: #fbb6b6; border-radius: 5px; }
.boxagg { width: 50px; height: 20px; border: 1px solid #fbb6b6; font-size: 80%; color: #fbb6b6; background-color: black; border-radius: 5px; }

.btn { background-color: #fbb6b6; border: 2px solid white; border-radius: 25px; color: black; padding: 5px 5px; text-align: center; text-decoration: none; display: inline-block; font-size: 80%; transition-duration: 0.4s; cursor: pointer; }
.btn1 { background-color: #fbb6b6; color: black; }
.btn1:hover { background-color: black; color: #fbb6b6; border: 2px solid white; }

.btncup { background-color: black; border: none; border-radius: 25px; color: #fbb6b6; padding: 5px 5px; text-align: center; text-decoration: none; display: inline-block; font-size: 60%; transition-duration: 0.4s; cursor: pointer; }
.btncup1 { background-color: black; color: #fbb6b6; }
.btncup1:hover { background-color: #fbb6b6; color: black; }

.butfix { background-color: inherit; border: none; color: black; border-radius: 25px; font-family: 'Nunito', 'Segoe UI', 'Helvetica', 'Arial'; text-align: center; text-decoration: none; display: inline-block; font-size: 85%; transition-duration: 0.4s; cursor: pointer; }
.butfix1 { background-color: inherit; border-radius: 25px; color: black; border: none; }
.butfix1:hover { background-color: black; border-radius: 25px; color: #fbb6b6; }

/* Tabs */
.tab { overflow: hidden; border: none; }
.tab button { background-color: #fbb6b6; color: black; border: 2px solid #fbb6b6; border-radius: 25px; outline: none; cursor: pointer; padding: 5px 5px; transition: 0.3s; font-size: 80%; }
.tab button:hover { border: 2px solid #fbb6b6; background-color: black; color: #fbb6b6; }
.tab button.active { border: 2px solid black; background-color: #fbb6b6; color: black; }
.tabcontent { display: none; padding: 6px 6px; border: none; border-top: none; }

/* Tables */
.table70 { width: 70%; border: none; border-collapse: collapse; text-align: center; }
.tablemon { width: 50%; padding: 5px; text-align: center; border: 3px solid black; }
.table1 { width: 80%; text-align: center; }
.tablepos { width: 70%; }
.roster { border: hidden; border-collapse: collapse; text-align: center; width: 90%; }
.history { border: 1px solid; text-align: center; width: 70%; }
.squad { font-size: 95%; }
.writing { font-size: 100%; }
.kits { border: none; text-align: center; margin-left: 0px; width: 65%; }

/* Images for states/flags */
.stateimg { width: 20px; height: 17px; }
.flagimg { width: 18px; height: 13px; }

/* Columns hidden/shown by class */
table td.hidenormal, table th.hidenormal { display: table-cell; }
table td.hidevsml, table th.hidevsml { display: none; }

/* Media queries with original breakpoints */
@media only screen and (max-width: 1280px) {
    .textcontainer { font-size: 100%; }
    .squad { font-size: 85%; }
    .writing { font-size: 80%; }
    .hidelarge { display: none; }
}

/* Hide columns on screens smaller than 700px */
@media only screen and (max-width: 700px) {
    .hide700 {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    .textcontainer { font-size: 100%; } 
    .kits { width: 70%; }
    .squad { font-size: 85%; }
    .writing { font-size: 80%; }
    .roster { width: 90%; }
    .tablemon { width: 60%; border: 3px solid; }
    .tablepos { width: 70%; }
    .history { width: 70%; }
    #title { border: 3px solid black; }
    .hidemed { display: none; }
    .stateimg { width: 17px; height: 15px; }
    .flagimg { width: 15px; height: 10px; }
}

@media only screen and (max-width: 900px) {
    textarea { width: 50%; }
    .mainsection { width: 88%; }
    .section { width: 88%; }
    .plypos { height: 12px; width: 14px }
    .textcontainer { width: 88%; font-size: 80%; } 
    .history { width: 70%; }
    .roster { width: 94%; }
    .tablemon { width: 60%; border: 2px solid; }
    .table1 { width: 90%; font-size: 90%; }
    .tablepos { width: 70%; }
    .squad { font-size: 70%; }
    .writing { font-size: 70%; }
    .accordion { width: 45%; }
    .kits { width: 80%; }
    .stateimg { width: 14px; height: 12px; }
    .flagimg { width: 12px; height: 8px; }
    #title { border: 2px solid black; }
    .hidemed { display: none; }
}

@media only screen and (max-width: 780px) {
    .mainsection { width: 90%; }
    .section { width: 90%; }
    .plypos { height: 8px; width: 9px }
    .textcontainer { width: 90%; font-size: 50%; } 
    .roster { width: 94%; }
    .table70 { width: 80%; }
    .tablemon { width: 80%; border: 1px solid; }
    .tablepos { width: 80%; }
    .accordion { width: 60%; }
    .history { width: 80%; }
    .squad { font-size: 65%; }
    .writing { font-size: 50%; }
    .kits { width: 80%; font-size: 80%; }
    .hidemed { display: none; }
    .hidesml { display: none; }
    .stateimg { width: 11px; height: 9px; }
    .flagimg { width: 10px; height: 7px; }
    #title { border: 2px solid black; }
}

@media only screen and (max-width: 600px) {
    textarea { width: 55%; font-size: 12px; }
    .mainsection { width: 96%; }
    .section { width: 96%; }
    .plypos { height: 6px; width: 7px }
    .textcontainer { width: 96%; font-size: 35%; } 
    .tab button { padding: 3px 3px; font-size: 10px; }
    .roster { width: 96%; }
    .table70 { width: 95%; }
    .tablemon { width: 80%; border: 1px solid; }
    .table1 { width: 94%; font-size: 75%; }
    .tablepos { width: 90%; }
    .accordion { width: 80%; }
    .history { width: 95%; font-size: 75%; }
    .squad { font-size: 60%; }
    .writing { font-size: 50%; }
    .kits { width: 90%; font-size: 75%; }
    .hidevsml { display: none; }

    /* Hide/show columns */
    table td.hidenormal, table th.hidenormal { display: none; }
    table td.hidevsml, table th.hidevsml { display: table-cell; }

    /* Shrink state/flag images 25% */
    .stateimg { width: 9px; height: 7px; }
    .flagimg { width: 8px; height: 5px; }

    .hidemed { display: none; }
    .hidesml { display: none; }
    #title { border: 2px solid black; }
}

@media only screen and (max-width: 400px) {
    textarea { width: 70%; font-size: 12px; }
    .mainsection { width: 98%; }
    .section { width: 98%; }
    .plypos { height: 5px; width: 6px }
    .textcontainer { width: 98%; font-size: 25%; } 
    .tab button { padding: 2px 2px; font-size: 10px; }
    .table70 { width: 100%; }
    .tablemon { width: 80%; border: 1px solid; }
    .table1 { width: 90%; font-size: 70%;}
    .tablepos { width: 90%; }
    .roster { width: 98%; }
    .history { width: 100%; font-size: 70%; }
    .accordion { width: 90%; }
    .squad { font-size: 40%; }
    .writing { font-size: 30%; }
    .kits { width: 90%; font-size: 60%; }
    .hidevsml { display: none; }

    table td.hidenormal, table th.hidenormal { display: none; }
    table td.hidevsml, table th.hidevsml { display: table-cell; }
    .hidemed { display: none; }
    .hidesml { display: none; }
    .hidextrm { display: none; }
    #title { border: 1px solid black; }
}