/* ~~ Cross-Quarter Calendar ~~ */

#cross-quarter {
  display: block;
  top: 0;
  margin: 25px auto 75px auto;
  text-align: justify;
  font-size: .8em;
}

.wheel {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABOElEQVRYR+2X0Q0CMQxD78ZgOcZgCMZgOcaAr0oownpOVO5aVD5pcVw7cem+TfLZJ+G5LaK9nVqKHq7o9X55fRZ93J5fXVD72vfxdy5uq43Wu4CnEa0SjJYrB9o+t45U1AWI+04jSj2ZVawdRPWswkNFhycaLcwOi4onlQIUZzj11PTZwtn9djxFotSTpEwVL63ocESjRVXLVK+3A7u49tS7gGR9VQC0vhdBSgGVr/YwDU/UvULJalp362CPkiVEhNanI0qxN4yiZaLqBuk1XNmYSsfTsESrd7M7RGS5naPTEa0SVr2YjT3sUfpTkbXYzc2Ii/FE73FXGRpCWv8folnFVCvQI5HqoKIEoN5UkfDPiNKjjm4uOmB2qHDqCbAaP4RrTz3FztHrqOjRhFS9RbS3E0vR3oq+AWrLcDo6OIoaAAAAEGRlQkcyRjcwMDNFRTBFNjQ5NTg0a4/juQAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    opacity: .8;
}

.dormant:before {
      content:" | "; 
      margin-left: 15px;
}

#cross-quarter li {
  float: left;
  padding-right: 25px;
  margin-bottom: 20px;
  display:inline-block;
  color: var(--soil);
  text-decoration: none;
  font-size: 1.5em;
 /*  width: 25%;     Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center; /* If you want the text to be centered */
}

#imbolc {
  color: #507628;
  border-bottom: none;
}

.active {
}

.dormant {
  opacity: .5;
}


/* ~~ Navigation ~~ */

.skip a {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
 
.skip a:focus {
    position:static;
    width:auto;
    height:auto;
}

.nav {
width: 1000px;
overflow: auto;
text-align: center;
}

.nav li {
  float: left;
  padding: 12px;
  padding-right: 50px;
  display:inline-block;
  color: var(--soil);
  text-decoration: none;
  font-size: 1.5em;
  width: 20%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center; /* If you want the text to be centered */
}

.nav li a:hover {
  color: var(--stamp-green)
}

/* Style the current/active link */
.nav li a.active {
  background-color: #04AA6D;
}



/* ~~  Main Content ~~  */

body {
    cursor:url(greencursor.gif), default !important;
    background: repeating-radial-gradient(var(--chamomile-petals-dried) 0 0.0001%, var(--chamomile-petals) 0 0.0002%) 0% 10% / 40vw 40vw, repeating-conic-gradient(var(--chamomile-petals) 0 0.0001%, var(--chamomile-petals-dried) 0 0.0002%) 90% 90% / 10vw 10vw;
    /* background-color: var(--chamomile-petals); */
    background-blend-mode: lighten;
    font-family: 'Leluja', Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-size: 1em;
    display: grid;
    padding: 0;
    margin-top: 0;
    place-items: center center;
    align-items: center;
    justify-content: center;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyph {
    font-family: 'LelujaSymbols';
    font-size: 1.5em;
}

#titling {
    font-family: 'Basteleur';
    font-size: 4em;
    text-transform: uppercase;
    color: var(--stamp-green);
    padding: .5em;
}

body, h1, h2, h3, h4, h5 {
    color: var(--soil);
}

.quiet {
    border-bottom: none;
}

h1 {
    font-weight: 700;
    line-height: 1.2;
}

.grow {
    font-size: 2.2em;
}

.stretch {
    padding: 2em;
}

.wide {
    padding: 2em 0em 1em 0em;
}

.lean {
    padding-left: 50px;
}

p {
    font-size: 1.3em;
}

article {
    padding: 2em 1em 1em 1em;
    max-width: 70vw;
    margin: auto;
}

.short {
    padding: 0em 1em 1em 0em;
}

ul {
    list-style: none;
    margin: 1rem;
}

.special-list {
    font-size: 1.2em;
    margin: 0 1rem 1rem 1rem;
}

.lists {
    width: 600px;
    margin: auto;
    line-height: 1.2;
    padding-top: 10px;
}

.lists ul {
    font-size: 1.2em;
    margin-top: 30px;
}

.lists ul,
ol {
  list-style: none;
  padding-left: 0;
}

.lists li, .special-list li {
  padding-left: 1.5em;
  position: relative;
}

.lists li::before, .special-list li::before {
  content: "\2767";
  color: var(--stamp-green);
  position: absolute;
  left: 0;
}

#logo {
    display: none;
}

