/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  /*background: radial-gradient(#ff9379, #99ccff);*/
   background: radial-gradient(#deffef, #fff2e8);
  background-size: cover;
  font-family: monospace;
  margin: 0;
  cursor: url(/images/bean-cursor.png), auto;
  color: #65240c;
  margin-bottom: 52px;
  padding: 50px;
}
blockquote {
  color: hotpink;
  font-style: italic;
  padding-left: 9px;
  border-left: 1px solid hotpink;
}

a:link {
 color: #514ddc; 
}

.bean-world {
  padding: 20px;
  width: 100%;
  height: 100vh;
  /*display: grid;*/
  /*grid-template-columns: repeat(auto-fit, minmax(auto, 450px));*/
  justify-content: center;
  /*align-items: start;*/
  /*gap: 20px 20px;*/
  min-width: 400px;
}

.masonry-with-columns {
  display: flex;
  flex-wrap: wrap;
  flex-basis: auto;
  gap: 50px;
}
/*https://codepen.io/chriscoyier/pen/PXGNom*/

.node {
 display: none; 
 /*opacity: 0;*/
 height: 300px;
 position: relative;
 flex: 0 1 auto;

} 

.node > p {
 text-align: center; 
}  

.egg-cursor {
  cursor: url(/images/egg-cursor.png), auto;
}

.egg-cursor img {
  pointer-events: auto !important;
  cursor: url(/images/egg-cursor.png), auto;
}





#bean {
  display: block;
  cursor: crosshair;
  /*filter: contrast(200%); */
 }
 
 #bean:hover {
  filter: drop-shadow(30px 10px 4px #4444dd);
 }


.seat-of-bean {
  width: 120px;
  margin: 0 auto; 
  /*position: fixed;*/
  /*top: 0;*/
  /*left: 0;*/

}
  
.seat-of-bean:hover {
  filter: drop-shadow(20px 29px 4px pink);
 }
 
 
 @keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotating {
    display: inline-block;
    animation: rotate 4s linear infinite;
}

.cute {
 padding: 20px; 
  border: dotted #514ddc 3px;
  background: rgb(153, 204, 255, .4);
  border-radius: 7px;
}



.very-cute {
  background-image: url(/images/lace1-2.gif);
  background-repeat: no-repeat;
  background-size: contain;
  background-color: rgba(255,255,255,0.7);
  width: 275px;
  height: 240px;
  padding: 20px 25px;
  border: 10px solid transparent; 
  border-image: url(/images/lace1-2.gif) 21 round;
  border-image-outset: 10px;
}

.lil-note {
 max-width: 320px; 
 overflow: auto;
overflow-x: hidden;
/*height: 10em;*/
padding: 1rem;
}

.lil-note::-webkit-scrollbar {
    width: 15px;
  }

  .lil-note::-webkit-scrollbar-track {
  background-color: pink;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  }

  .lil-note::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #e4e4e4;
  border: 1px solid #000;
  }

.timestamp {
  color: navy;
  font-weight: 600;
  
}
.no-pointer-events {
 pointer-events: none; 
}
.just-image img {
  pointer-events: none;
}

 .has-floating-timestamp > .timestamp {
 position: absolute;
 top: -20px;
 left: 0;
 width: 100%;
 height: 100%;
 display: none;
 align-content: center;
 z-index: 10;
 pointer-events: none;
  color: #fff;
  border: inherit;
   background: radial-gradient(rgba(0,0,0,1), rgba(255,255,255,0),rgba(255,255,255,0));
   border-radius: 50%;
   background-size: 300px 300px;
  background-position: center;
  background-repeat:no-repeat;

}

.has-floating-timestamp:hover > .timestamp {
  display: block;
}

.timestamp-egg {
 position: absolute;
 top: -20px;
 left: 0;
 width: 100%;
 height: 100%;
 display: none;
 align-content: center;
 z-index: 10;
 pointer-events: none;
  color: teal;
   background: radial-gradient(rgba(255,255,255,1), rgba(255,255,255,0),rgba(255,255,255,0));
   border-radius: 50%;
   background-size: 300px 300px;
  background-position: center;
  background-repeat:no-repeat;
  
}
.egg:hover > .timestamp-egg {
  display: block;
  
}

.wow {
  border-image:  url(/images/sparle.png)  21 round;
    border: 10px solid transparent; 
  border-image-outset: 10px;
}

.linkout {
 padding: 20px;
 height: auto;
}

