:root {
  --emboss: 0.04em 0.04em #00000088;
}

immersive-layout { color: white; text-shadow: var(--emboss); --nav-color: white; --nav-active-color: gold; --nav-hover-color:dodgerblue; }
immersive-view { padding-top: 1rem; }
section { position:relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; }
section a { color: blue; text-decoration: none; } section a:hover { color: dodgerblue; }
div.p { margin: 0 auto; text-shadow: none; color: #333; text-align: left; max-width: calc(100% - 5rem); }
image-gallery { width: 100%; }
angled-entry { width: 100%; height: 100%; }
svg[slot] { display: block; margin: 0; max-height: 8rem; height: 8rem; max-width: 8rem; filter: drop-shadow(0 0 1rem #00000099); }
showcase-item svg[slot] { margin: 0 auto; }
h2[slot], [slot] h2 { margin: 0 0 0.5rem 0; text-shadow: var(--emboss); }

#intro { background: radial-gradient(ellipse at center, #222 0%, black 100%); /* BLACK */ }
#intro:after { content: url(img/more.svg); pointer-events: none;
  position: absolute; bottom: 0.2rem; left: 50%; height: 3rem; width: 3rem;
  transform: translateX(-50%) rotateZ(180deg); transform-origin: center;
}

#solutions { background: radial-gradient(ellipse at center, #c1c1c1 0%,#828282 100%); /* GREY */ }

#portfolio { background: radial-gradient(ellipse at center, #bc0000 0%,#840000 100%); /* RED */ }
#portfolio h2 { margin: 0; font-size: 1.25rem; }
#portfolio div.p { color:white; text-shadow: var(--emboss); max-width: 100%; }
#portfolio a { color: deepskyblue; } #portfolio a:hover { color: skyblue; }
#portfolio cross-over { padding: 1rem 3rem; }

#testimonials { background: radial-gradient(ellipse at center, #c9de96 0%,#8ab66b 0%,#398235 100%); /* GREEN */ }
#rating * { text-align: center; } #rating typed-text { --speed: 25ms; --fade: 1200ms; font-size: 3.5rem; filter: drop-shadow(0.02em 0.02em 0.2em #00000088); }
#rating div.p { margin: 1rem auto; } bits-quote typed-text { --speed: 25ms; --fade: 400ms; font-family: serif; }

close-the-gap { --button-bg: white; --button-fg: #222; --buffer: 2em; font-family: sans-serif; }
close-the-gap [slot=beginning], [slot=ending] { text-shadow: var(--emboss); }
close-the-gap [slot=middle] { color: #00000088; font-style: italic; }
close-the-gap [slot=trigger] {
  padding: 0.75rem 1rem; /*left:50%; transform: translateX(-50%);*/
  border: 0; border-radius: 0.3rem; color: #222; background: white;
  box-shadow: 0 0.5rem 0.5rem 0 #00000088;
  transition: transform, box-shadow, opacity;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
} close-the-gap [slot=trigger]:active {
  transform: translateY(10%);
  box-shadow: 0 0.2rem 0.2rem 0 #000000bb;
} @media (hover:hover) and (pointer:fine) {
  close-the-gap [slot=trigger]:not(:active):hover {
    transform: translateY(-10%);
    box-shadow: 0 0.6rem 1rem 0 #00000088;
  }
}

#about { background: radial-gradient(ellipse at center, #ffa84c 0%,#ff7b0d 100%); /* ORANGE */ }

#contact { background: radial-gradient(ellipse at center, #c5deea 0%,#51a4d1 0%,#066dab 100%); /* BLUE */ }
#contact contact-form { transition: transform 200ms, opacity 800ms; }
#contact:not([visible]) contact-form { transform: scale(2); opacity: 0; }

@media screen and (orientation:portrait) {
  html { font-size: clamp(0.8rem, 4vmin, 5.5rem); }
  angled-entry, cross-over { grid-template-rows: 1.25fr 2fr; }
  showcase-item h2 { font-size: 2.5em; }
  [slot] h2 { text-align: center; }
  svg[slot] { height: 8rem; width: auto; }
  div.p { margin-top: 1rem; max-width: 70%; font-size: 1.2rem; }
  
  #portfolio cross-over { grid-template-rows:2fr 1.5fr; grid-template-columns: 1fr; }
  #portfolio h2 { text-align: left; font-size: 1.5rem; }
  image-gallery { height: 80%; }
  #portfolio img { box-shadow: none; filter: drop-shadow(0 0 1rem #00000088); }

  #rating typed-text { font-size: 3rem;}
  #rating div.p { max-width: 100%; }
  bits-quote { font-size: 1.2rem; }
  #hire { grid-template-rows: 0fr 1fr; }
  #hire svg[slot] { max-width: 100%; max-height: 100%; width: 100%; height: auto; }
  #hire [slot=trigger] { left: 50%; transform: translateX(-50%); }
}

@media screen and (orientation:landscape) {
  html { font-size: clamp(1.2rem, 4.2vmin, 5rem); }
  angled-entry { grid-template-columns: 1.15fr 2fr; }
  cross-over { grid-template-columns: 1.25fr 2fr; }
  cross-over div.p, angled-entry div.p, showcase-item div.p { margin: auto 0; }
  #hire { grid-template-columns: 1.15fr 2fr; }
  div.p { font-size: 0.8rem; }
}

#hire { overflow: visible; }
#hire svg[slot] { width:75%; height: auto; margin: 0; }