@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

body {
  margin: 0;
  padding: 0;
  overflow: auto;
  /* font-family: "DOS", "Courier New", Courier, monospace, Didot; */
  /* cursor: url("img/small_hand.png"), auto */
  font-family: "Comfortaa", sans-serif;
}

body {
  cursor: url("img/green_hand.png"), auto;
  overflow-x: hidden;
  /* font-family: Didot, serif; */
  /* font-family: "Ubuntu Sans", sans-serif; */
  font-family: "Comfortaa", sans-serif;
}

a, button, .link-style, .gallery img {
  cursor: url('img/green_hand_click.png'), pointer;
}

a:hover {
  font-size: 18px; /* Increased font size on hover */
}

canvas {
  display: block;
  top: 0;
  left: 0;
  z-index: -1;
}



h1 {
  line-height: 26px; 
  /* color: #e2f554; */
  text-shadow: none; 
  margin: 10; 
  text-align:center;
  /* font: 2.5em Didot; */
  filter: drop-shadow(1px 1px 0 black) 
  drop-shadow(-1px 1px 0 black)
  drop-shadow(1px -1px 0 black)
  drop-shadow(-1px -1px 0 black);
}

h2 {
  line-height: 26px; 
  /* color: #e2f554; */
  text-shadow: none; 
  margin: 10; 
  text-align:center;
  /* font: 2.5em Didot; */
  filter: drop-shadow(1px 1px 0 black) 
  drop-shadow(-1px 1px 0 black)
  drop-shadow(1px -1px 0 black)
  drop-shadow(-1px -1px 0 black);
}

h3 {
  line-height: 26px; 
  /* color: #e2f554; */
  text-shadow: none; 
  margin: 10; 
  text-align:center;
  /* font: 2.5em Didot; */
  filter: drop-shadow(1px 1px 0 black) 
  drop-shadow(-1px 1px 0 black)
  drop-shadow(1px -1px 0 black)
  drop-shadow(-1px -1px 0 black);
}

.popovers figure:popover-open {
  border: none;
  outline: none;
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  width: min(92vw, 800px);
  max-height: 92vh;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  padding: 0;
  background: none;
}

.popovers figure button {
  cursor: zoom-out;
  margin: 0;
  border: none;
  background: none;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  display: block;
}

.popovers figure:popover-open figcaption { margin: 20vmin 3vmin 3vmin 0; text-align: left; }
.popovers figure:popover-open img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
}

@media screen and (max-width: 600px) {
  .popovers { display: none; }
  .gallery button { cursor: default; }
}
 
@media (max-aspect-ratio: 1 / 1) {
	.popovers figure:popover-open {	grid-template-columns: 1fr;	}
	.popovers figure:popover-open figcaption { margin: 0 3vmin 3vmin 3vmin;	}
	.popovers figure:popover-open figcaption p { margin: 10px; }
}


.leaf_border {
  border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACl0lEQVR4AeyX0VHEMBBD4SqgH5qiFJqiHzqA7zwTC8Ubx7kRM/exJ+1m/eLRcI+XyX/vH28/I5/J69qPmw7U3vBmDQFa/MIC9NmAfn1+vzof5m8xj+FxuaHDCLcDAnTLY7gK0GGE2wG3A8q8XS1Tbwd0ex/WqwK0+J0E6AJAi1foj1MZuVqm5ob236etBqiNrN8QoH0+tjodqJt5rt8mUNwwHWjx/suNC9DiVxKgzwbUzUjlp17MS47LDZWIPEOAerykO0AlIs8wC+i/t2IG8rc8a+X/94OLjMsBLTrXZWMCtBh9gF4NlBnGmvspnX7WzEjWyk9d1dzXrXNDFWFTD1ATmLIHqCJk6hIoM4QZxlr5zf1Ot6t9eT7WXFACZUPqPoEA7fOx1QC1kfUbGqAqUzhO+amzv1OfInEflYnuEg1Qd0D8WwIBuuUxXAXoMMLtgIebKa5/+7j5lbsv/e7GuaEuMeEPUAHIlQPUJSb8NlD1fxszSPnFfqfL7r7KbwM9/YQ3f0CAFr/AAF0NqMqU4n3VuEZnhrv7uv7c0OYVjH0RoGP8mu4AbZCMfdEAZWaomhk1tk59N/fnvtRZ0682bICqhuh9AgHa52OrAWoj6zc8mBFu3R/fqswoOqizpl/VPA/91FnTr+rcUEXI1APUBKbsAaoImfp0oMwoZiR11vSb5/3LXvrddKCl2y84LECLX0qA3h0oM9DNSNdfzEuOyw2ViDxDgHq8pDtAJSLPsBxQNyNdv4fHdy8H1D/CWh0BWvw+AvTuQN3Mo7/4/EfH7fblhu6iOSYE6DFuu10BuovmmHA5UGYkf+sfO9Z1XZcDve7o5zw5QIu5BuizA1WZyoxlXczHHpcbaiPrNwRon4+tBqiNrN/wCwAA//9nSL2+AAAABklEQVQDAEfUnHZes4cZAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
  border-width:  28px;
  border-style:  solid;
}

