html, body, header {
  margin:0px;
  padding:0px;
  font-size:22px;
  scroll-padding-top: 100px; 
  scroll-behavior: smooth;
  line-height:1.5;
}

#logo {
  text-decoration: none;
  color:#ffee99;
  font-size:42px;
  line-height:100px;
  text-align:center;
  text-shadow: -1px -1px 2px #eeff99;
  text-shadow: 1px 1px 2px black;
}

header {
  text-align:center;
  background: linear-gradient(180deg, rgba(130,58,0,1) 0%, rgba(0,0,0,1) 100%);
  padding:0px;
  margin:0px;

}

@supports (animation-timeline: scroll()) {
   .breadcrumb {
      padding-top:108px;
   }
   header {
      position:fixed;
      width:100%;
      height:100px;
      animation-name: ScrollAnimation;
      animation-timeline: scroll();
      z-index:1;
   }
   @keyframes ScrollAnimation {
     from {
        top: 0px;
     }
     to {
        top: -100px;
     }
   }
}


/* End Header */

#main-tagline {
  padding: 100px 0 0 0;
}

/* First Section */

#summary {
  display: inline-grid;
  grid-template-columns: 480px auto;
  grid-template-rows: auto 1fr; 
  column-gap: 25px;
  margin:8px;
  margin-bottom:20px;
  font-size:24px;
}

#summary > div {
  margin:20px;
  font-size:24px;
}

#summary > nav {
    grid-column: 1;
    background:#eee;
    padding: 0px 20px 0px 20px;
    margin-bottom:20px;
    border-radius: 25px 25px;
}
#summary > nav > .auto-img {
   width:480px;
   max-width:100%;
   margin:auto;
   display: block;
}
 
@media screen and (max-width: 1023px) {

}    

/* main bubbles */


.bubbles {
  display: grid;
  gap:32px;
  justify-content: center;
  margin: 20px;
}

.bubbles > article {
    padding: 20px;
    border: 2px solid silver;
    border-radius: 25px 25px;
}

.bubbles {
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-areas: 
    "summary summary summary";
}
@media screen and (max-width: 1520px) {
   .bubbles {
      grid-template-columns: 1fr 1fr ;
      grid-template-areas: 
       "summary summary ";
   }
}   
@media screen and (max-width: 1023px) {
   .bubbles {
      grid-template-columns: 1fr ;
      grid-template-areas: 
       "summary";
   }
   .#summary> * {
       grid-column: 1
   }
   #summary { 
     grid-template-columns: auto;
   }
} 

/* Attribs */

a[emoji] {
   line-height:50px;
}
a[emoji]::before {
   content: "\1F449"; /* Unicode for 👉 */
}