a:link {color:#479650; text-decoration:underline;}
a:visited {color:#627669; text-decoration:underline;}
a:hover {color:#18af3b; text-decoration:underline;}
a:active {color:#ac5050; text-decoration:underline;}
body
{
color: black;
background: #d2f2da;
background-size: 100%;
font-family: 'Noto Serif', serif;
}
.titleimage
{
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 700px;
max-width: 80%;
padding: 30px 5% 0%;
padding-top: 50px;
display: block;
font-family: 'Oswald', sans-serif;
}

.puzzletitle
{
left: 0;
padding: 1em 0;
}

.titleimage img
{ 
height:100%;
float: left;
}


.innerimage
{
display: none;
}

.contains
{
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 700px;
max-width: 80%;
padding: 30px 5% 5%;
z-index: 0;
}

p
{
padding-left: 3%;
line-height:1.3;
}
ul
{
padding-left: 3em;
list-style-position: outside;
}
ol
{
padding-left: 3em;
list-style-position: outside;
}
li
{
margin-bottom: .5em;
}

.fixedwidth
{
font-family: 'Roboto Mono', monospace;
padding-left: 3%;
}




h1
{
font-family: "Oswald", sans-serif;
text-align: center;
margin-block-start: 0.1em;
margin-block-end: 0.1em;
font-size: 400%;
font-weight: normal;
}
h2
{
font-family: "Oswald", sans-serif;
text-align: center;
margin-block-start: 0.1em;
margin-block-end: 0.1em;
font-size: 250%;
font-weight: normal;
}
h3
{
font-family: "Oswald", sans-serif;
text-align: left;
margin-block-start: 0.1em;
margin-block-end: 0.1em;
font-size: 200%;
font-weight: normal;
}
h4
{
font-family: "Oswald", sans-serif;
text-align: left;
margin-block-start: 0.1em;
margin-block-end: 0.1em;
font-size: 100%;
font-weight: normal;
}

.checker
{
margin-top: 50px;
font-size: 100%;
line-height:inherit;
}

.spoiler
{
  margin:0;
  border-radius: 4px;
  background-color: #52ac5e;
  color: transparent;
  user-select: none;
}
.spoiler:hover
{
background-color: inherit;
color: inherit;
}
.spoiler a:link {color:transparent; text-decoration:underline;}
.spoiler a:visited {color:transparent; text-decoration:underline;}
.spoiler a:hover {color:transparent; text-decoration:underline;}
.spoiler a:active {color:transparent; text-decoration:underline;}

.spoiler:hover a:link {color:#479650; text-decoration:underline;}
.spoiler:hover a:visited {color:#627669; text-decoration:underline;}
.spoiler:hover a:hover {color:#18af3b; text-decoration:underline;}
.spoiler:hover a:active {color:#ac5050; text-decoration:underline;}



button {
font-size: inherit;
font-family: inherit;
color: black;
}

input {
font-size: inherit;
font-family: inherit;
}

.navbar {
  overflow: hidden;
  background-color: #52ac5e;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  float: left;
  display: block;
  color: #f2f2f2;
  text-decoration: none;
  font-size: 1em;
  z-index: 1;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover {
  text-decoration: underline;
}

.pintmode {
cursor:pointer;
position:fixed;
right:3em;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding-top:14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default checkbox */
.pintmode input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: fixed;
  margin-left: 10px;
  height: 1.5em;
  width: 1.5em;
  background-color: #eee;
  border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.pintmode:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a cool blue background */
.pintmode input:checked ~ .checkmark {
  background-color: #216a4a;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.pintmode input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.pintmode .checkmark:after {
  left: 7px;
  top: 0px;
  width: 0.4em;
  height: 1em;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}

/* Things that are invisible until you activate Puzzled Pint Mode */
.pintpart {
display: none;
}

/* Become visible when Pint Mode is activated */
.active.pintpart {
display: inline;
}

/* Things that are only bold in Puzzled Pint Mode */
.pintphrase {
font-weight:normal;
}

/* Become bold when Pint Mode is activated */
.active.pintphrase {
font-weight:bold;
}




.puzzleblock {
width:100%;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}

.puzzleblock img {
width:25%;
float:left;
padding: 0 0 1em 0;
}

.blocktitle {
font-family: "Oswald", sans-serif;
text-align: left;
margin-block-start: 0.1em;
margin-block-end: 0.1em;
font-size: 200%;
font-weight: normal;
}

.puzzleblock p {
margin-block-start: 0em;
margin-block-end: 0em;
}



.metalink {
display:inline-block;
width:32%;
text-align:center;
margin-top:2em;
margin-bottom:2em;
}

.metalink img {
width:100%;
}


@media screen and (max-device-width: 480px)
{
.titleimage
{
padding-top: 90px;
}

.contains
{
position: relative;
margin-left: 2%;
margin-right: 2%;
width: auto;
max-width: 100%;
padding: 0px;
padding-top: 30px;
border: none;
background: none;
box-shadow: none;
bottom: 2em;
z-index: 0;
font-size: 2em;
}

h1
{
font-size: 7em;
font-weight: normal;
}
h2
{
font-size: 6em;
font-weight: normal;
}
h4
{
font-size: 5em;
font-weight: normal;
}
.navbar {
  font-size: 2em;
}

.pintmode .checkmark:after {
  left: 14px;
  top: 2px;
  width: 0.4em;
  height: 1em;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.spoiler a:link {color:transparent; text-decoration:none; font-weight:bold;}
.spoiler a:visited {color:transparent; text-decoration: none; font-weight:bold;}
.spoiler a:hover {color:transparent; text-decoration: none; font-weight:bold;}
.spoiler a:active {color:transparent; text-decoration: none; font-weight:bold;}

.spoiler:hover a:link {color:#734300; text-decoration:none; font-weight:bold;}
.spoiler:hover a:visited {color:#69573f; text-decoration:none; font-weight:bold;}
.spoiler:hover a:hover {color:#9c661c; text-decoration:none; font-weight:bold;}
.spoiler:hover a:active {color:#9c661c; text-decoration:none; font-weight:bold;}


}