/* Colors */
:root {
	--default-font-size: 1.2em;
	--primary-color: #3154a2;
	--primary-bg-color: #c0d3fd;
}

body {
	margin: 10px 0px 10px 0px;
	padding: 0px;
	/*background: url('japan2.jpg') no-repeat center center fixed;*/
	background: url('japan-winter-mountain-with-snow-covered.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	font-family: Andika;
	color: #3154a2;
	font-size: var(--default-font-size);
	text-align: center;
}

header,
main,
footer {
	max-width: 1200px;
	margin: auto;
	padding: 0;
	box-shadow: #00000077 0px 0px 50px;
}

header img {
	border: 0;
	height: auto;
	width: 100%;
	display: block;
}

img.noborder {
	border: 0;
	background: none;
	box-shadow: none;
	width: auto;
	height: auto;
	display: inline-block;
	margin: auto;
	/*margin: auto; <!-- toimii fanitaidesivulla sähköpostiosoitteeseen, kun pois päältä. Surullinen Gin menee kuitenkin rikki, samoin linkit-sivun email --> */
	/* muutin inline-block:ksi niin rivittyy muun tekstin sekaan tarvittaessa. jos on block niin yrittää käyttää kaiken vapaan tilan. inline-block ei teen näin. */
	/* inlinen huono puoli on myös se, että se menee muun tekstin sekaan. Tästä syystä lisäsin rivinvaihdon under-construction-pohjaan ettei */
	/* surullinen gin ole samalla rivillä tekstin kanssa */
	/* huom! kommentit css-tiedostossa aina tähän tapaan kauttaviivalla ja tähdellä. html-kommentit tai tuplakauttaviivat eivät toimi. */
	/* no voi pippeli */
}

main {
	background: var(--primary-bg-color);
	border-left: 6px solid white;
	border-right: 6px solid white;
	max-width: calc(1200px - 6px - 6px - 20px - 20px);
	/* content padding */
	padding: 10px 20px 10px 20px;
	text-align: left;
}

footer {
	bottom: 0;
	text-align: center;
	font-size: 7pt;
	background: #fff;
}

footer>p {
	padding: 1em;
	margin: auto;
	padding: 0px;
	border-bottom: 1px solid black;
}

h1,
h2,
h3,
h4 {
	font-family: Andika, sans-serif;
}

h1 {
	font-size: 17pt;
}

h2 {
	font-size: 16pt;
	border-bottom: 1px solid #3154a2;
}

h3 {
	font-size: 14pt;
	border-bottom: 1px dashed #3154a2;
}

h4 {
	font-size: 13pt;
	padding-top: 0px 0px 0px 15px;
	border-bottom: 1px dotted #3154a2;
}

a:link,
a:visited,
a:active {
	color: #3154a2;
}

blockquote {
	padding-left: 10px;
	border-left: 5px solid #3154a2;
	margin-left: 10px;
}

textarea,
input,
select {
	background: white;
	border-radius: 0;
	margin: 0 10px 0 10px;
}

input[type="radio"] {
	margin: 0 5px 0 0;
	width: 20px;
	height: 20px;
}

.addon,
.btn-sm,
.nav,
textarea,
input,
select {
	outline: 0;
	font-size: 14px
}

@media(min-width:1310px) {
	.container {
		margin: auto;
		width: 1270px
	}
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	background: #999;
	border-radius: 6px;
	border: 0;
	background: #0ae;
	cursor: pointer;
	display: inline-block;
	margin: 2px 0;

	padding: 12px 30px 14px;

	&:hover {
		background: #09d;
	}

	&:active,
	&:focus {
		background: #08b;
	}
}

label>* {
	display: inline
}

form>* {
	display: block;
	margin-bottom: 10px
}

textarea,
input,
select {
	border: 1px solid #ccc;
	padding: 8px
}

textarea:focus,
input:focus,
select:focus {
	border-color: #5ab
}

textarea,
input[type=text] {
	-webkit-appearance: none;
	width: 13em;
	outline: 0
}

/* default image style */
main img {
    background: #ffffff;
    padding: 4px;
    border: 1px solid #3154a2;
    box-shadow: 0px 1px 5px #3154a2;
}

main a:not(:has(img)) {
    position: relative;
    /*display: inline-block;*/
    font-weight: bolder;

    &:after {
        content: "";
        position: absolute;
        left: 0px;
        bottom: 0px;
        height: calc(100%);
        width: 0%;
        background-color: lightblue;
        transition: width 0.2s ease;
        mix-blend-mode: multiply;
    }

    &:hover::after,
    &:focus::after {
        width: calc(100%);
    }
}
main a:has(img) {
    position: relative;

    img {
        transition: transform 100ms;
        &:hover {
            transform: scale(1.1);
        }
    }
}


ol.striped>li:nth-child(odd) {
	background-color: #e0eaff;
	padding-left: 3px;
}

/* Galleria */
.gallery {
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
}

.gallery>div {
	display: inline-block;
	margin: 5px;
	padding: 1em;
	width: 300px;
	justify-content: center;
	text-align: center;
	display: flex;
	flex-direction: column;
}
.gallery>div>a {
	margin: auto;
}

.gallery>div>div {
	text-align: center;
}

.cover img {
	background: #ffffff;
	padding: 4px 4px 4px 4px;
	border: 1px solid #3154a2;
	/*margin: 0px;*/
	margin-right: 5px;
	margin-bottom: 7px;
	box-shadow: 0px 3px 3px #3154a2;
}

.coverlist img {
	background: #ffffff;
	padding: 4px 4px 4px 4px;
	border: 1px solid #3154a2;
	/*margin: 0px;*/
	margin-right: 5px;
	margin-bottom: 7px;
	box-shadow: 0px 3px 3px #3154a2;
}

.coverlist img:hover {
	background: #c0d3fd;
	padding: 4px 4px 4px 4px;
	border: 1px solid #3154a2;
	/*margin: 0px;*/
	margin-right: 5px;
	margin-bottom: 7px;
}

/* Sivukohtaiset tyylit */
#uutiset {
	display: flex;
	flex-direction: column;
}