.thought_cloud_border {
  border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACHUlEQVR4AeyXUZIaMQwFJ3v/Oyff21vEEW5mBtL8CUtPcvuVCr6OPiqBgKo4jyOgAZUJyHI5NKAyAVkuhwZUJiDL5dCAygRkuRwaUJmALPeMQ+URvsv9Hn6+V18f3Q7o9Uj2JgjoHr8f1QH9gWTvi8uBcmX+Gn5Yv4djv/pyoPtXuJdCQOX3COi7A+XO48qc3o/11J/q7ebn0F2CqA8ogOyGAd0liPqzgKLt54YBld82oAGVCchyukP5O5AxfzfK9zmoz/6M7f46UHvAd9MLqPxiAb0bUO4k7jDG8vxLOfZnzPmXgouEHLoAND0O6JTYIj+gC0DT4zFQ7hzupOkAf8k/5Yjz837TIcZApw3+t/yAyi8e0IDKBGS5HBpQmYAsl0MDKhOQ5XJoQGUCslwOvRqo/d9Xvs9Yjv/deb+pYA6dElvkB3QBaHoc0CmxRf42UO4c7iTGi3n0Y/ZnzPl3B9gGujvAp9UHVH7RgN4dKHcSY+4w+T4H9dmfsd0/h8pEAxpQmYAsN3YodxRjeb4z5NQeY6Bq9w8UC6j8qAE9Gyh3JH/HMWY+553ms54x+1Gf+a+Oc6hMOKABlQnIcpc7lDuPO3EVs17mM5a7HOh44psXBFR+oICeDZQ76tU7jf1WsczjX+Ue5uXQh2ieOwjoc9weVgX0IZrnDr5WO5Gy77bTOP+r4xwqEw5oQGUCslwODahMQJbLoQGVCchyfwAAAP//JRxtawAAAAZJREFUAwDMuECn+X/sNgAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
  border-width:  28px;
  border-style:  solid;
}

.hammer_border {
  border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACMklEQVR4AezaWW7DMAxFUTc79kq85Bb6I+hBpvg0NLgFBFgWSYunapEE+WyL/xzH8XuYsfh2t+VBVwf0+wPUiyTngCYBffp0UPv/8erab/gqxt7z8aPn00FHN9z7eYCKhQEFVCwgLscJBVQsIC7HCV0AVLyF7yrHCRX/PgEFVCwgLjf9hO77/rM/DN/vU2xZ8/Gj59NBRzfc+3mAioUBBVQsIC7HCQVULCAuxwn9p6Diba9bjhMq/t0ACqhYQFxu+RNa3p/bIe5fXm55UHnHnQsCKgYGtDeo/Z7Qm2vxfqaXe9OzjfEb5oR6keQc0CSgTwfUiyTnK4MmW5uTDqjYHVBAxQLich/7mqpcR+uXnMiI1s/GR/ZWYqPPKzl28CcfFazEA1oBii4DGhWrxH/sZ43luhJ/Wi45kXEq0PlGZG8lNrqdkmMHJzQqWIkHtAIUXQY0KlaJ/zbQSrv9lwEVGwMKqFhAXO50Qu1rqjfX4v1ML/emZxvjN3wC9QHMYwKAxryq0YBWiWIBy4PazxrLday98dHLg44nyT0R0JzfKRvQE0nuBqDblhN02YA6kOwU0KygywfUgWSngGYFXT6gDiQ7BTQr6PIBdSDZ6XTQ8v78afgGn2LLmo8fPZ8OOrrh3s8DVCwMKKBigbZyt1mc0FuatgVA29xuswC9pWlbALTN7TYL0FuatgVA29xuswC9pWlbmA5qvyd0de3buoqx93z86Pl00NEN934eoGJhQMWgfwAAAP//u1+RrgAAAAZJREFUAwByHXto7Ah6DQAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
  border-width:  28px;
  border-style:  solid;
}

