@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
* {
	font-family: "Ubuntu Mono", "Comfortaa", "sans-serif";
	font-weight: 400;
	font-style: normal;
	box-sizing: border-box;
}
body {
	background-color: #aee8e4;
	color: #234442;
	text-align: center;
	width: 60%;
	margin: 0 auto;
	font-family: Ubuntu Mono;
}
h1 {
	margin-top:50px;
	margin-bottom:20px;
	font-size:50px;
}
h2 {
	margin-top:50px;
	margin-bottom:40px;
	font-size:24px;
}
div.column h2 {
	margin-top:10px;
	margin-bottom:40px;
	font-size:24px;
}
h3 {
	font-size:22px;
	margin-top:40px;
	margin-bottom:40px;
}
details {
	font-size:22px;
	padding:40px;
}
.adventure {
	background-color: #b5a68d;
	color: #3e2723;
	border-radius: 10px 50px 50px 10px;
	border: 2px solid #d8d17f;
    margin-top: 10px;
    margin-bottom:10px;
}
p, footer {
	font-size: 20px;
	line-height: 1.5;
	margin-left: 5px;
	margin-right: 5px;
}
footer {
	margin-top:100px;
	margin-bottom:40px;
}
footer img {
  transition: transform 0.3s;
}
footer img:hover{
  transform: translateY(-5px);
}
::selection {
	color:black;
	background: #14c91d; /* What about yellow? BTW, either add an option to disable this, or change it. (So accent-color is respected.)*/
}
a {
  color: #1e7244;
}
.second a {
	color: Chartreuse;
}
.third a {
	color:yellow;
}
hr {
	width:50%;
	color:#234442;
	margin-top:60px;
	margin-bottom:60px;
}
img {
	max-width:100%;
}
video {
	width:90%;
}
textarea {
    background-color: black; border: 1px dashed #14c91d; color: #14c91d; height:30px;width:88px; margin-bottom:7px; resize: none; overflow:hidden
}
ul, ol {
  font-size:18px;
  display: table;
  margin: 0 auto;
}
li {
  margin-bottom:5px;
}

/* Image Grid  */
.column {
	display: inline-block;
	width: 33.33%;
	margin: 10px;
	width:190px;
	background-color:#2e543d;
	color:#bffcd8;
	border: solid #234442;
	transition: transform 0.5s;
}
.column:hover {
	transform: skewY(20deg);
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Disabled links/parts */
.disabled {
	opacity:0.4;
	pointer-events: none;
	cursor: default;
}

/* Slideshow */
.slideshow {
	height:auto;
	margin-top: -10px;
	margin: 0 auto;
}
.infobox-special {
  color:#1e7244;
  font-family:monospace;
  font-size:16px;
  border-left: solid 2px #1e7244;
  width:50%;
  margin:0 auto;
  padding:10px;
}
.infobox-special strong {
  font-family:monospace;
}
strong {
  font-weight:bold;
}
/* Info box */
#infobox {
	margin-top:40px;
	border: solid #469AB4;
}
/* Secret text */
details > summary#mikko:first-of-type {
    list-style-type: none;
}
details summary#mikko::-webkit-details-marker {
  display:none;
}
#leaves {
	padding: 0px;
	width:200px;
	position: absolute;
	right:10px;
	display: flex;
	flex-direction: row;
}
details#leaves > #mikko {
  flex-basis: 100%;
}
details[open]#leaves {
	width:100%;
	position: static;
}
#mikko {
	background: no-repeat url("../images/general/mikko3kopio.avif");
	height:200px;
	width:200px;
	cursor:pointer;
}
#mikko:hover {
	background: no-repeat url("../images/general/mikko2.avif");
}

/* News area */
#news-window {
    background-color:#3C3C3C;
    border: 1px solid #5C5C5C;
    margin: 0 auto;
}
#window-header {
    background-color: #8BC34A;
    color: black;
    border: 2px solid #5C5C5C;
    display: flex;    
    justify-content: space-between;
    text-align: justify;
    line-height: 0;
    margin: 0 auto;
    height: 48px;
    padding: 5px 5px 0px 5px;
}
#window-header h2 {
    display:inline;
}
#window-header2 {
    background-color: #5C5C5C;
    border: 1px solid #5C5C5C;
    text-align: left;
    margin: 0 auto;
    padding: 10px 5px 5px 5px;
    line-height: 0;
    height: 24px;
}

/* RESPONSIVE */
@media screen and (max-width: 700px) {
	body {
	    width: 80%;
	}
}
@media screen and (max-width: 500px) {
	body, #news-window, #window-header, #window-header2 {
	    width: 100%;
	}
}