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;

}
}