body{

  background-color: black;

  

}



#background{

 background: url(pictures/background.png) ;

 background-size: 100%;

  

}



#container{

 width: 80%;

 border: 3px solid red;

 border-radius: 0.50em;

 margin-left:10%;

 background-color: white;



}



.main-content{

 padding-top: 20px;

 margin-bottom: 0px;

 width: 100%;

 background: url(pictures/samurai.jpg) repeat ;

 background-size: 100% ; 

 border-radius: 0.50em;

 



}



#clublogo {

 width: 100%;

 background-color: white;

 margin-top: 5px;

}



#header{

 background-color: white;

}





#clublogo img{

  width: 50%;

  height: auto;

  margin-left: 25%;

}





/* MENU SECTION */





#show-menu {

  display: none;

}



.main-menu{

  margin-bottom: 0px;

}



.display-menu{

  display: none;

}



#menu {

  margin-top: 0px;

  width: 100%;

  background-color: black;

  

}



#menu ul{

  padding-top: 10px;

  padding-bottom: 10px;

  margin-top: 0px;

  text-align: center;

}



#menu li{

  text-decoration: none;

  display: inline;

  font-family: "Lumanosimo";

}



#menu li a:link, #menu li a:visited {

  margin-left: 25px;

  font-size: 1.5em;

  text-decoration: none;

  color: red;

  

}





/* end of menu area */



#contact {

  width: 100%;

  background-color: red;

  text-align: center;

  font-size: 1em;

  color: white;

  margin-top: 0px;

  font-family: "Lumanosimo";

  

}



.item{

  width: 40%;

  height: auto;

  float: left;

  margin-left: 5%;

  margin-top: 25px;

  margin-bottom: 20px;

  font-size: 1.5em;

  font-family: "Lumanosimo";

  background-color: white;

  border-radius: 0.50em;

  border: 3px solid red;

}



.h2 {

  margin-top: 15px;

  font-size:  1.5em;

  text-align: center;



}



.h3{

  margin-top: 5px;

  font-size: 1em;

  text-align: center;



}



.item h2{

  margin-top: 10px;

  font-size:  1.5em;

  text-align: center;



}



.item h3{

  margin-top: 5px;

  font-size: 1.3em;

  text-align: center;



}





.item p{

  font-size: 1em;

  padding-left:15px;

  padding-right:15px;



}



.item img{

 

 width: 100%;

 height: auto; 

 border-radius: 0.5em;



}



#footer-section {

  clear: both;

  width: 100%;

  background-color: black;

  margin-top: 10px;

  border-radius: 0.50em;



}





#footer-section ul {

  list-style-type: none;

  position: relative;

  padding-top: 10px;

  padding-left: 5px;

  

}



#footer-section li {

  padding-bottom: 10px;

  padding-left: 5px;

}



#footer-section li a {

  

  height: 10px;

  line-height: 20px;

  width: 100%;

  text-align: left;

  color: white;

  text-decoration: none;

  border: 2px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  

  

}



#footer-section img{

  float: right;

  width: 110px;

  height: auto;

  margin-right: 20px;

  margin-top: 5px;

}



.footer-menu{

  margin-bottom: 0px;

}





/* box color */





.item:nth-child(2n) {

  border: 3px solid yellow;

  border-radius: 0.50em;

  



}



.item:nth-child(3n) {

  border: 3px solid orange;

  border-radius: 0.50em;



}



.item:nth-child(4n) {

  border: 3px solid green;

  border-radius: 0.50em;



}



.item:nth-child(5n) {

  border: 3px solid blue;

  border-radius: 0.50em;



}



.item:nth-child(6n) {

  border: 3px solid brown;

  border-radius: 0.50em;



}



.item:nth-child(7n) {

  border: 3px solid black;

  border-radius: 0.50em;

}



/* end box color */





.style1{

  color: red;

  font-weight: bold;

  font-size: 1em;



}



.style2{

  color: blue;

  font-size: 1em;

  

}



.style4{

  color: red;

  font-size: 1em;

  

}





@media only screen and (max-width: 500px) {





body{

 margin: 0px;

}



#background{





}