.broider-concentric {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACqElEQVR4Aeza0W7jQAiF4d19/3fejq8afo3AJxDXSU9lSyEDM/iLxVX//dH//q+S33Svxz1/PQN6fvdfmGnQ4R/doD8AynnJFv6uLz7pXo8Trur5Q7Lf0MDRDwzaNww7GDRw9IMdaDUzOC/ZBevvHrN/9flC/Q40JDjQBAyqeZXZBi2JtIQDlDOOO3CmcJ31zL97zP75fOyf66H+AGWC44aAQRt4u1KD7lQa3+1ApZmxzlbzw8xZ9VfH68hwsX/2E5JXwPz11fe1A/1e9SdZwKAyWV5g0NxHXj0DypmSzpDVQZXP+qtj9rdaDhf7qfJD8RnQUOAgFzBo7iOvGlQmywsmQDljOIOODh5v5r86fjz7+Mz+eP6R8/Q9Afr04Z9YaNDhX9WgbwjKGcUZ9uqY5w8Txu38hkaPdmTQNmHcwKDRox0ZtE0YNzBo9GhHBm0Txg0MGj3a0Z1B2w/3ExsYdFjdoAYdFhjezm+oQYcFhrfzG2rQYYHh7fyGGnRYYHg7v6EGHRYY3u7T3tBhHn07g+pmaYVBUx590aC6WVph0JRHXzSobpZWGDTl0RcNqpulFVeA8n+X+L9Gr455fgrSXbwCtNvjW9UbdPjnMugNQTmjOBPZMvNfHfN89sfzmS/FfkMlrjrZoLWRlGFQiatOPgPKGcMZxFOqfNZfHbM/9s9+qvxQfwY0FDjIBQya+8irBpXJ8oIdKGcId+BMUfNZf3XM52H/7KfKD+s70JDgQBMwqOZVZhu0JNISDtDWzFjHsZ4z6e4x+1+PFC72fyw+3qH+AH1c9OemgEGbgCw3KEWa8Q40zITN/tJMWfXc727xajFc6vOF4h1oSHCgCRhU8yqzDVoSaQlnQDnzeAJnzrvHfL7q+UP+GdBQ4CAXMGjuI68aVCbLC74AAAD//1rCEqUAAAAGSURBVAMAL/PAfGv489YAAAAASUVORK5CYII=') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;    
}
.broider-cult-of-wisdom {
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABGUlEQVRYR+1Z0Q7DIAjU///orclqu2HoHVWrZBifKpTzVBDMSWmvlLZet5zS1s+myUlNVk/Klf/8GGUAsAaHAy0MaTOTDGpyEiirp9mvGF0eKAtQW3q0Aq16B6PLA0UAy17T5JD+Xb3KLjIUQHc/jbzGQaRbRlFEYv0h60dZe1kyyip+hTY1ul1FurLkrL1m96TdFdB3tOXkeAD9X0athwkxZR2nD5NboFZGRsubI9NoQCglqhz+LEAB9Cnm/e9R5Nd6M4nsqYwixWlAUarBjlsnELcnxEAwuhfl/KQi1tvTMskdjLlKfbR37SkqJcHoWfr57AbkJ+9W5XrpNef1T03QX2mcvXz09qNaMU0eTr/PN5JZOeNZ70xvR3FwDpI2AYkAAAAASUVORK5CYII=') 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid; 
  }
  
