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

.maincontainer {
overflow: hidden;
background-color: #9de39d;
color: #0c4f0c;
border: groove 5px white;
width: 84%;
}
.box {
width: 200px;
height: 20px;
border: 1px solid #0c4f0c;
font-size: 80%;
color: #0c4f0c;
background-color: #9de39d;
border-radius: 5px;
}
.box1 {
width: 50px;
height: 20px;
font-size: 100%;
border: 1px solid #0c4f0c;
color: #0c4f0c;
background-color: #9de39d;
border-radius: 5px;
}
.box2 {
width: 150px;
height: 20px;
font-size: 100%;
border: 1px solid #0c4f0c;
color: #0c4f0c;
background-color: #9de39d;
border-radius: 5px;
}
.boxsmall {
width: 50px;
height: 20px;
border: 1px solid white;
font-size: 80%;
color: #9de39d;
background-color: #0c4f0c;
border-radius: 5px;
}
.boxsmall1 {
width: 50px;
height: 20px;
border: 1px solid white;
font-size: 100%;
color: #9de39d;
background-color: #0c4f0c;
border-radius: 5px;
}
.boxsmall2 {
width: 150px;
height: 20px;
border: 1px solid white;
font-size: 100%;
color: #9de39d;
background-color: #0c4f0c;
border-radius: 5px;
}
.but {
  background-color: #0c4f0c;
  border: 2px solid #0c4f0c;
  border-radius: 25px;
  color: #9de39d;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 80%;
  transition-duration: 0.4s;
  cursor: pointer;
}
.but {
  background-color: #0c4f0c; 
  color: #9de39d; 
}
.but:hover {
  background-color: #9de39d;
  color: #0c4f0c;
}
.btn {
  background-color: white;
  border: 2px solid black;
  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: white; 
  color: black; 
}
.btn1:hover {
  background-color: black;
  color: white;
}
.tab {
overflow: hidden;
border: none;
}
/* Style the buttons inside the tab */
.tab button {
background-color: #9de39d;
color: #0c4f0c;
border: 2px solid #9de39d;
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 #9de39d;
background-color: #0c4f0c;
color: #9de39d;
}
/* Create an active/current tablink class */
.tab button.active {
border: 2px solid black;
background-color: #9de39d;
color: #0c4f0c;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 6px;
border: none;
border-top: none;
}
.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;
}
.button {
  background-color: inherit;
  border: none;
  border-radius: 25px;
  color: orange;
  font-family: 'Nunito', 'Segoe UI', 'Helvetica', 'Arial';
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 90%;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: inherit;
  border-radius: 25px;
  color: orange; 
  border: none;
}
.button1:hover {
  border-radius: 25px;
  background-color: inherit;
  color: lightgreen;
}
.butt {
  background-color: inherit;
  border: none;
  color: lightgreen;
  font-family: 'Nunito', 'Segoe UI', 'Helvetica', 'Arial';
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 100%;
  transition-duration: 0.4s;
  cursor: pointer;
}
.butt1 {
  background-color: inherit; 
  color: lightgreen; 
  border: none;
}
.butt1:hover {
  background-color: inherit;
  color: orange;
}
.butfix {
  background-color: inherit;
  border: none;
  color: darkgreen;
  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: darkgreen; 
  border: none;
}
.butfix1:hover {
  background-color: darkgreen;
  border-radius: 25px;
  color: lightgreen;
}
.textcontainer {
width: 84%;
font-size: 120%;
} 
.roster {
border: hidden;
border-collapse: collapse;
text-align: center;
width: 90%;
}
.tablemon {
    width: 50%;
    padding: 5px;
    text-align: center;
    border: 3px solid #0c4f0c;
}
.table1 {
width: 80%;
text-align: center;
}
.tablepos {
width: 50%;
}
.table30 {
width: 30%;
}
.table40 {
width: 40%;
}
.table50 {
width: 50%;
}
.table60 {
width: 60%;
}
.table70 {
width: 70%;
border: none;
border-collapse: collapse;
text-align: center;
}
.roster {
border: none;
text-align: center;
width: 70%;
}
.history {
border: 1px solid;
text-align: center;
width: 40%;
}
.writing {
    font-size: 100%;
}
.kits {
border: none;
text-align: center;
margin-left: 0px;
width: 65%;
}
.blink {
animation: blinker 1.5s linear infinite;
color: red;
font-family: sans-serif;
}
.accordion {
cursor: pointer;
width: 25%;
padding: 8px;
border: none;
text-align: center;
outline: none;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: inherit;
overflow: hidden;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
#para {
background-color: #0c4f0c;
color: #9de39d;
display: inline;
border: 4px solid #0c4f0c;
border-radius: 10px;
padding: 2px;
font-size: 120%;
}
#head {
background-color: navy;
color: #aed6f1;
display: inline;
border: 4px solid #aed6f1;
border-radius: 10px;
padding: 2px;
font-size: 100%;
}
#fix {
background-color: navy;
color: #aed6f1;
display: inline;
border: 4px solid #aed6f1;
border-radius: 10px;
padding: 2px;
font-size: 90%;
}
#title {
background-color: #0c4f0c;
color: #9de39d;
display: inline;
border: 5px solid #0c4f0c;
border-radius: 10px;
padding: 2px;
font-size: 150%;
font-weight: bold;
}
#blink {
font-size: 20px;
font-weight: bold;
color: #2d38be;
transition: 0.05s;
}
        @media only screen and (max-width: 1280px) {
.textcontainer {
font-size: 100%;
}
.writing {
    font-size: 80%;
}
.hidelarge {
display: none; }}