#container{

 width: 97%;

 margin-left:0%;

 margin-right: 1%;

 



}



.main-content{

 width: 100%;

 background: none;

 background-color: lightgrey;

}



#clublogo {

 width: 100%;



}



#clublogo img{

  width: 100%;

  height: auto;

  border-radius: 0.50em;

  margin-left: 0px;

}



#header h1{

 font-size: 2em;

 text-align: center;

 margin-top: 0px;



}



#header h5{

 text-align: center;

 font-size: 1.2em;

}



/* MENU SECTION */



#show-menu {

  opacity: 0;

  padding-bottom: 0px;

}





#show-menu:checked ~ #menu {

  display: block;

}



.display-menu {

  display: block;

  width: 90;

  margin-left: 10px;

  margin-right: 10px;

  color: red;

  background-color: #000000;

  text-align: center;

  padding: 10px 0;

  border: 2px solid black;

  border-radius: 0.50em;

}



#menu {

  

  display: none;

  background-color: white;

  margin-top: 10px;

}



#menu ul {

  list-style-type: none;

  position: relative;

  width: 100%;

  margin: 0;

  padding: 0;

  

}





#menu li {

  display: inline-block;

  margin-bottom: 4px;

  width: 80%;

  background-color: black;

  border-style: solid;

  border-width: 1px;

  border-radius: 0.50em;

}



#menu li a:link, #menu li a:visited {

  display: block;

  height: 40px;

  line-height: 40px;

  margin-left: 0px;

  width: 100%;

  text-align: center;

  color: white;

  border: 2px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



#menu li a:hover {

  text-overflow: inherit;

  overflow: visible;

}





/* end of menu area */



#contact{

  margin-top: 5px;

}





.main-content-item {

  /* Marking the end of each main-content-item to aid readability. */

  border-bottom: thin solid grey;

  margin-bottom: 1em;

  padding: 1em;

}



.item{

  width: 90%;

  margin-left: 15px;

  margin-right: 15px;

  margin-top: 20px;

  

  font-size: 1.5em;

  background-color: white;



}



.item h2{

  margin-top: 5px;

  font-size:  1.5em;

  text-align: center;



}



.item h3{

  margin-top: 5px;

  font-size: 1.3em;

  text-align: center;



}





.item p{

  font-size: 1em;

  padding-left:5px;

  padding-right:5px;



}



.item img{

 

 width: 100%;

 height: auto; 

 border-radius: 0.5em;



}



.item ul{

  font-size: 24px;

}





#footer-section {

  width: 100%;

  background-color: black;

  margin-top: 10px;

  border-radius: 0.50em;



}





#footer-section ul {

  list-style-type: none;

  position: relative;

  padding-top: 10px;

  padding-left: 5px;

  

}



#footer-section li {

  padding-bottom: 10px;

  padding-left: 5px;

}



#footer-section li a {

  

  height: 10px;

  line-height: 20px;

  width: 100%;

  text-align: left;

  color: white;

  text-decoration: none;

  border: 2px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  

  

}



#footer-section img{

  float: right;

  width: 110px;

  height: auto;

  margin-right: 20px;

  margin-top: 5px;

}



.footer-menu{

  margin-bottom: 0px;

}



.style1{

  color: red;

  font-weight: bold;

  



}



.style2{

  color: blue;

  font-size: 1em;

}



.style4{

  color: red;

  font-size: 1em;

}



.item:nth-child(2n) {

  border: 3px solid yellow;

  border-radius: 0.50em;



}



.item:nth-child(3n) {

  border: 3px solid orange;

  border-radius: 0.50em;



}



.item:nth-child(4n) {

  border: 3px solid green;

  border-radius: 0.50em;



}



.item:nth-child(5n) {

  border: 3px solid blue;

  border-radius: 0.50em;



}



.item:nth-child(6n) {

  border: 3px solid brown;

  border-radius: 0.50em;



}



.item:nth-child(7n) {

  border: 3px solid black;

  border-radius: 0.50em;

}



#improve{

  font-size: 2em;

}



#techniques p{

  text-align: center;

  font-size: 16px;



}

}