.home {
    text-align: center;
}

.perch {
}

span {
    min-height: 60px;
    display: inline-flex;
    align-items: center;
}

.branch {
    float: left;
    font-size: 1.2em;
    font-weight: bold;
}

.leaves {
    float: right;
}

.canopy {  /* <~ page headings  */
    text-align: center;
    margin: 25px 50px;
    padding: 25px;
    width: 100vw;
}

.canopy h1 {
    font-family: 'Basteleur';
}

.garden-box a {
    font-weight: bold;
    color: var(--stamp-green);
}

.bee {
    font-weight: revert !important;
}

hr {
    border: 1px dashed;
    color: #b58900;
}

.garden-box hr {
    border: 1px solid var(--sage);
    border-top: none;
}

.vine {
    border-width: 14px 0 0;
}

.floral {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABd0lEQVRYR+WYzbHCMAyESWeUQh+c6YNS6AwuOAeZzacfJ+DhXXgzjqz1SrJWXk7vv+v9/Gz/b/3eLo9la73t4/2OfLZ9Vqc/D9QCbCewzKjvbESUvYqc198yHVCbUyrXFNPEjJdphWNldBqgtvosA2q9mqPNnvx1Oeo1pAhQ6kSJKYfeOqR7lA6wW44eDlSFXOWO6jxeRqP+ht2jqqgU42Gg2V7vbbnRolHfp3v914CSivGGlvahHFb2m5Ltk1HWUfWgHVACQutVRtX+8wElVVQNHdmT/67qs3KMQl4GSidR1xDNRAo47afwdKKERhDbUbxMUmMh4T1P6LPCtxr6qJ6d73qiqvSuU85Sw3Bf+FVHe9nP1+u9so2mRWI0al9+e/IebJhwHvWk4y22rL95ZqbsnF2dQunCtxGa7wEimvTECEUq6u9/3p68ejYryNv+5Rw9HGj0iWVUjpJgbriG3aPErFL4bqA0IqjqpJmIhLW3BZd7/dFAX9LBfBTlwSonAAAAEGRlQkdCNkRCOUEwNTA4MEFCNDY4ZSqYsQAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

.flowering {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABHklEQVRYR+1Y2w3DIAwsm3WUzpEBOkdH6WaNUoWqMrqccd2Ik8gPBGF8+I3LZf+Wx/VV59t4vz3LNqL1772ReS+/N5gjQMMArUCqBC3w6Hr2uSX7QGsy0YtagTVAraorAQJgLxr9t3Zu+ekARc6EPNmqktH37keShV4/HFBkU8xmsm2W8dOxUdnwNGzAl0mhckAjFdCZNJ84eibTCK8GKMvVESZHNF5+ekDZzVC8jUq4l1+T672pMQoQxWkGHKoe5d5fAVp6Vv/W/XpAmeinjZpnOfIRvfDk9cZ/ORN7veqm0GyJZZ2n09KRqUfnm2lvY87eEysSelOtdz9tQLDekbeKYhf0Vk2z9+RVLSvIqeplm2TDtnRkAr5MClUBugKuwGXoeWuAQwAAABBkZUJHN0UwQTBDREY5MDc1MkVBQrkhuUoAAAAASUVORK5CYII=") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
    width: 100vw;
}

.vovanium-floral {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABkklEQVRYR+WZ2w3CMAxF6WaMwiB8MgijsBkIiVTI5epcuwktgh9Km8eJY187ZTq8Pufr8d6un9+X0216/62uY7/WTvWnedTzGYYG2By0AUYL0P0IrvpTu7ijapyJgKoAVZdYDUoLUr4Z+2VdrLW3Lbo5qPIRBRZ9Tm1xtLC7UOXTi6hvPrJbUGWprB6SD7oGiDxS1GlABTQMlCZ0LZrVS9eHW7s56rMd3SCi4HNjYnUwVWsFpa9qB38PlHKu+9ypuD61IZ1dRL0b7W4Z6IJ3AyXZcYGoXIzBNUe9K/S7B+0NSFtctuhuQEnPKLiyvulmwjjvoh4l8CxYNTNJ0GwK7QXsntXKuf7vQN2d3NyiNujaM1NvF1Aq0616qgK7KpMuStxcnQUnvf4fUEqxZCm3zl1t0a+DUg5WMhLvuxbKlpf4fjS7gGGgbn3oAtAxOlpSHZexeiIgCo7hoG4qiwtRFsrqLe1sOdcry9HplIDkG+feuZ7kKjtfG697rh8O6uparxxOLhBjpvx+1AUmIPrXpT1/ACnhFghekLFSAAAAEGRlQkc4NjQwMURGNjI3MDYzNDQ2Mis7nwAAAABJRU5ErkJggg==") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

.leafy {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABfElEQVRYR9WZyxHCMAxESWeUQh+c6YNS6AwmB+WgjOat5A8xRyLLm7Wk3STbTfw93/fvHvp6fDZlicX7WFufzSdtum+WTTwdqN+QGCWAxnA2LzKaTTgMaHSk6oYRQ/Z/dAJqfovblgPqGYjuWOn4lhg/FSzXwehyQCM2fK2pNUbsqid3YvSyQKtd27rOE0IndMxRCoyYrq4rA60qRi9mSVhOykQLRjFL++LAJ22nrlavk/CsBzQa+P9i1JcCKtNlgUaO3Hd39QaoFqOaRmWKpHM6UHUO0vjIdrdqgowQWZkuA5SYpdqtMqqaIFQmNdF0oMRstYmyJsTHh0+hvVxRL28gA+3FJDEb7bMOUFIKlcnWUiEc3dzTNKCqe6KXZQSYmCs/12e1fhrQSIGyEqo+r0cMnuYoJYwSUZNRXtWUWByaElUaR8XJ7mkUADXvCShpvD8qUphqfLQu7Z5aX8xWCWmWUBpHdMTqNFkfaJYJqknKR9fxq0gvP0lA6PoPmh4Knd8wzhwAAAAQZGVCRzE4QkUxOTFFNTg2QjEwNDFKuk1DAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

.sprouting {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABWElEQVRYR+1Z2w3CQAyjmzEKczAAczAKm4GQGj5yWLarFHJS+aSp43OebZdT0e96Pz+/Qd0uj6XCRQnIm8jfiIbjrEj+H9mFiqo9w4GKtifKFGAHyPnoRgThD4q2J8pyxL3u2udI5Ps/ilYDV+PZoWcnZ6nj3h/28xJV+x+r/qpqh4q2J5pHIJrRaFS681zFD7uh6sOhCuQSdPEHosyhqvheOPL21IaoWsWskauKRkhVv3QyuQ18N6KICEr6akVzO8x+w98yPdGcQ2zPZCFHyiEFs3+o6DREjxxdH6vR0gKLCS0h6nKi5qaLZ2/4bfqoqkibEcoItyGqEjn20TWkSDD5lY5aVOo2pOLN+8zk9jnVnm1bqrLzPde7J9/6xoNNQnSdbvhbgasPboeeVTXbW1lOIvx5ibJQM0W25i5LFbnhq+3o50TZkoIIsRx1celkcgHRslL1QewFXTFWbpgFjBIAAAAQZGVCR0EzMUVERDE1QUZCQTQ0NjJ8bI4yAAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

.window {
    width: 1000px;
    position: relative;
    display: inline-block;
    }

.shop {
    text-align: center;
    padding: 3vw;
}

#info {
    font-size: 1.2em;
    text-align: center;
    max-width: 80vw;
}

.placeholder {
    max-width: 100vw;
}

.placeholder img {
    margin: auto;
    width: 500px;
}

.resource {
    display: flex;
}

.flower {
    float: left;
    width: 200px;
    flex-shrink: 0;
    margin-right: 20px;
}

.bush {
    width: 400px;
    flex-shrink: 0;
    margin-right: 40px;
}

.shrub {
    width: 400px;
    flex-shrink: 0;
    margin-left: 20px;
}

.stem {
    display: flex;
}

.characteristics {
    width: 100%;
}

#visiting { 
    margin: auto; 
}

#address, #hours {
    font-size: 1.2em;
}

#address {
    float: left;
    width: 100%;
}

