/* BEGIN WEIRD NAME */
#weird-name { padding-top:30px; }
#weird-name div { order:2; }
#weird-name .image-container { text-align:center; order:1; }
#weird-name .image-container img { max-width:min(80%, 400px); }
@media(min-width:768px){
  #weird-name div { order:unset; }
  #weird-name .image-container { max-width:min(400px, 40%); margin-top:-5vw; float:right; }
  #weird-name .image-container img { max-width:unset; width:100%; }
}
@media(min-width:1100px){
  #weird-name { overflow:unset; }
  #weird-name .image-container { margin-top:-80px; }
}
/* END WEIRD NAME */

/* BEGIN MAKE MAGIC */
#make-magic {
  display:block;
  max-width:100vw;
  overflow:hidden;
}
#make-magic .description {
  background-image:url('../img/about/magic-blobs.svg');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:40% 3%;
  position:relative;
  z-index:1;
}
#make-magic .description h3 .emoji { position:relative; bottom:-0.2rem; left:-0.4rem; }

#make-magic .stack {
  height:520px;
  user-select:none;
  -webkit-user-select:none;
  position:relative;
  z-index:0;
}
#make-magic .stack img {
  border:1px solid var(--text-primary);
  border-radius:8px;
  box-shadow:0 1px 30px -15px rgba(34, 34, 34, 0.3), 0 24px 30px -16px rgba(0, 29, 85, 0.18);
  max-width:100%;
  max-height:100%;
}
#make-magic .stack div {
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-flow:column;
  text-align:center;
  padding:3rem 0;

  margin:auto;
  height:stretch;
  width:100%;
  opacity:1;

  transform:scale(1.0) translateX(0);
  transition:all .2s;

  position:absolute;
  z-index:10;
  top:0;
  left:0;
  right:0;
}
#make-magic .stack div.hide {
  opacity:0;
  transform:scale(1.2) translateX(-20px);
}
#make-magic .stack div.hide + div {
  filter:blur(0px);
  transform:scale(1) translateX(0);
  z-index:9;
}
#make-magic .stack div.hide + div::before {opacity:0;}
#make-magic .stack div:nth-child(n+2) {
  z-index:8;
  filter:blur(1px);
  transform:scale(.9) translateX(24px);
}
#make-magic .stack div:nth-child(n+2)::before {
  content:'';
  background-color:var(--background-primary-50);
  position:absolute;
  transition:all .2s;
  inset:-100px;
  z-index:2;
}
#make-magic .stack div:nth-child(n+2) p { opacity:0; }
#make-magic .stack div:nth-child(n+3) { display:none;z-index:5;filter:blur(3px); }
#make-magic .stack p { font-size:.8em; }
#make-magic .stack b { display:block; }
#make-magic .stack .app { border-radius:0; border:unset; }
@media(min-width:768px){
  #make-magic .flex-col-row { gap:36px; align-items:center; }
  #make-magic .description { max-width:min(58%, 600px); }
  #make-magic .stack { width:40vw; height:stretch; }
}
@media(min-width:1000px){
  #make-magic { padding-top:40px; }
  #make-magic .description { padding-top:0; }
  #make-magic .stack { margin-left:40px; max-width:35%; }
  #make-magic .stack div:nth-child(2) {transform:scale(.9) translateX(30px);}
  #make-magic .stack div:nth-child(3) { display:block; transform:scale(0.75) translateX(60px); }
}
/* END MAKE MAGIC */

/* BEGIN EXCELLENT-EXPERTS */
#excellent-experts { display:flex; flex-flow:column; gap:3vw; padding:0 var(--page-gutter); margin-inline:auto; max-width:var(--container-max); position:relative; margin-top:20px; z-index:5; }
#excellent-experts img { max-width:100%; }

#excellent-trophy { position:absolute; right:4vw; top:-50px; z-index:-1; }
#excellent-trophy * { width:max(245px, 30vw); }

#be-excellent { order:1; padding-right:min(22vw, 200px); text-shadow:0 0 10px var(--background-primary), 0 0 20px var(--background-primary), 0 0 30px var(--background-primary); }
#ds-experts { order:2; }
#ds-experts em { font-weight:bold; font-style:normal; }
#ds-awesome { order:3; }

@media(min-width:690px){
  #excellent-trophy { top:0; }
  #be-excellent { padding-right:max(300px, 35vw); }
}
@media(min-width:900px){
  #excellent-experts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-column-gap:1em; grid-row-gap:1.5em; margin-bottom:2em; }
  #excellent-experts > * { order:unset; flex:0 0 50%; display:flex; flex-flow: column; align-items:center; justify-content:center; justify-items:center; }
  #excellent-experts .description { align-items:start; }
  #excellent-experts .description p { margin:0 0 0.5em; }

  #excellent-trophy { position:static; }
  #excellent-trophy * { width:min(300px, 30vw); }
  #be-excellent { padding-right:0; }
  #ds-experts {}
  #ds-awesome {}
}

/* END EXCELLENT-EXPERTS */

/* BEGIN COMMUNITY POWERED */
#community-powered {margin-top:20px;}
@media(min-width:768px){
  #community-powered {margin-top:10px;}
}
/* END COMMUNITY POWERED */