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: khaki;
  color: black;
  font-size: 14px;
  resize: none;
}
.maincontainer {
overflow: hidden;
background-color: khaki;
color: black;
border: groove 5px white;
width: 84%;
}
.mainsection {
overflow: hidden;
background-color: khaki;
color: black;
border: groove 5px white;
height: 74vh;
width: 84%;
}
.section {
overflow: hidden;
background-color: khaki;
color: #0c4f0c;
border: groove 5px white;
width: 84%;
}
.textcontainer {
width: 84%;
font-size: 120%;
} 
.plypos {
height: 18px;
width: 20px
}
#para {
background-color: black;
color: khaki;
display: inline;
border: 4px solid black;
border-radius: 10px;
padding: 2px;
font-size: 120%;
}
#head {
background-color: black;
color: khaki;
display: inline;
border: 4px solid white;
border-radius: 10px;
padding: 2px;
font-size: 100%;
}
#fix {
background-color: black;
color: khaki;
display: inline;
border: none;
border-radius: 10px;
padding: 2px;
font-size: 90%;
}
#title {
background-color: black;
color: khaki;
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: khaki;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 80%;
  transition-duration: 0.4s;
  cursor: pointer;
}
.but {
  background-color: black; 
  color: khaki; 
}
.but:hover {
  background-color: khaki;
  color: black;
  border: 2px solid black;
}
.box {
width: 200px;
height: 20px;
border: 1px solid black;
font-size: 80%;
color: black;
background-color: khaki;
border-radius: 5px;
}
.boxsmall {
width: 50px;
height: 20px;
border: 1px solid black;
font-size: 80%;
color: black;
background-color: khaki;
border-radius: 5px;
}
.boxagg {
width: 50px;
height: 20px;
border: 1px solid khaki;
font-size: 80%;
color: khaki;
background-color: black;
border-radius: 5px;
}

.btn {
  background-color: khaki;
  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: khaki; 
  color: black; 
}
.btn1:hover {
  background-color: black;
  color: khaki;
  border: 2px solid white;
}
.btncup {
  background-color: black;
  border: none;
  border-radius: 25px;
  color: khaki;
  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: khaki; 
}
.btncup1:hover {
  background-color: khaki;
  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: khaki;
}
.tab {
overflow: hidden;
border: none;
}
/* Style the buttons inside the tab */
.tab button {
background-color: khaki;
color: black;
border: 2px solid khaki;
border-radius: 25px;
outline: none;
cursor: pointer;
padding: 5px 5px;
transition: 0.3s;
font-size: 80%;
}
/* Change background color of buttons on hover */
.tab button:hover {
border: 2px solid khaki;
background-color: black;
color: khaki;
}
/* Create an active/current tablink class */
.tab button.active {
border: 2px solid black;
background-color: khaki;
color: black;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 6px;
border: none;
border-top: none;
}
.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%;
}



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

@media only screen and (max-width: 1024px) {
.textcontainer {
font-size: 100%;
} 
.kits {
border: none;
text-align: center;
margin-left: 0px;
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; }
}
@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: 60%;
}
.roster {
width: 94%;
}
.tablemon {
    width: 60%;
    border: 2px solid;
}
.table1 {
width: 90%;
}
.tablepos {
width: 70%;
}
.history {
width: 70%;
}
.squad {
font-size: 70%
}
.writing {
    font-size: 70%;
}
.accordion {
width: 45%;
}
.kits {
border: none;
text-align: center;
margin-left: 0px;
width: 80%;
}
#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 {
border: none;
text-align: center;
margin-left: 0px;
width: 80%;
font-size: 80%;
}
.hidemed {
display: none; }
.hidesml {
display: none; }
#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: 95%;
}
.table70 {
width: 95%;
}
.tablemon {
    width: 80%;
    border: 1px solid;
}
.table1 {
width: 94%;
}
.tablepos {
width: 90%;
}
.roster {
width: 96%;
}
.accordion {
width: 80%;
}
.history {
width: 95%;
font-size: 75%;
}
.squad {
font-size: 60%
}
.writing {
    font-size: 50%;
}
.kits {
border: none;
text-align: center;
margin-left: 0px;
width: 90%;
font-size: 75%;
}
.hidemed {
display: none; }
.hidesml {
display: none; }
.hidevsml {
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%;
}
.tablepos {
width: 90%;
}
.roster {
width: 98%;
}
.history {
width: 100%;
font-size: 70%;
}
.accordion {
width: 90%;
}
.squad {
font-size: 40%
}
.writing {
    font-size: 30%;
}
.kits {
border: none;
text-align: center;
margin-left: 0px;
width: 90%;
font-size: 60%;
}
.hidemed {
display: none; }
.hidesml {
display: none; }
.hidevsml {
display: none; }
.hidextrm {
display: none; }
#title {
border: 1px solid black;
}}