#hours {
    float: right;
    width: 100%;
    margin-left: 25px;
}


/* ~~ Images ~~ */

img {
    max-width: 100%;
    height: auto;
}

.window {
    padding: 2vw;
}

picture {
    margin: auto;
}

.garden-box {
    padding: 0vw 0 3vw 0;
    position: relative;
}


.counter {
    z-index: 2;
    position: relative;
}

.spray, .gaiwan, .teapot, .hanging-plants {
    display: inline;
    z-index: 6;
}

.spray {
    top: 600px;
    left: 642px;
    position: absolute;
}

.gaiwan {
    top: 750px;
    left: 52px;
    position: absolute;
}

.teapot {
    top: 675px;
    left: 145px;
    position: absolute;
}

.hanging-plants {
    top: -60px;
    left: 0px;
    position: absolute;
    padding: 2vw;
}

.chicory, .speedwell {
    position: absolute;
    bottom: -50px;
}

.chicory {
    left: -250px;
}

.speedwell {
    right: -250px;
}

.mandrake {
    position: absolute;
    z-index: -1;
    left: -280px;
    bottom: 400px;
}

.mandrake {
    animation: peeking 5s ease-in-out 0s 2 alternate-reverse forwards;
}

.shake:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 2s ease 0s 1 normal forwards;

  /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

