/* Style sheet for Petitt's Creations
   crafts.ookingdom.com
   Latest revision March 1, 2022 */

/* -------- Charter font
   Font license available at www.ookingdom.com/license.txt */

@font-face {
font-family: Charter;
font-style: normal;
font-weight: normal;
src: local('CharterRegular'), url('charter_regular.woff2') format('woff2');
font-display: swap;
}

@font-face {
font-family: Charter;
font-style: italic;
font-weight: normal;
src: local('CharterItalic'), url('charter_italic.woff2') format('woff2');
font-display: swap;
}

@font-face {
font-family: Charter;
font-style: normal;
font-weight: bold;
src: local('CharterBold'), url('charter_bold.woff2') format('woff2');
font-display: swap;
}

@font-face {
font-family: Charter;
font-style: italic;
font-weight: bold;
src: local('CharterBoldItalic'), url('charter_bold_italic.woff2') format('woff2');
font-display: swap;
}



/* -------- General styles ---------- */

html {	min-height: 100%; padding-bottom: 1px; /* forces scrollbars */
	background-image: url(https://www.ookingdom.com/design/pink.gif);
	background-attachment: fixed;
	background-color: #ffc6d7; color: black;}

body {	position: relative;
	margin: 0 auto 200px auto;
	padding: 1px 1em 1em 1em;
	background: white; color: black;
	font: medium/1.5 Charter, "Iowan Old Style", Georgia, serif;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	/* Prevents text size adjust after orientation change,
	without disabling user zoom */
	}

h1 {font-size: 1.7em; line-height: 1.2;}
footer, nav {font-size: .875em;}

img {border: none; height: auto; width: auto; max-height: 94vh; max-width: 100%;}

hr {border-top: 1px solid #bbb; border-bottom: 2px solid #bbb;}

.center {text-align: center;}

@media print {
nav {display: none;}
}

nav ul {list-style-type: none; margin: 1em auto;
	text-indent: -1em; padding-left: 1em;}

li#current {margin-left: -2.2em; padding-left: 2.2em;
	background-image: url(arrow-12x17.png);
	background-position: 1px 3px;
	background-repeat: no-repeat;}

nav a {text-decoration: none;}
nav a:hover {text-decoration: underline;}

a:link {background: inherit; color: blue;}
a:visited {background: inherit; color: purple;}
a:hover {background: lavender; color: blue;}
a:active, a:focus {background: yellow; color: blue;}



/* -------- Floats and Clears ---------- */

@media print, screen and (min-width: 547px) {

.fl {float: left; margin: 0 1em .5em 0; max-width: 59%;}
.fr {float: right; margin: 0 0 .5em 1em; max-width: 59%;}
footer {clear: both;}

}



/* -------- Two column layout for wider screens ---------- */

@media screen and (min-width: 800px) {

body {max-width: 680px; padding: 1px 1.6em 1em 13.1em;}

nav {
	position: absolute; top: 0; left: 0;
	padding: 0 1.25em; width: 10.5em;
	border-width: 0 2px 2px 0;
	border-style: solid;
	border-color: #bbb;
	border-radius: 0 0 .75em 0;
	}

nav hr {display: none;}

li#current {background-position: left 3px;}

}



/* ------------ Larger text edition -------------- */

@media screen and (min-width: 1080px), screen and (min-height: 1080px) {

body {font-size: 118.75%; line-height: 1.474; max-width: 800px;}
/* this font size renders best on Windows */

footer, nav {font-size: medium; line-height: 1.5;}

li#current {background-image: url(arrow2.png);
	background-position: left 2px;}

}