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;
  margin:30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 0px;
  font-weight: normal;
/* see on page ...  font-size: clamp( ,   ,  ); */
}



/* First Section */

section p {
    font-size: min(1.1em, 5.0vw);
}

.summary > nav ol > li > .like-logo  {
    text-decoration: none;
    color: #cc6633;
    line-height: 100px;
}


.summary {
  column-gap: 25px;
  margin:8px;
  margin-bottom:20px;
  font-size:24px;
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
}


.summary > nav > div {
    grid-column: 1;
    background: #d3ecbc;
    padding: 20px;
    border-radius: 25px 25px;
}
.summary > nav > div > .auto-img {
   width: min(100%,480px);
   max-width:100%;
   margin:auto;
   display: block;
}
 
.summary > nav ol > li > a {
    line-height: 40px;
} 

.summary > .main-col {
  margin:20px;
  font-size:24px;
}

.summary > .main-col p {
     font-size: min(1.1em, 6.0vw);
}

/* main bubbles */

.bubbles > article p {
     font-size: min(1.1em, 6.0vw);
}

.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;
}
@media screen and (max-width: 1520px) {
   .bubbles {
      grid-template-columns: 1fr 1fr ;
   }
}   
@media screen and (max-width: 1023px) {
   .bubbles {
      grid-template-columns: 1fr ;
   }
   .summary> * {
       grid-column: 1
   }
   .summary { 
     grid-template-columns: auto;
   }
} 

/* Attribs */

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

a {
  text-decoration: none;
  color:#010a7d
}

a:hover {
  text-decoration: underline;
}

.breadcrumb {
    padding: 15px 3px 8px 8px;
    line-height: 30px;
    background: #eee;
    font-family: "Roboto";
}
.breadcrumb>ol {
   margin:0px;
   padding:0px;
}
.breadcrumb>ol>li {
    list-style-type: none;
    display: inline; 
}
.breadcrumb>ol>li::before {
     content: '  |  ';
 }
.breadcrumb>ol>li:first-child::before {
     content: '';
 }
.breadcrumb a {
     margin: 30px 15px 0px 15px;
}

li.no-num {
    list-style-type: none;
}

#profile {
   float:left;
   margin-right:10px;
}

.favicon img {
  margin:3px;
  width:32px;
  height:32px;
}
.favicon ~ hr{
    width: 25%;
    margin: 30px;
    clear: left;
}

/* after grid */

footer {
   background: linear-gradient(180deg, rgba(130,58,0,1) 0%, rgba(0,0,0,1) 100%);
   color: #ffffbb;
   text-indent: 30px;
   margin: 40px 0 0 0;
   height: 40px;
   padding: 0;
}
footer a {
   color: #ffffbb;
   line-height: 30px;
}
footer.bottom {
  position: fixed;
  bottom: 0;
  width:100%;
  display: block;
  margin: 50px 0 0 0;
}