.wobble:hover {
    animation: wobble 5s ease-in 0s 1 normal forwards;
}

.sway:hover {
    animation: sway 7s;
    animation-iteration-count: 1;
    animation-iteration-count: infinite;
}

.bob:hover {
    animation: bob 5s cubic-bezier(0.45, 0, 0.55, 1) 0s 1 normal forwards;
}


/* ~~ Animations ~~ */

@keyframes bob {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 100%;
	}

	10% {
		transform: rotate(1deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-1deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(1deg);
	}

	80% {
		transform: rotate(-1deg);
	}

	90% {
		transform: rotate(1deg);
	}
}

@keyframes peeking {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(100px);
	}
}

@keyframes shake {
     0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 100%;
	}

	10% {
		transform: rotate(2deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-4deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(4deg);
	}

	80% {
		transform: rotate(-2deg);
	}

	90% {
		transform: rotate(2deg);
	}
}

@keyframes wobble {
  0%, 100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(-30px) rotate(6deg);
	}

	30% {
		transform: translateX(15px) rotate(-6deg);
	}

	45% {
		transform: translateX(-15px) rotate(3.6deg);
	}

	60% {
		transform: translateX(9px) rotate(-2.4deg);
	}

	75% {
		transform: translateX(-6px) rotate(1.2deg);
	}
}



@keyframes sway {
	0%,
	100% {
		transform: translateX(0%);
		transform-origin: 50% 50%;
	}

	15% {
		transform: translateX(-30px) rotate(6deg);
	}

	30% {
		transform: translateX(15px) rotate(-6deg);
	}

	45% {
		transform: translateX(-15px) rotate(3.6deg);
	}

	60% {
		transform: translateX(9px) rotate(-2.4deg);
	}

	75% {
		transform: translateX(-6px) rotate(1.2deg);
	}

}