.broider-cross {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAolJREFUeF7tmstywzAMA53//+h2OpNDo2S0Rgg94qBXyTS1gmhQze3Y/++nSfG2c8pbJ3cHF6BmBQVogD4SaBVh5nO5cA9l81UNDVBtzwNU44WzAxQRaRPsQN3Wi77qNK7heJ6tlrwABeIBWpVk83yAXg2oeT1P4doarSpoan6f4EMD1CyJAA3Qfi9PCqn60KqvrD7f7j/F646fqaEBKgguQLlTkgQVoB8AlHwi7Xi7xNXz6f1yLy8FPI4jQKGXDdDFH6UodLFCqQ8gX6g+r9Zo6YSO+MqrClWBqI2Emg9t4HRjry4gQBsCdCToiAUoACVAu49vd+R3B0b5BSgREscDVARG05cDpQRVm0PxquPkQugjOtw20QIDtGiLaIdpA0aPR6FmwsuB0nrI2O9+5Cl/af1nenkp4Iv70AAlgmKNDdAAlQg8/QuEinRVYWSUpezfmOx+f5fXH6wA1XYpQM23YwE6G2greCoB1Am5a5Z2IHk25Vdaf3zoccTYswi7M6LQIkAqadMVan2hGc474Uo1klrrMzU0QB+3LRfMjYyj0HfOdeeZ7YFWe30zr3I41QUM/31oeUWLAwSoeQMC9OpAqeirNZcUQzzVfOh9w22T6lMDFHxcgP4D5OiUAnQzoNUap97PqvNJMMN96O6AAlTsxUlRAfrtQMkXqhe+FI98Iz2v5jPdh7oXQPECVPS1AUoEvh2oyMc+Xf1q2xOAgLIPnZ2gamu2yu9M67lVwid+3DY73yjUTNwOVL2Oo/WQDaJxik/j1Dp3S5LjyAeoeNtEOxqgAdrVyPIjTwq++rj9o3R1YLS+ACVC4niAisBoOgKlALPHR/tO63rclsea3D1YgJqpBug3A/0F2HhYYDp1Ea8AAAAASUVORK5CYII=') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
  

.broider-mini-lace {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABi0lEQVR4AdzSW0oDURAEUJPdiAtw/58uQFyOEvCEobBp5xVsA0Olq59V3OtT83t+ef1cfk35r9PLmbf/XWN7aDfgUfn7oTdVP315iJrkM1YH5TNOXh7K3w9F/FVsD/14f7ssP0IohsnrSV4sD/EVtodWjY/mNx+aTnAWLyYIL16Lmw9du2hv/bVS3jmgL+vwDpNPXh6qg3h9cxx1eYeUZV3Fq6vyFa8vcY6j1ZugGFKofi+aZ36ivD1zHM3Lqxh/FnLO/IznOeqNUCROZfJHofn2VXPnOUoJheJOqbqtmPNzv7nzHKWEQjFFZ6N99ue+eY5S0ClTdzRysto/11HKOPat8CI+GnN+7rdvrqMUUFopVLcXzbfPvIznOUoZRRnjz8Lcl/EcR/NybyORk+r3onm5RyxvzxxHXd5hKlVf8V2+69MP5ziayrwJSFGivqzDq5dPXh6qg3h9cxx1+VqslOM5YS5evBb/j6OcgJyoHEteDPWbB/EVznOU4sRUKI8XQ3yFVR0+0Zwxjn4BAAD//3yKYVUAAAAGSURBVAMAhTdcw1miXyAAAAAASUVORK5CYII=') 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid; 
  }
  
.broider-legs {
      border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC2UlEQVR4Aeyc3U7FMAyDd3j/d4bmBlprOPWa7fzMaJEa4qTptyraDXxt+c93k/TW3Fs9/dljTQ8/A5QWcHAkYKAjj2XPQJcRjgVeAWjMpd7GDnWvrxVrvcJCxisAXWj/9VINtPidGOgJQGPOMMMtmTZiqM/8RxP0FjV6a2H69NpY97ViTZNbMHKYNcnwMO23b+jAat0x0HWGQwUDHXCsOwE05gwz3OXuPmP1CKB3B1R6fgMtxbltBvoGQOl3WnH/M+Uu7cc3dOaVCBoDFWDNSA10hpKgmQH6aPWYtbD0qDNN1UvN7IjZWSO2k/L3qxmgf2qvUgIGmiLSBAaq8UrVVwFNGykU4MwtLJ2X+kSg+alPVBhoMVwDvQCoOoPi24wZtsy0Z8Rwf/RxT4xLvm+ohCsXG2jOSFIYqIQrF+8BxZmCM1X18y7eS4HnH7rfAzoI7GgEDFTjlaoNNEWkCWaA4kzNfK2D/9VXRXAmZj6ef+hzBuiQYIcTMFDOR44aqIyMJxjotuFMzPyN/Rgoo3MgZqAHoLEUA2V0DsRmgGbfZRg/0MbnpMwA/ZzTXnASAy2GbKAXAMWZmH2XYby4RancETGeN/PpHr6hFI8eNFCdGc0wUIpHD+4BffeZmFHA86k+zthhvz2gg8CORsBANV6p2kBTRJqgAiidKTvtoP5sH1vI9kM9+jhzh3gF0KHg3R0DLb4BBvoBQOkMKj7fTLlSjW9oKc7Nf95dzNNAnwF09btN7fnREpi18PAwbcQG8YSzdF7P0AnCisRAFVoTWgOdgKRIzgAac4uZ0l+FlvUSsYo9fmucAfS3+B0XBlr81g30BKBL313F/bxDueD1r/mGFr9CAzXQYgLF5eKGxrcYM9ySaSOGevRx/kROb6hHv9fGGuuhPvOjBjPMZ1r//1CkterHDV2t4fyOgIF2MCqWzwCKM2j1HNX1lvp5BtClhl892UCL35CBFgP9AQAA//9pP4MgAAAABklEQVQDAAHu8KEYz4NiAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;

}

.broider-bugy {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAADTklEQVR4AeycgW0VQQxEjxRCQ1RDJVRDQzQCsYSQ7y1/JxOvAlEGsdJN7Blv3j8ZUCSeLvz69uXzz35QlrJ761ka3rih7tSPO75765n+BSgboj0CAerxkt0BKhF5DRJo7QnneOPXbs5ih6qzn/rr9x+f+lF5rHdvPTNfAqUhek8gQPd87GqA2sj2hid3R9Te6IfxvVbPzGc/6+Xpx60zX+k+q57VPJWXN1QRMusBagJT7QGqCJl1CbT2Sj/Xdd1G9Fo934oHRGX240ZyJ7p+1c98CVQFpn4nEKB3HmMVoGOE9wAJlDvibr8uVWc/dd+P9azyWC9PP9N8+qnVfAmUgdF7AgG652NXA9RGtjdIoH0/1bPaIftxuloz+jk9r2fXM/N5Q9bL0w/7JVAaovcEAnTPx64GqI1sb3jq+6CeuTNor55+WKf/d++fn+OwX+mpf5rvzs8bqoib9QA1gan2AFWEzPoClDuDO9HMf/ft7ve/AH33BP7xNxCghz+AAD0NlDuCejrvdN70PvTzfvwzhJr9zMsbSiJDHaBDgLQHKIkM9fJvee4Mau4QavZTG/c90sr7UU+HMC9v6JQo/AEKIFMZoFOC8Eug3BHcidTsx7w3l7wf9fRCzJNApwM/mj9AD3/iAXoaKHce9XTe6bzpfejnDuR9qdnPvLyhJDLUAToESHuAkshQy3/LD/MvtXOm+fAvkjtQad6XWvnzhi4fwewLATrjt7gDdEEy+4IE6u4Q9s+uN3fzPtTTCcyTQKcDP5o/QA9/4gH6vwHlDjl8v+Nx/Hvk6fvnDT38kQVogB4mcDhOvqHcOZyv6ux39TSf/r/szNuV2H8rPgv62S+BPmfkt0EgQA1YL2kN0JdQMnoWoNwJ3BnMZp1+9itN/+l8zj89bwHKgdEegQD1eMnuAJWIvAb7/75T8e7OUzuM89x8+qmZ59bZnzeURIY6QIcAaQ9QEhnq5efyw7zFrnbUYsAXuGNRHkuV/6D+cG7e0IdoXlcI0Ndxe+gK0IdoXleQQLlDuBNZd6+h8tw65ys/+9X3wzrzJVAOjN4TCNA9H7saoDayvWEBqnYE47hD6Ge/0sxjv6qzX2nmKa3yFqDKkPqeQIDu+djVALWR7Q2/AAAA//9p4RkgAAAABklEQVQDAJV4QGTcuKlUAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}


    .checko {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAADlklEQVR4Aeyc0W7bQAwE1f7/P6ecIHDmJMeOQrpuky207Wrp453GAhH0Ib+3bXvZqW6XK/Ujoz2Tyz1AF3q56REI0B6/w+oAPSDpBQD9VS2syzyoHO8answis1zDu4Yns8gs1/Cu4cksMss1vGt4MovMcg3vGr6wLBfZRQBdqrnpEQjQHr/D6gA9IOkFAGVOWJd5UK3xruHJLDLLNbxreDKLzHIN7xqezCKzXMO7hiezyCzX8K7hySyyiwBa3HJNEQjQKZJvfQL0DcTUPwD1PMBf5kFtgiezyCzX8K7hySwyyzW8a3gyi8xyDe8answis1zDu4Yns8gs134BtLjlmiIQoFMk3/oE6BuIqX8A6nmAX2ZCbURmpb5tZmA2LwDd8meOQIDOsXztFKCvGOb+AqjnAX6ZCbUVmfXoem25XN4b/+j9z/ZfDgvQJchNj0CA9vgdVgfoAUkvAOjZmcEcsz6z3p/xWvzZJ2CN5d541/BkFpnlGt41PJlFZi3nB+gS5KZHIEB7/A6rA/SApBcA1PMA73mBJ7PILNfwruHJrN6Jj6vdG7//BJnFmSzX8K7hySwyy7X8f+iefveeN7TbI+tFIEAFY8IC1PMAv8yE2oTM6tar5VOv7vlvrgfoU5/uu20eoMPfaIA+AOjNmVD7Tder5aeuv/Wh0efLGzr8tQVogA4TGG7HG+qfMfGjM2X4vI9oxzNbrecH6CMO+WN7BujwVx+gDwDamhl1nv36iv7py/MSvz8/mXWqnjd0+LsP0AAdJjDcjjfU8wJ/ambUeVhjVfS069rGPhu++3w31wP02iGSfZFAgH4R3EfLAvQjMl/MAXpzJlTfbr1aPPXqnv/UeoA+9Wm/2+YBOvyNBugDgPKzmXVqZtR5vBZ/b30tWS7WWEtx4Ma98ffO16rnDR34xtwiQE1jwAfoAES3uAaUOWO1Zkpt1l1fLU5dPjv+3v6j9WtAT50+H14JBOjKo30XoG2Ea4NrQEdnSm3HHLO6/avlcrk3vtu/tf4a0OW0uTlHIEDP8br76QC9i+jcBwDamhm1XdZv77+DBKBb/swRCNA5lq+dAvQVw9xfAOVnNyszcXufidvxd9jDxzK7/N6mAjZ68YaONvzpzQJ0+A0AqOcBfpkJtR+Zlfo6VwvR+wXQ97u4NoEAbSNcGwToyqN9B9D9TNw33dc9T/H/W336+ZZ+AF2C3PQIBGiP32F1gB6Q9II/AAAA//9+qDdLAAAABklEQVQDACxe1JO29rq3AAAAAElFTkSuQmCC') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
  .broider-sunflower {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAwhJREFUeF7tnNFtKzEMBH1tpI30X0LaSBvJr60DPBispDsDm68XSJbI4ZLi6eJ3/P18/T2efo7v3+P5993/Hu2h/XfbS/YdBUohex0vUMcLZxcoInITNFC3/OOR1jA0cKjpdr71h9Yf1xv9P9VQa0CBvh7iBTooqAodgKzOGEz5cYJtoyii5KDd7+72npp462CBDjX07hGnQ/JuAqhCZQ2mAMZArYKoqF+dMdafUx+aOmANKNDw9mn3oZXuZwVShU4WCAK1JYCKtF3vbvOtf3iZTAvS+N0AWXusfwUKbywKVL7SIWA0fupa0lNtdQpZh2g+jVt/CnSyggu0QN1rbkppGl+e8ukG9ORCNXz2+Or7WWybCtT94UeBwjslUrQ+lKrQzQq1Nc5G3K5PArDrWXvjlF9toF2/QFNi8Pm0y6hC4ZCx8YuBUkTtBraRtg7T/HR/ywNf0p3aAnnjnTpEwGg83b9AJ/eVBXo1UBsBSjFqW2wNtvut3h954QRZM1c7ZAGnNZT8OZ0xBepChLxwQhX6Qhx52ZSgBSneV9dQss+2iSd+BfoeMQmgQKVEC3Tzszwq1NYQCrgtKbSeHZ+9P50h+LUakjw5ONsh2o/6xtn+tA+d3AYW6GqglCJpTf30lMeaOQSo96FQlAv06uu7pvx7icYKpbaENqDPp20LrW8FQutZe/teHogW6OZHz1MXRJK/OoWsfVfbG6c8pURac1Ogto9O++YCndxmFWiBZkXAliiarw8lW1NoPo3ToUIO0vo0nu6PKT/bgNnrWQCr9y9QuM6zASjQuwG1Efy0+dbeWKF2w0+bb+0t0H5f/v33hqyiaD6NYx9qF6A2m57l076S2ib7LG/9wf/EpUDdDX6BTn6NXKB3B7q7RlLNtDXZ1lgqifhe/moD00OCAlCg4f3l6oyqQocA2YzUhxKlHBlAn7eKsfNpf1sSaD1UKC4w+dSkmlagEBELyM4nQVShw2UGKXo70NURX+1QWsOtfaTo5X9jbw2mAM9WpLWvQFNi8gyoQkPgY0b9A4wRxhglkiJXAAAAAElFTkSuQmCC') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
  .broider-celeste {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAEVklEQVR4Xu2cgXKbMAyGk7zjtub2fL12L7kOQmhBBj7/yAbvqtz1rlcrsvzpt2wM9Hr/df+4dJ9b9/O3/8V83v68XRf+fNifxvjGDluLx4K42oAD6LZWZrx6KRq5BVBxrpEAA2htoK3XqNZLUqLQAKpJ1paAB9BpbW0Z6NJOpLV4Q6GaIBPrRKHkr/Y+kPx722l81E79J/vQ0g7Jn22ngL3tajxqfAFUJEwJDaBnA/VOAbqyoFVaVcjR/ckKDaDa4ZB8ktS6YkKhcDzYegLdU14tAfa8Va2ZtIao/qy9mjCKR57ye4HmHhAvTtmFc8e9/r4p0LX7B6k+QqFizaQplgV0ovBUoS9d69dEJX8Uj3vKr5aA/gZVLzTzUacc1Ti1neIhYNReD+hKzwGUUmLa1X2gqjBvQkKhz9vca6u6mpDmgJICRUFfaBEgYLSNU+PxApdraADdTlEABQnTDHJfep6r0FtXIl43RWAvdRd5rWzplmwPB0odqjXQW/OSmvqze3ZrkgKK96VbBKcZI/viCqUOTwcKuwRa1Gh8pwLtrwDfD36aT02oan8q0L5zNePeEqACUu1loI8ONg4XSk8ZL0D6/iew58JECVYB47ZJdajaE4DS7Wp80wTcusOeVyhZxYH+7hQ9fRKaFFAaGPnbDfTpmMZTHKgaMAEo3a7Gp9onQFUHqn1pQF5/avxknwL90S1Ck4Nhkjh14B1w7e+r8X/ZD7dpLJ8AWnjj757y3ku12gok//sVOnhOFGpXZQrA204lxOuf9sV7/E/vwW7c0X64hrdA8m/n5gbaLFDhBGprrPhaTS6oXLtmgeYOAOwCaCGQoxv3oqQW9cLxu93dxfNSGm8AbW3bRBlzS6iyAzV+sg+F1lYo7eNolaYMVhYculfjU+3jtEl8GpAEFUDPBfrRXbu+Z90XH+ceZRTnaGEDdQqr9qjQ9Zo6XNUSMDWgwvwuav+qvY3XAXRwFUDnSAOokVgoFGqECki1Lz7lvTWvdMmYAaHDy4zgKb5iQPmklC1q1GCrsDVmedHxGlEMaEZys0xIAeoUzAWaFVzGolsJaG6+02F8e6CUWVKI9y0O7/dt/JRQGq9bodRBACVCYnsAFYGReQAlQs6Ns2eVztlGUg2kR2fU+AiXfOlpHVJA1E7+aAD5QAdP24san6ZRPAcA1V6fppKhrtKU0NLPsx4AdPiXxONHVRQpQvWnbruof/e2iTKuTmEvkLP7OwXo1nWUAjTntZytkrHn+xTfKUBnnX4+lLX8wCopjga4BbTvkV46UGfgSUAnGyCzF1IBqfaPAR/4WhAuSt6MUVHv/U9Lgrpo0D6T+qf2u/iIPAMdH6bKfFGKAlSnNCWU2tV41PjkKX92wNQ/tQdQ8+ABAaP2w4HWDkgdUOkrJbV/1d7GG/8lXCVo7AOoEyAtWqFQJ2BUqPVPG2lnPPj1/63G41sgAXSec1o0AyjOkQAqItLM5wpNz9H+AbDCRkC3X2z2AAAAAElFTkSuQmCC') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
  
  
.broider-lace {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC/0lEQVR4AeyaUW7DMAxD297/zlu+CvgJMaHQXoOVxT5GS5TVF08z0L5+8HrghXBbolyR7YLCUDbAgrDLMMo9aHgxIdojEKAev+IO0ILEW3g98eJMQLgtWY/aa7+6WZ+6/QZgUPVyQuszsVYC1MJXzQFamVgr5R6KkfHkzOhqdsf6Ks58auVnvNs/87k/4zmhJG7qADUB0h6gJGLqK0CHLTlTqIfkQ3DmHEvDD+NKD+ZDMP9YGn7YH/WQfEHYQC/s+a8tAbr48Qbop4Fy5nBmUbNf+lWc+dTKzzj7o1b1WY86J5RETB2gJkDaA5RETH17oJxx5vvdbr890O0EFm8QoAG6mMDicvIzJe53caa9yyj/7vi7kZNfuvvz3po/+ROwV5cD9Cq5E1+AnoC5uiyBckZwI8apu/n0u7q7v8pnnFoCpSF6TiBA53za0QBtI5sbyufyTO/ey1Q+6/+1Zn/U7KcbzwklQVMHqAmQ9gAlEVNLoLwHcj/GqZnf0FtS2R81N1Vx5kugNETPCQTonE87GqBtZHPDcqDq3jZvZ390d3/Lge5Hcu8dAnTx8wnQuwPt3tsWvx9Zbnd/OaHyEfQSArTHS2YHqETUS5BA1b2NcepeO3a2LMD+qFlAxZkvgdIQPScQoHM+7WiAtpHNDeW7TUxX9zbGqVnv05r9UbO/bjwnlARNHaAmQNoDlERMLYGqexjj1OyP8d26u7/KZ5xaAqUhek4gQOd82tEAbSObG8p3m7r3rnn5GnXru/7a0WNY6tbn/4Cc0AGnLwLUZzhUCNABhy9uD1TNNB/B2gq3B7r27e6vFqCLGQfop4Hy3sUZR81+6Vdx5lMrP+Psj1rVZz3qnFASMXWAmgBpD1ASMbUNlDOHmv1xZqk486mVn3H2R838E326bAM9rfylgQBd/OADdDVQziTOFMa7mv2yvoozn1r5Ge/2z3zuz3hOKImbOkBNgLQHKImYWn6mxJnR1Zwx1Gb/xc761N3+ma/q5YSWR+ItBKjHr7gDtCDxFn4BAAD//4zfZWMAAAAGSURBVAMAJzbAE+Ql81sAAAAASUVORK5CYII=") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}

.broider-lace-purp {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAADEElEQVR4AeyZUW7cMAxEXd+ld+oRe6cept38BNYTrCk1EtZIJsgCOxqSop8VQkDOX8efv9fPgZ+rN/Md5To5U3OU022AhVHu/3godzDnZEC0RyBAPX5ddoB2SLyF8/fx88f1w5lw9Wa+sx61136fzfrUM89wzVH1ckL7d2KtBKiFr08O0J6JtXKqmUC/qtnddR59fFf+R8zoo/LpV/tnPHuhnxNK4qYOUBMg0wOUREw9A7TZkjOFugl+Cc6c11LzS1/pJvklGP9aan7ZH3UTPCFsoBN7fumUAF38egP03UA5czizqNkv85XPeGqVT5/9Uav6rEedE0oipg5QEyDTA5RETP14oJxx5vNuT3880O0EFm8QoAG6mMDicifvXWpmKf+mv89llb/b/2zk5kt1f/LLn/wN2NnlAJ0ld5MXoDdgZpclUM4IbkSfuhrPfFdX91fx9KklUCZEjwkE6JhP2Q3QMrJxwlm9d7Ec86kZ/27N/qjZX9XPCSVBUweoCZDpAUoippZAeQ/kfvSpGV/QW0LZHzU3VT7jJVAmRI8JBOiYT9kN0DKyccJyoOreNm5nv7u7v+VA9yN59g4Buvj9BOjTgVbvbYufR5bb3V9OqHwFtYAArfGS0QEqEdUCJFB1b6NPXWvHjpYF2B81Cyif8RIoE6LHBAJ0zKfsBmgZ2TjhVPeyqq/ix+3sd9kfNTuo+jmhJGjqADUBMj1AScTUEqi6h9GnZn/0d+vq/iqePrUEyoToMYEAHfMpuwFaRjZOODnDqveucfnedeu7+X1HR7NUrU9+OaENTl8EqM+wqRCgDQ5fPB6ommk+grUVHg907ePurxagixkH6LuB8t7FGUfNfpmvfMZTq3z67I9a1Wc96pxQEjF1gJoAmR6gJGJqGyhnDjX748xSPuOpVT599kfN+Bt9u2wDva38TY0AXfziA3Q1UM4kzhT6Vc1+WV/5jKdW+fSr/TOe+9PPCSVxUweoCZDpAUoippb/U+LMqGrOGGqz/y6d9amr/TNe1csJ7V6JtxCgHr8uO0A7JN7CPwAAAP//UByOMwAAAAZJREFUAwDbvOCdW7NOlwAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}

.broider-lace-purp2 {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC/UlEQVR4AeycUU7kMBBEw9yGS/LBJTkO8IUmz4pKlXI8MNRqkaZS7nLn2WqNtFpub6+fn/c/G/7ce2c+I05Kdw8ZiAVuPtcjbqN/44LqjECBZvyG6gIdkGQPbu8fLy/3P5wJ996Zz8xju8rnnm4985nnapXXG8oTCnWBhgBZXqAkEurheyhnCmeGq9kf6+lzf9dX+fRdzf5Y3xvKEwt1gYYAWV6gJBLqM0B3W3KmUO8WfwvlcyYp/R25+6vy6VPvwk6IGOiJPZ+6pEAnH2+BPhooZ44747ie78N8pVmv8ulTcz/mK90bqgiZfoGawNTyAlWETH85UHdGccap93PzVZ7rLwfqNvjX1hfo5BMr0NlAOXPUzFL+QX8/j1X91f5PIwcf3P3Jrzf0AOzZxwV6ltxBXYEegDn7eADKmcDg2T7zZuur+2f+AJQLqj0CBerxkqsLVCLyFgxA3e9h3E7Vc/1qrfpL/QHo6hd8tv0KdPKJFuhsoGpm8Hsh96dPzfWGvmQp+6Pmpsonv95QEgx1gYYAWV6gJBLqAaiaGWo/zhS1frWf9qf4DEBXv+Cz7Vegk0+0QK8GevWMmdy/HadmoApUfHpDFUHTL1ATmFpeoIqQ6Q//15P1ambQp2bexVrGsz9qBiifM7k3lARDXaAhQJYXKImEegDKmcD81Gfeap32r+oHoKtf8Nn2K9DJJ1qgVwNV37tm+8ybrcmL+bP93lASDXWBhgBZXqAkEmr5O0eYr76HcT21qr/aZz/btu0euftzJveG7nDmokBzhruEAt3hyMVyoJw56hXUTGO9m8/6VC8Hmjb82+sLdPIJFeijgXJGccZRs1/lM19pN5/7U3M/5ivdG6oImX6BmsDU8gJVhEw/BsqZQ81+lM+ZprSbz/2pmXegDx/HQA+T/6lRoJMPvkBnA+WM4kyh72r2y3r63N/1VT59V7M/1veG8sRCXaAhQJYXKImEWv6bEmeGqzlj2K/yuZ9bz3zmuVrl9YbyhEJdoCFAlhcoiYT6CwAA//8+yIp5AAAABklEQVQDAHB/mod6gpCMAAAAAElFTkSuQmCC") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}

.broider-lace-brown {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC8klEQVR4AeycQU4rQRBDIWvOwq04FbfiLOyBVZR5rcjyuCaIwV8fKcZd7prXrdJICC5vry9ft19P+Hfr7fmMOCndPWQgFrj5XI+4J/oXLqjOCBRoxm+pLtAFSfaNy/vH5/PtF2fCrbfnM/PYrvK5p1vPfOa5WuX1hvKEQl2gIUCWFyiJhHp5D+VM4cxwNftjPX3u7/oqn76r2R/re0N5YqEu0BAgywuUREK9B+hmS84U6s3iH6F8ziSlfyI3/1U+fepN2A4RA92x56lLCnT4eAv0t4Fy5rgzjuv5PMxXmvUqnz4192O+0r2hipDpF6gJTC0vUEXI9MeBqhmkfPbPGUefWuUrn3muHgfqNnC29QU6fKIFOg2UM0XNrJ3+te2z1ZNfb+j1qGc+FOgMx2tKgV5RzHxYgHImcJtpn3nT+uj+mb8A5YJqj0CBerzk6gKViLwFC9Cj3xO99uZXH/18C9D5R/hfiQU6fN4FOg1UzRS+F3J/+tRcb+hDlrI/am6qfPLrDSXBUBdoCJDlBUoioV6Aqpmh9uNMUesf7af9KT4L0Ec/4Nn2K9DhEy3Qo4EePWOG+7fj1AxUgYpPb6giaPoFagJTywtUETL95Xc9Wa9mBn1q5h2sZTz7o2aA8jmTe0NJMNQFGgJkeYGSSKgXoJwJzE995j1ap/2r+gXoox/wbPsV6PCJFujRQNV717TPvGlNXsyf9ntDSTTUBRoCZHmBkkio5d8cYb56D/uD/uYR3f45k3tDNzhzUaA5w01CgW5w5GIcKGcKW1Q+16uZxvUqX/nMc/U4ULeBs60v0OETLdDfBsoZxBlHzX6Vz3yl3XzuT839mK90b6giZPoFagJTywtUETL9GChnDjX7UT5nmtJuPvenZt4dfffbMdC7yf/UKNDhgy/QaaCcUZwp9F3NfllPn/u7vsqn72r2x/reUJ5YqAs0BMjyAiWRUMufKXFmuJozhv0qn/u59cxnnqtVXm8oTyjUBRoCZHmBkkiovwEAAP//z2OUYwAAAAZJREFUAwD7KaUbiYwG5wAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}


.tmgc-bg-wet {
  background: url(/images/wet.png);
  
}



.egg {
  width: 300px;
  height: 354px;
  background-color: #99ccff;
  background-image: url(/images/wet.png);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: drop-shadow(8px 0 10px teal);
  color: floralwhite;
  text-align:center;
  display: flex;
  align-items: center;
  justify-content: center;
}


.long {
 width: 100%;
 background: peachpuff;
  
}

.gurl-you-need-padding {
  padding: 20px; 
}

.border-button {
  outline: outset 0 grey;
  transition: outline 0.6s linear;
  margin: 0.5em; /* Increased margin since the outline expands outside the element */
}

.border-button:hover { outline-width: 30px; }

.border-button2 {
   /*background-color: rgba(255,255,255,0.7);*/
  border: outset 1px pink;
  background-color: #eee;
  transition: border 0.5s linear;
  margin: 0.5em; /* Increased margin since the outline expands outside the element */
  /*filter: drop-shadow(7px 7px 4px grey);*/
  box-shadow: inset 5px 5px 5px grey;
}

.border-button2:hover { border-width: 20px; box-shadow: unset; }

.nub {
  background: #99ccff;
  opacity: 0;
  
}

.border-button2:hover > nub {
 opacity: 1; 
  
}

.cat-id {
  display: grid;
  grid-template-columns: repeat(3, minmax(auto, 1fr));
  width: 350px;
  border: 1px #fff solid;
  border-width: 1px 0 0 1px;
  grid-auto-flow: dense;
  grid-gap: 10px;
  border-radius: 9px;
  box-shadow: 5px 5px 10px #ddd;
}
.cat-id > .id-img-container {
 grid-column-start: 1;
 grid-row: 1 / span 3;
 border-radius: 9px 0 0 0;
 background-image: url('/images/blayne.jpg');
 background-repeat: no-repeat;
 height: 100px;
 width: 100px;
}
.cat-id > h1 {
  grid-column: 2 / span 2;
  margin: 0;
  text-align: center;
}
.cat-id > p {
  margin: 0;
}

.cat-id > key {
 width: 100px; 
  
}
.cat-id > .answer {
  grid-column: span 1;
}

.cat-id > .paw {
 grid-row: 4 / span 4;
 grid-column: 3;
}

/* after selecter isn't working */
/* Pre-render the bigger shadow, but hide it */
/*.border-button2::after {*/
/*  box-shadow: 0 5px 15px rgba(0,0,0,0.3);*/
/*  opacity: 0;*/
/*  transition: opacity 0.3s ease-in-out;*/
/*}*/

/* Transition to showing the bigger shadow on hover */
/*.border-button2:hover::after {*/
/*  opacity: 1;*/
/*}*/