@charset "utf-8";

* {margin: 10;
   padding: 0;
}

body {background-color: white;
}

.btn {
  border: 2px solid black;
  background-color: #bf7f3f;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  width:140px;
  border-radius:12px;
}

.btndead {
  border: 2px solid black;
  background-color: #9e3b02;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  width:140px;
  border-radius:12px;
}

.btn a {
  background-color: #bf7f3f; /* menu background colour selectable items */
  color: white;  /* menu text colour */
  display: block;
  padding: 12px; /*button size */
  text-decoration: none;
  text-align:center;
  font-size:18px;
}

.btn a:hover {
  background-color: grey;
}

.btn a.active {
  background-color: grey;
  color: grey;
}

.btnselect {
  border: 2px solid black;
  border-radius:12px;
  background-color: #bf7f3f;
  color: white;
  font-size: 14px;
  cursor: pointer;
  width:200px;
  height:60px;
}


.btnselect a {
  background-color: #bf7f3f; /* menu background colour selectable items */
  color: white;  /* menu text colour */
  display: block;
  text-decoration: none;
  text-align:center;
  font-size:14px;
}

.btnselect a:hover {
  background-color: grey;
}

.btnselect a.active {
  background-color: grey;
  color: grey;
}

* {
  box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.column_left {
  float: left;
  width: 150px;
  /* padding: 10px; */
}

.column_right {
  float: left;
  width: calc(100% - 150px);
  padding: 10px;
}

p1 {
font-size:36px;
font-weight:900;
}

.crossword img {
	height: auto;
	width: 300px;
}


img {width: 100%;
     height: auto;
}

/* Tablets */
@media only screen and (min-width: 780px) and (max-width: 1007px) {
	
.btn {
  border: 2px solid black;
  background-color: #bf7f3f;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  width:140px;
}
/*
.btndead {
  border: 2px solid black;
  background-color: #9e3b02;
  color: white;
  padding: 10px 18px;
  font-size: 16px;
  cursor: pointer;
  width:140px;
}
*/

.btn a {
  background-color: #bf7f3f; /* menu background colour selectable items */
  color: white;  /* menu text colour */
  display: block;
  padding: 12px; /*button size */
  text-decoration: none;
  text-align:center;
  font-size:16px;
}

.btn a:hover {
  background-color: grey;
}

.btn a.active {
  background-color: grey;
  color: grey;
}

* {
  box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.column_left {
  float: left;
  width: 140px;
  /* padding: 10px; */
}

.column_right {
  float: left;
  width: calc(100% - 160px);
  padding: 10px;
}

p1 {
font-size:28px;
font-weight:900;
}

}

/* Mobile */
  @media only screen and (min-width: 500px) and (max-width: 779px) { 
  
.btn {
  border: 2px solid black;
  background-color: #bf7f3f;
  color: white;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  width:110px;
}

.btndead {
  border: 2px solid black;
  background-color: #9e3b02;
  color: white;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  width:110px;
}


.btn a {
  background-color: #bf7f3f; /* menu background colour selectable items */
  color: white;  /* menu text colour */
  display: block;
  padding: 12px; /*button size */
  text-decoration: none;
  text-align:center;
  font-size:14px;
}

.btn a:hover {
  background-color: wgrey;
}

.btn a.active {
  background-color: grey;
  color: white;
}


* {
  box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.column_left {
  float: left;
  width: 120px;
  /* padding: 10px; */
}

.column_right {
  float: left;
  width: calc(100% - 120px);
  padding: 10px;
}

p1 {
font-size:24px;
font-weight:900;
}
  }

/* Mobile */
  @media only screen and (max-width: 499px) { 
  
.btn {
  border: 2px solid black;
  background-color: #bf7f3f;
  color: white;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  width:100px;
}

.btndead {
  border: 2px solid black;
  background-color: #9e3b02;
  color: white;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  width:100px;
}


.btn a {
  background-color: #bf7f3f; /* menu background colour selectable items */
  color: white;  /* menu text colour */
  display: block;
  padding: 12px; /*button size */
  text-decoration: none;
  text-align:center;
  font-size:14px;
}

.btn a:hover {
  background-color: grey;
}

.btn a.active {
  background-color: white;
  color: grey;
}

* {
  box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.column_left {
  float: left;
  width: 110px;
  /* padding: 10px; */
}

.column_right {
  float: left;
  width: calc(100% - 110px);
  padding: 10px;
}

p1 {
font-size:22px;
font-weight:900;
}

  }

}