<section>
  <p>HTML</p>
  <div>
    <div>
      <div>
        <div class="theHTMLIconIsHere theHTMLOrCSSIconIsHere">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <p>CSS</p>
  <div>
    <div>
      <div>
        <div class="theCSSIconIsHere theHTMLOrCSSIconIsHere">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</section>
<section>
  <p>JS</p>
  <div>
    <div class="theJSIconIsHere">JS</div>
  </div>
</section>

:root{
  --iconWidthHere: 41vh;
  --iconHeightHere: 59vh;
  --backHere: black;
}
html{
  scroll-snap-type: y mandatory;
}
html, body{
  margin: 0;
  padding: 0;
}
section{
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  scroll-snap-align: center;
  background: black;
  color: #eee;
  font-size: 3vw;
  font-family: Times New Roman;
}
section > p{
  text-shadow: 3px 3px 1px red;
}
section > p, section > div{
  flex-grow: 7;
  display: flex;
  align-items: center;
  justify-content: center;
}
section > div{
  flex-grow: 3;
}
div:has(> div > .theHTMLOrCSSIconIsHere){
  perspective: calc(var(--iconHeightHere)*2);
  padding: calc(var(--iconHeightHere)*0.3) calc(var(--iconWidthHere)*0.3);
}
div:has(> .theHTMLOrCSSIconIsHere){
  transform: rotateX(-35deg);
  padding: calc(var(--iconHeightHere)*0.05) calc(var(--iconWidthHere)*0.05);
  position: relative;
}
div:has(> .theHTMLIconIsHere){
  background: #d51; /* This color is perfect */
}
div:has(> .theCSSIconIsHere){
  background: #15d; /* This color is perfect */
}
.theHTMLOrCSSIconIsHere > div:nth-child(8):after, div:has(> .theHTMLOrCSSIconIsHere):before, div:has(> .theHTMLOrCSSIconIsHere):after{
  content: "";
  display: block;
  position: absolute;
}
div:has(> .theHTMLOrCSSIconIsHere):before, div:has(> .theHTMLOrCSSIconIsHere):after{
  z-index: 9;
  background: var(--backHere);
  height: calc(var(--iconHeightHere) * 1);
  width: calc(var(--iconWidthHere) * 0.3);
  bottom: calc(var(--iconHeightHere) * -0.57);
}
div:has(> .theHTMLOrCSSIconIsHere):before{
  transform: rotate(65deg);
  left: 50%;
}
div:has(> .theHTMLOrCSSIconIsHere):after{
  transform: rotate(-65deg);
  right: 50%;
}
.theHTMLOrCSSIconIsHere{
  width: var(--iconWidthHere);
  height: var(--iconHeightHere);
  position: relative;
}
.theHTMLOrCSSIconIsHere > div{
  position: absolute;
  background: #eee;
  z-index: 5;
}
.theHTMLIconIsHere > div:nth-child(2), .theHTMLIconIsHere > div:first-child, .theHTMLIconIsHere > div:nth-child(3){
  left: 5%;
}
.theHTMLIconIsHere > div:nth-child(2), .theHTMLIconIsHere > div:first-child{
  top: 5%;
}
.theHTMLIconIsHere > div:first-child, .theHTMLIconIsHere > div:nth-child(3){
  width: calc(var(--iconWidthHere)*0.9);
  height: calc(var(--iconHeightHere)*0.15);
}
.theHTMLIconIsHere > div:nth-child(2),.theHTMLIconIsHere > div:nth-child(4){
  width: calc(var(--iconHeightHere)*0.15);
  height: calc(var(--iconHeightHere)*0.35);
}
.theHTMLIconIsHere > div:nth-child(3){
  top: 31%;
}
.theHTMLIconIsHere > div:nth-child(4){
  top: 45%;
  right: 5%;
}
.theHTMLIconIsHere > div:nth-child(5), .theHTMLIconIsHere > div:nth-child(6){
  width: calc(var(--iconWidthHere)*0.45);
  height: calc(var(--iconHeightHere)*0.15);
  bottom: 14%;
}
.theHTMLIconIsHere > div:nth-child(5){
  left: 50%;
  transform: skewY(-21deg);
}
.theHTMLIconIsHere > div:nth-child(6){
  right: 49%;
  transform: skewY(21deg);
}
.theHTMLIconIsHere > div:nth-child(7){
  height: calc(var(--iconHeightHere)*0.25);
  width: calc(var(--iconHeightHere)*0.15);
  bottom: 21%;
  left: 5%;
}
.theHTMLOrCSSIconIsHere > div:nth-child(8){
  z-index: 3;
  height: calc(var(--iconHeightHere)*1);
  width: calc(var(--iconWidthHere)*0.5);
  bottom: 0;
  right: 0;
}
.theHTMLIconIsHere > div:nth-child(8){
  background: #e73;
}
.theCSSIconIsHere > div:nth-child(8){
  background: #37e;
}
.theHTMLOrCSSIconIsHere > div:nth-child(8):after{
  z-index: 6;
  bottom: calc(var(--iconHeightHere)*-0.03);
  right: calc(var(--iconHeightHere)*-0.05);
  height: calc(var(--iconHeightHere)*0.1);
  width: calc(var(--iconWidthHere)*0.7);
  rotate: -25deg;
}
.theCSSIconIsHere > div:nth-child(8):after{
  background: #15d;
}
.theHTMLIconIsHere > div:nth-child(8):after{
  background: #d51;
}
.theJSIconIsHere{
  height: min(var(--iconHeightHere), var(--iconWidthHere));
  width: min(var(--iconHeightHere), var(--iconWidthHere));
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background: yellow;
  padding: 0 0.5vw 0 0;
  font-size: calc(min(var(--iconHeightHere), var(--iconWidthHere)) / 3);
  font-family: Helvetica;
  font-weight: bold;
  color: black;
}
.theCSSIconIsHere > div:nth-child(2), .theCSSIconIsHere > div:first-child, .theCSSIconIsHere > div:nth-child(3){
  right: calc(var(--iconWidthHere)*0.1);
  width: calc(var(--iconWidthHere)*0.8);
  height: calc(var(--iconHeightHere)*0.11);
}
.theCSSIconIsHere > div:first-child{
  top: calc(var(--iconHeightHere)*0.109);
}
.theCSSIconIsHere > div:nth-child(2){
  top: calc(var(--iconHeightHere)*0.23);
  rotate: -25deg;
}
.theCSSIconIsHere > div:nth-child(3){
  top: calc(var(--iconHeightHere)*0.36);
}
.theCSSIconIsHere > div:nth-child(4){
  right: calc(var(--iconWidthHere)*0.1);
  width: calc(var(--iconHeightHere)*0.11);
  height: calc(var(--iconHeightHere)*0.37);
  top: calc(var(--iconHeightHere)*0.36);
}
.theCSSIconIsHere > div:nth-child(5), .theCSSIconIsHere > div:nth-child(6){
  width: calc(var(--iconHeightHere)*0.11);
  height: calc(var(--iconHeightHere)*0.31);
  top: calc(var(--iconHeightHere)*0.59);
}
.theCSSIconIsHere > div:nth-child(5){
  right: calc(var(--iconWidthHere)*0.26);
  rotate: 65deg;
}
.theCSSIconIsHere > div:nth-child(6){
  left: calc(var(--iconWidthHere)*0.25);
  rotate: -65deg;
}
.theCSSIconIsHere > div:nth-child(7){
  left: calc(var(--iconWidthHere)*0.09);
  width: calc(var(--iconHeightHere)*0.11);
  height: calc(var(--iconHeightHere)*0.17);
  top: calc(var(--iconHeightHere)*0.56);
}