/* Steam animation by Nada Sadek: https://codepen.io/NadaSadek/pen/xxRgZbq */
/* MIT License below this section */

    .steam {
      position: absolute;
  top: 550px;
  left: 2px;
      width: 300px;
      height: 200px;
      z-index: 44;
      opacity: 0.8;
      display: flex;
      filter: blur(10px);
      -webkit-filter: blur(10px);
      &::before {
        content: "";
        width: 300px;
        height: 200px;
        background-color: white;
        -webkit-animation: fadeOutUp linear 5s;
        animation: fadeOutUp linear 5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        clip-path: polygon(
          33% 40%,
          52% 12%,
          84% 29%,
          62% 65%,
          54% 89%,
          73% 92%,
          73% 74%,
          53% 63%,
          77% 57%,
          95% 31%,
          71% 3%,
          34% 47%,
          50% 37%,
          69% 39%,
          69% 29%,
          76% 35%,
          61% 6%,
          64% 47%,
          91% 9%,
          51% 5%,
          84% 61%,
          91% 49%,
          35% 19%,
          40% 10%,
          57% 41%,
          57% 54%,
          92% 19%
        );

        border-radius: 60% 50%;
      }
    }


@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 0.1;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
  10% {
    opacity: 0.2;
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }
  20% {
    opacity: 0.3;
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
  }
  40% {
    opacity: 0.4;
    -webkit-transform: translate3d(0, -60%, 0);
    transform: translate3d(0, -60%, 0);
  }
  60% {
    opacity: 0.3;
    -webkit-transform: translate3d(0, -80%, 0);
    transform: translate3d(0, -80%, 0);
  }
  80% {
    opacity: 0.4;
    -webkit-transform: translate3d(0, -90%, 0);
    transform: translate3d(0, -90%, 0);
  }
  90% {
    opacity: 0.2;
    -webkit-transform: translate3d(0, -95%, 0);
    transform: translate3d(0, -95%, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 0.1;
    -webkit-transform: translate3d(0, -0%, 0);
    transform: translate3d(0, -00%, 0);
  }
  10% {
    opacity: 0.2;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
  20% {
    opacity: 0.3;
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
  }
  40% {
    opacity: 0.4;
    -webkit-transform: translate3d(0, -60%, 0);
    transform: translate3d(0, -60%, 0);
  }
  60% {
    opacity: 0.3;
    -webkit-transform: translate3d(0, -80%, 0);
    transform: translate3d(0, -80%, 0);
  }
  80% {
    opacity: 0.4;
    -webkit-transform: translate3d(0, -90%, 0);
    transform: translate3d(0, -90%, 0);
  }
  90% {
    opacity: 0.2;
    -webkit-transform: translate3d(0, -95%, 0);
    transform: translate3d(0, -95%, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

/*

Copyright (c) Nada Sadek

Permission is hereby granted, free of charge, to any person 
obtaining a copy of this software and associated documentation 
files (the "Software"), to deal in the Software without restriction,
 including without limitation the rights to use, copy, modify, 
merge, publish, distribute, sublicense, and/or sell copies of 
the Software, and to permit persons to whom the Software is 
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall 
be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
DEALINGS IN THE SOFTWARE.

*/




/* ~~ Mobile Adjustments ~~ */

/* Add responsiveness - on screens less than 500px, make the navigation links appear on top of each other, instead of next to each other */
@media screen and (max-width: 670px) {
/*  .nav li a {
    float: none;
    display: block;
    width: 100%;
  }

  .nav, .window {
    width: 100vw !important;
  } */

/* Hide desktop nav on mobile */  

.nav { display:none }

.window {
    width: 100vw;
}

picture {
    width: 100vw;
    padding: 25px;
}

.soil {
    width: 100vw;
    background: white;
}

.seed, .flowers {
    margin: auto;
    float: initial !important;
    padding: initial !important;
}

/*Make dropdown links appear inline*/
        ul { position: static;
             padding: 0;
            }display: none;

        /*Create vertical spacing*/
        li { margin-bottom: 1px;
           }

        /*Make all menu links full width*/
        ul li, li a { width: 100%;
}
}


@media(max-width: 670px) {
    #logo { display: inline; }
    #titling { display: none; }
    .spray, .gaiwan, .teapot, .hanging-plants, .mandrake, .chicory, .speedwell, .dormant {
        display: none !important;
    }
    .soil { width: 80vw !important; margin: 25px auto !important; border-radius: 1em; display: block !important; }
    .seed { margin-left: auto !important; }
    .speech-bubble { margin-right: 0 !important; }
    .speech-bubble::after { display: none; }
    #cross-quarter { padding: 0 25px; padding-right: 0 !important; }
    #landscape: { margin-top: 50px !important; }
    article { max-width: 90vw; }
    .garden-box { justify-content: center; display: flex; flex-wrap: wrap;}
    .shrub { margin-left: 0px; }
    .prune { max-width: 80vw; }
    .grow { margin-top: 1em; }
    .stretch { padding: 0; }
    .lean { margin: auto; padding-left:25px; }
    .lists { width: initial; }
    #visiting { margin: 0; }
    main { margin-bottom: 50px; }
    .resource { display: grid; }
    .flower { order:1; position: relative; padding-bottom: 10px; padding-top: 25px; margin: auto; }
    .characteristics { order:2; position: relative; }
    footer span { display: block; }

#mobile-menu a {
    float: none;
    display: block;
    width: 100%;
    padding: 12px;
}

summary {
    width: 100vw;
    font-size: 1em;
    text-align: left;
    margin: 35px 25px;
    padding: 15px 25px;
    border-top: 1px solid var(--sage);
    border-bottom: 1px solid var(--sage);
}

details {
    font-size: 1.5em;
}
}

@media(min-width: 670px) {
    #mobile-menu { display: none; }
}



/* ~~ Footer ~~ */

#landscape {
  border-bottom: 1px dotted;
  width: 100vw;
  margin-top: 0px;
  border-top: none;
}

.halftone {
  background-image: radial-gradient(
      circle at center,
      #a7804b 1px,
      transparent 0
    ), radial-gradient(circle at center, #a7804b 1px, transparent 0);
  background-size: 1.3rem 1.3rem;
  background-position: 0 0, 0.65rem 0.65rem, 0 0, 0.5rem 0.5rem;
  width: 100vw;
}

.grass {
    width: 100vw;
    text-align: left;
    display: inline-block;
    line-height: 1.3;
}

#topsoil {
    padding-top: 50px;
}

.soil {
    font-size: 1.1em;
    text-align: center;
    margin: auto;
    padding: 10% 0 10% 0;
    width: 650px;
    display: inline;
}

.seed {
    float: left;
    width: 70px;
    padding-right: 15px;
    margin-left: 45px;
}

.flowers {
    width: 70px;
    float: right;
    padding-left: 15px;
}

.speech-bubble {
	position: relative;
	background: #ffffff;
	border-radius: .4em;
	padding: 20px;
        margin-right: 10px;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 19px solid transparent;
	border-right-color: #ffffff;
	border-left: 0;
	border-bottom: 0;
	margin-top: -9.5px;
	margin-left: -19px;
}

.hummer {
    float: right;
    image-rendering: pixelated;
}

small {
    font-size: .9em;
    margin-right: 10px;
}

figcaption {
    font-size: 1em;
    font-style: italic;
    padding-top: 5px;
}

.title {
    font-size: 1.4em;
}

h3 {
    font-size: 1.4em;
}

a, a:visited {
    color: var(--soil);
    text-decoration: none;
    border-bottom: 1px dotted var(--dandelion);
}

.q {
    text-decoration: none;
    border-bottom: none;
}

.frame {
  clip-path: polygon(27px 27px, 97% 27px, 97% 97%, 3% 97%);
}

footer {
  text-align:center;
}