.uutisrivi {
	display: flex;
	flex-direction: row;
	div {
		flex-grow: 1;
	}
	.uutisloota:first-child {
		margin-right: 0.5em;
	}
	.uutisloota:last-child {
		max-width: 300px;
	}
}
.uutisloota {
	background: #ffffff;
	padding: 5px 5px 5px 5px;
	border: 1px solid #3154a2;
	margin: 0.2em 0em 0.5em 0em;
	display: flex;
	flex-direction: column;
	box-shadow: #00000033 0px 3px 3px;
}

.uutisloota:first-child img {
	background: none;
	box-shadow: none;
	margin: 0;
	border: 0;
	padding: 0;
}

.uutisloota>h1 {
	margin: 0;
	margin-bottom: -3px;
	margin-top: -3px;
	padding: 0;
	padding-bottom: 1px;
	font-weight: bold;
	font-size: 120%;
	background-color: #fff;
	text-align: center;
}

.uutisloota>div {
	margin: 0;
	padding: 10px;
	padding-bottom: 1px;
	line-height: 1.2;
	font-family: Andika;
	background-color: #c0d3fd;
	flex-grow: 1;
}

.uutinen {
	background-color: #fff;
	padding-top: 0px;
	/*padding-left: 125px;*/
	padding-bottom: 0px;
	padding-left: 15px;
	border-bottom: 1px solid #3154a2;
	font-weight: bold;
}

/* Kysytyimmät */
.faq {
	width: auto 100%;
	background-color: #fff;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	text-align: left;
	border-bottom: 1px solid #3154a2;
	font-weight: bold;
}

/* Quiz */
#quiz {
	margin-bottom: 20px;
}

#quiz-results {
	margin-bottom: 20px;
}

#quiz fieldset {
	margin-bottom: 1em;
	width: 600px;
	border: 1px solid #3154a2;
}

/* Artikkeli */
.artikkeli {
	display: flex;
	align-items: top;

	div {
		margin: 1em;
		margin-top: 0;
	}

	div:first-child {
		margin-left: 0;
		flex-grow: 1;
	}

	div:last-child {
		margin-right: 0;
	}

	.sivulaatikko {
		width: 300px;

		img {
			width: 300px;
			border: 0;
			background: none;
			box-shadow: none;
		}
	}
}

.palstat {
	display: flex;
	flex-direction: row;

	div {
		width: 100%;
	}
}

/* support small screens */
@media only screen and (max-width: 1200px) {
	#title {
		width: 100%;
	}

	#footer {
		width: 100%;
	}

	.miniwrapper {
		width: 100%;
	}

	.contentwrapper {
		width: 100%;
	}
}

.admin {
  border: 1px dashed navy;
  border-radius: 10px;
}