@media only screen and (max-width: 1024px) {
.textcontainer {
font-size: 100%;
} 
.roster {
width: 90%;
}
.kits {
border: none;
text-align: center;
margin-left: 0px;
width: 70%;
}
.writing {
    font-size: 80%;
}
.roster {
width: 75%;
}
.tablemon {
    width: 60%;
    border: 3px solid;
}
.tablepos {
width: 60%;
}
.accordion {
width: 35%;
}
#title {
border: 3px solid black;
}
.hidemed {
display: none; }
}
@media only screen and (max-width: 900px) {
.maincontainer {
width: 88%;
}
.textcontainer {
width: 88%;
font-size: 80%;
} 
.tablemon {
    width: 60%;
    border: 2px solid;
}
.table1 {
width: 90%;
}
.tablepos {
width: 70%;
}
.table30 {
width: 40%;
}
.table40 {
width: 50%;
}
.table50 {
width: 60%;
}
.table60 {
width: 70%;
}
.history {
width: 60%;
}
.roster {
width: 94%;
}
.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) {
.maincontainer {
border: solid 2px #1f618d;
width: 90%;
}
.textcontainer {
width: 90%;
font-size: 50%;
} 
.roster {
width: 90%;
}
.tablemon {
    width: 80%;
    border: 1px solid;
}
.tablepos {
width: 80%;
}
.table30 {
width: 50%;
}
.table40 {
width: 60%;
}
.table50 {
width: 70%;
}
.table60 {
width: 80%;
}
.table70 {
width: 80%;
}
.roster {
width: 96%;
}
.accordion {
width: 60%;
}
.history {
width: 80%;
}
.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) {
.maincontainer {
border: solid 2px #1f618d;
width: 96%;
}
.textcontainer {
width: 96%;
font-size: 35%;
} 
.tab button {
padding: 3px 3px;
font-size: 10px;
}
.roster {
width: 95%;
}
.tablemon {
    width: 80%;
    border: 1px solid;
}
.table1 {
width: 94%;
} 
.tablepos {
width: 90%;
}
.table30 {
width: 60%;
}
.table40 {
width: 70%;
}
.table50 {
width: 80%;
}
.table60 {
width: 90%;
}
.table70 {
width: 95%;
}
.roster {
width: 96%;
}
.accordion {
width: 80%;
}
.history {
width: 95%;
font-size: 75%;
}
.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) {
.maincontainer {
border: solid 2px #1f618d;
width: 98%;
}
.textcontainer {
width: 98%;
font-size: 25%;
} 
.tab button {
padding: 2px 2px;
font-size: 10px;
}
.tablemon {
    width: 80%;
    border: 1px solid;
}
.table1 {
width: 90%;
}
.tablepos {
width: 90%;
}
.table30 {
width: 65%;
}
.table40 {
width: 75%;
}
.table50 {
width: 85%;
}
.table60 {
width: 95%;
}
.table70 {
width: 100%;
}
.roster {
width: 98%;
}
.history {
width: 100%;
font-size: 70%;
}
.accordion {
width: 90%;
}
.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;
}}