@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@0,400;0,600;10,400&display=swap');

@font-face { font-family: LinkOut; src: url(https://kutvonen.net/family/link-out.woff) format("woff"); }

@font-face {
  font-display: swap;
  font-family: CCSymbols;
  font-synthesis: none;
  src: url(CCSymbols.woff2) format(woff2);
  unicode-range: u+a9, u+229c,
                 u+1f10d-1f10f,
                 u+1f16d-1f16f;
}

u        { text-decoration-style: dotted; }
body	 { padding: 0; margin: 0 5px 0 5px; background: #3e4e59; hyphens: manual; 
	   font-family: "Inter", sans-serif, CCsymbols;  
	   font-size: 16px; color: #111; line-height: 2.7ex; font-weight: 500; }
a	 { color: #1951c2; text-decoration-style: dotted; }
a:hover	 { text-decoration-style: solid; }
img	 { outline: 0; display: block;
	   /* max-width: calc(100vw - 16px); */ max-height: calc(98vh - 24px - 11.4ex /* 19ex */ ); max-width: 78em;
           width: auto; height: auto; margin: 0 0 0 0; padding: 0; z-index: -1; }
cpointer { class: pointer; }
h1	 { font-size: 22px; color: #535353; font-weight: 700; text-align: left;
           line-height: 2.2ex; padding: 0; margin-bottom: 0.2em; margin-top: 0.33em; margin-right: 5vw; hyphens: none; }
h2	 { font-size: 19px; color: #535353; font-weight: 700; text-align: left;
           line-height: 2.2ex; padding: 0; margin-bottom: 0.6em; margin-top: 1.00em; margin-right: 2vw; hyphens: none; }
b, strong
	 { font-weight: 600; color: #333; }
/* ---
a b	 { color: #2961d2; }
b a	 { color: #2159ca; }
--- */
a b	 { color: #3b4cbb; }
b a	 { color: #3b4cbb; }
small	 { font-size: 90%; }
sup	 { font-size: 70%; vertical-align: 20%; }
hr	 { height: 1px; border: 0 none; background-color: #888; }
.nojs	 { font-size: 16pt; padding: 0; }
.arr a	 { font-family: Tahoma, Geneva, Arial, sans-serif; font-size: 12pt; text-decoration: none; 
	   font-weight: bold; color: #222; text-shadow: 0 0 3px #fff; 
	   position: absolute; top: 7pt; right: 13pt; z-index: 1; }   
.arr a:hover { text-decoration: none; color: #08f; }
.note	 { font-size: 81%; line-height: 110%; font-color: #111; font-weight: 500; 
	   margin-top: 0.1ex; margin-bottom: 2ex; padding-bottom: 0; }
.noter	 { font-size: 81%; line-height: 110%; 
	   margin-top: 0.1ex; margin-bottom: 2ex; padding-bottom: 0; text-align: left; }
.small   { font-size: 10px;  line-height: 110% }
.nlist   { font-size: 15px; line-height: 110%; 
	   margin-top: 0.1ex; margin-bottom: 2ex; padding-bottom: 0; margin-left: 1.5em; padding-left: 0; }
.notex	 { font-size: 13px; line-height: 110%; }
.right	 { text-align: right; margin-right: 0.5em; }
.num	 { font-size: 100%; }
.tty	 { font-size: 100%; font-weight: 700; }
.nojs	 { font-size: 100%; color: #ccc; }
.nojs::after { content: "kutvonen.net warning: You need to enable JavaScript to use all features of these pages." } 
.br::before { font-size: 35%; margin-left: 0.8em; vertical-align: 25%; content: "\1FA78"; display: inline !important; } 
.br::hover { font-size: 200%; }
.privacy { margin: 3vh 3vw 3vh 3vw; max-width: 42em; }
.pd	 { font-size: 120%; vertical-align: -10%; color: #0ae; }
.private { pointer-events: none; }

#picture { width: auto; height: auto; margin-top: -8px; padding-top: 0; background: #888;
           max-width: min(76em, calc(100vw - 0.9em));
	   margin-left: max(0em, calc(50vw - 38.9em)); }

.xpicture{ width: auto; height: auto; margin-top: -8px; padding-top: 0; max-height: 50vh; background: #3e4e59; x-margin-left: -10px;
           max-width: min(40em, calc(100vw - 0.8em));
	   padding-left: calc(50vw - 21.0em); 
  	   padding-right: calc(50vw - /* 19.5em */ 21em); }

#caption { margin-bottom: 1ex; max-width: 76em; background: #ffffff; padding-bottom: 10px; padding-top: 0.2ex; hyphens: auto;
           padding-left: calc(50vw - 40em); padding-right: calc(50vw - 39em); display: block;
           border-left: 1em solid white; border-right: 1em solid white; /* text-align: justify; */ } 

.xcaption{ margin-bottom: 1ex; max-width: 42em; background: #ffffff; padding-bottom: 10px; padding-top: 0.2ex; hyphens: auto;
	   padding-left: calc(50vw - 21em); padding-right: calc(50vw - 21.5em); display: block;
	   /* border-left: 1em solid white; */ border-right: 0.5em solid white; /* text-align: justify; */ } 

.linkout { font-family: LinkOut, serif; font-size: 75%; vertical-align: -2%; line-height: 1.5ex; color: #535353; }
.linkout:before { font-size: 50%; content: " "; } 
                           /* the content is a non-breaking space A0, copied from https://ladedu.com/how-to-enter-a-nonbreaking-space-on-windows/ */
.atsign  { display: inline; height: 0.8em; vertical-align: -0.1em; filter: hue-rotate(10deg) brightness(0.9); }
.fakea	 { color: #1951c2; font-family: "Muli", "Segoe UI", Tahoama, Arial, sans-serif; }
.dot	 { display: inline; height: 0.9em; vertical-align: -0.1em; }
.loose	 { margin-top: 1.5em; }
.tight	 { font-size: 15px; }
.col	 { padding-left: 1ex; border: hidden solid hidden solid; border-width: medium; }
.br	 { color: #8a0808; }

body	 { -webkit-user-select: text; user-select: text; }

span.keept {
	white-space: nowrap ;
}

.hyphenate
        { hyphens: auto;
          -webkit-hyphens: auto;
        }

/* img:hover
        { transform: scale(1.015, 1.015);
	  transition-delay: 0.2s;
          transition: transform 1.0s;
	  transform-origin: 50% 50% 0;
        }
img	{ transition: transform 1.0s;
	  margin-bottom: 1ex;
	} */

@page {
  	   size: portrait;
}
@media (prefers-color-scheme: dark) {
	body 	 { background: #1f272d; /* #272727; */ color: #eee; }
	p	 { background: #171717; color: #eee; }
	#caption { border-left-color: #171717; } 
	#caption { border-right-color: #171717; }
	#caption { background: #171717; color: #eee; }
       .xcaption { border-left-color: #171717; } 
       .xcaption { border-right-color: #171717; }
       .xcaption { background: #171717; color: #eee; }
	a, .fakea
		 { color: #e6962f; }
	a b	 { color: #cf882a; }
	b, strong
		 { font-weight: 700; color: #ddd; }

	h1, h2	 { color: #ddd; }
	.arr a	 { color: #ddd; text-shadow: 0 0 4px #000; }
	.arr a:hover { color: #f70; }
	.tty	 { color: #bbb; }
	.linkout { color: #ddd; }
	.atsign {  filter: hue-rotate(190deg) brightness(1.5); }
}
@media print {
	h1, p, ul, ol, .linkout, #caption
		 { color: #000 !important; }
	a	 { text-decoration: none; color: #000 !important; }
	.arr	 { display: none !important; }
	.fakea	 { color: #000 !important; }
	.atsign  { filter: brightness(0.0) !important; }
}
@media screen and (min-width: 433px) {
	.xcaption { text-align: justify; }
	 #caption { text-align: justify; }
}
@media screen and (min-width: 433px) {
	.col	  { padding-left: 0; }