.scatter_border {
  border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAADnUlEQVR4Xu2UW27jMBAEN/c/9AaCBQPqcLvYGlJ0FqyvGP2Y4Tjw15/P56+s+PX+q03qT7H9o4fNwD6gQepPsf2jh83APqBB6k+x/aOHzcA+oEHqT7H9xwdraEB+0olqXkn7Uv+Fw5wWkJ90oppX0r7Uf+EwpwXkJ52o5pW0L/VfOMxpAflJJ6p5Je1L/Rci8yJKD3yaj17uZB90MPugg/n1B6UHkJ5S7avmFeqzupoPbKBDT6n2VfMK9VldzQc20KGnVPuqeYX6rK7mAxvo0FOqfdW8Qn1WV/MI7MAOZudJLzG07KS68Ow86SWGlp1UF56dJ73E0LKT6sKz86SXGFFWXZDyVZ1I89ZP4R7sgA4oX9WJNG/9FO7BDuiA8lWdSPPWT+Ee7IAOKF/ViTRv/a2wDdxA+1ZTfY+lVa4HaHkStG811fdYWuV6gJYnQftWU32PpVWuB2h5ErRvNdX3WI5yfXA6kPKkz+bR+fugg9kHHcw+6GDu/J7Rb5Lqivpnk+6jftUtkfmEBqquqH826T7qV90SmU9ooOqK+meT7qN+1S2R+YQGqq6ofzbpPupX3RKZb1JacAA0n3TF+ik8ArvAA9B80hXrp/AI7AIPQPNJV6yfwiOwCzwAzSddsf7jgzV06Ir6FcqPprqP5tV/0fdBfx5I2QcV9CDKPmjI4wdVdIGh32BDn82j81uPSxcgP+mzeXR+63HpAuQnfTaPzm89Ll2A/KTP5tH5dx5HC6quqH826T7qV90SmU9ooOqK+meT7qN+1S2R+YQGqq6ofzbpPupX3RKZT2ig6or6Z5Puo37VLZH5JqUFB0DzSScu+TR8h+rCVWg+6cQ+6PsUL/ZBQ+hgpBPL/0NXkx5MsV9AtbwHXWA11Tfre/ZB36e4xz6o8PhB7TfQIPUrlK/qRDV/oRVOB6R+hfJVnajmL7TC6YDUr1C+qhPV/IVWOB2Q+hXKV3Wimr9QCv8DWpB0YnXekj6mB3ow6cTqvCV9TA/0YNKJ1XlL+pge6MGkE6vzltZjaGHSU6p91bxCfVZX84ENdOgp1b5qXqE+q6v5wAY69JRqXzWvUJ/V1XxgAx16SrWvmleoz+pq/kTsAz6Nj17uZB90MPugg/nvD5o+MPUT1T7Kk65c/GRuURrY4SeqfZQnXdkHfZ/ihR6MdGUf9H2KF3ow0hU8aFqYkvan/qW0lpv9gLQ/9S+ltdzsB6T9qX8preVmPyDtT/1L+Qa0n1hYaA7/vwAAABBkZUJHQzU1QUU0RjYyRUM2RTA3N2be7+kAAAAASUVORK5CYII=") 28 /  28px / 0 round;
  border-width:  28px;
  border-style:  solid;
  background-color: rgba(0, 0, 0, 0.4);
	padding: 18px 36px;
}


h3, h2, h1 { font-weight: normal;
  font-family: "Comfortaa", sans-serif;}

h3 { font-size: 1.25rem; line-height: 1; font-style: italic; }
h2 { font-size: 1.45rem; line-height: 1; text-transform: uppercase; }
h1 { font-size: 2.75rem; line-height: 1; }


.border {
  border: 7px solid transparent;
  background-color: rgba(0, 0, 0, 0.4);
	padding: 18px 36px;
}

@media screen and (max-width: 600px){
	
	h1, h2, h3, h4, h5, h6, p, table, details, cite, blockquote, hr {
		margin: 16px 0;
	}


@media (max-width: 768px) {
  h1 {
    font-size: 2.2em;
    margin-top: 4vh;
    margin-bottom: 6vh;
  }
  
  .links-container {
    gap: 4vh;
  }

  .links-container span {
    font-size: 1.8em;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.8em;
    margin-top: 3vh;
    margin-bottom: 5vh;
    padding: 0 15px;
  }
  
  .links-container {
    gap: 3.5vh;
    padding: 0 15px 4vh 15px;
  }

  .links-container span {
    font-size: 1.5em;
  }
}

@media (max-width: 400px) {
  h1 {
    font-size: 1.5em;
    margin-top: 2vh;
    margin-bottom: 4vh;
  }
  
  .links-container {
    gap: 3vh;
  }

  .links-container span {
    font-size: 1.3em;
    text-decoration-thickness: 1.5px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  h1 {
    font-size: 1.5em;
    margin-top: 2vh;
    margin-bottom: 3vh;
  }
  
  .links-container {
    gap: 2vh;
  }

  .links-container span {
    font-size: 1.3em;
  }
}

	ul, dl {
		margin: 16px 0 16px 16px;
	}

	ol { margin: 16px 0 16px 48px; }
	ol ol { margin: 0 0 0 48px; }

	ul ul, dd { 
		margin: 0 0 0 16px;
	}

	details p { margin: 16px 0 16px 32px; }
	
	p, ol, ul, dl, details, table, figcaption { font-size: 0.9rem; }
}