@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');
@import url('https://unpkg.com/reset-css@5.0.2/reset.css');


body {
  --dark-text: #572500;
  --yellow-text: #ffee9c;

  font-family: "Verdana", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;  
  word-spacing: -1px;
}

.icon {
  width: 36px;
  height: 36px;
  vertical-align: -0.125em;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.socket {
  background-color: #a1bef8;
  border: 2px solid var(--dark-text);
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  font-size: 90%;
  letter-spacing: 0;
  color: var(--dark-text);
  padding: 2px 12px;
  -webkit-filter: drop-shadow(0 3px 0 var(--dark-text));
          filter: drop-shadow(0 3px 0 var(--dark-text));
  text-shadow: none;  
  position: relative;
  bottom: 1px;
}
.socket-dropdown {
  -webkit-filter: none;
          filter: none;
  font-size: 1.2em;
  line-height: 1;
  padding: 0;
}
.socket-dropdown li {
  padding: 12px 18px 10px;
  border-bottom: 4px solid transparent;
}
.socket-dropdown li:first-child {
  padding-top: 16px;
}
.socket-dropdown li:last-child {
  padding-bottom: 16px;
}
.socket-dropdown li:focus,
.socket-dropdown li:hover {
  border-radius: 4px;
  background-color: #7faaff;
  border-bottom: 4px solid #7faaff;
  cursor: pointer;
}
.tippy-box {
  background-color: transparent;
  color: inherit;
}
.tippy-content {
  padding-top: 0;
}

.header {
  background: url('./images/Header_BG.png') no-repeat center;
  color: var(--yellow-text);
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: 4em;
  letter-spacing: 2px;
  margin: 1em 0 .5em;
  text-shadow: rgb(86, 48, 0) 4px 0px 0px, rgb(86, 48, 0) 3.87565px 0.989616px 0px, rgb(86, 48, 0) 3.51033px 1.9177px 0px, rgb(86, 48, 0) 2.92676px 2.72656px 0px, rgb(86, 48, 0) 2.16121px 3.36588px 0px, rgb(86, 48, 0) 1.26129px 3.79594px 0px, rgb(86, 48, 0) 0.282949px 3.98998px 0px, rgb(86, 48, 0) -0.712984px 3.93594px 0px, rgb(86, 48, 0) -1.66459px 3.63719px 0px, rgb(86, 48, 0) -2.51269px 3.11229px 0px, rgb(86, 48, 0) -3.20457px 2.39389px 0px, rgb(86, 48, 0) -3.69721px 1.52664px 0px, rgb(86, 48, 0) -3.95997px 0.56448px 0px, rgb(86, 48, 0) -3.97652px -0.432781px 0px, rgb(86, 48, 0) -3.74583px -1.40313px 0px, rgb(86, 48, 0) -3.28224px -2.28625px 0px, rgb(86, 48, 0) -2.61457px -3.02721px 0px, rgb(86, 48, 0) -1.78435px -3.57996px 0px, rgb(86, 48, 0) -0.843183px -3.91012px 0px, rgb(86, 48, 0) 0.150409px -3.99717px 0px, rgb(86, 48, 0) 1.13465px -3.8357px 0px, rgb(86, 48, 0) 2.04834px -3.43574px 0px, rgb(86, 48, 0) 2.83468px -2.82216px 0px, rgb(86, 48, 0) 3.44477px -2.03312px 0px, rgb(86, 48, 0) 3.84068px -1.11766px 0px, rgb(86, 48, 0) 3.9978px -0.132717px 0px;
}

.full-section {
  width: 100%;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
}
.blue-section {
  background-image: url('images/TiledWallpaper.png'), url('images/Trailer_BG.png');
  background-repeat: repeat, repeat-x;
  background-size: auto, auto 100%;
  color: var(--yellow-text);
  width: 100%;
}
.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  -moz-user-select: none;
       user-select: none; /* Standard syntax */
}


#section1 {
  background-image: url('images/Hero_BG_10.png');
  background-position: center;
  background-repeat: repeat;
  background-size: auto;

  overflow: hidden;
  position: relative;
}
#section1 #halftone-bg {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: auto;
  transform: translate(-50%,0);
}
#section1 #characters {
  position: relative;
  z-index: 1;
  height: 100%;
}
#section1 #characters > img {
  position: absolute;
  left: 50%;
  transform-origin: bottom;
}
#section1 #characters #mary {
  height: 78vh;
  bottom: -6%;
  transform: translate(-50%, 0); 
}
#section1 #characters #silvia {
  height: 70vh;
  bottom: -2%;
  transform: translate(33%, 0); 
}
#section1 #characters #ethan {
  height: 71vh;
  bottom: -2%;
  transform: translate(-125%, 0); 
}

#section1 #characters #logo {
  position: absolute;
  left: 50%;
  height: 38vh;
  aspect-ratio: 26/15;
  flex-direction: column;
  transform: translate(-50%,0);
}
#section1 #characters #logo-bubble {
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
  position: absolute;
}
#section1 #characters .logo-text {
  width: 86%;
  max-width: 90vw;
  z-index: 2;
}
.logo-shrink {
  -webkit-animation: logo-shrink-animation 2s steps(1, end) infinite;
          animation: logo-shrink-animation 2s steps(1, end) infinite;
  transform-origin: bottom center;
}
.logo-expand {
  -webkit-animation: logo-expand-animation 2s steps(1, end) infinite;
          animation: logo-expand-animation 2s steps(1, end) infinite;
}
@-webkit-keyframes logo-shrink-animation {
  0%   { transform: scale(1); }
  50%  { transform: scale(1,.8); } /* instant jump at 50% */
  100% { transform: scale(1); }  
}
@keyframes logo-shrink-animation {
  0%   { transform: scale(1); }
  50%  { transform: scale(1,.8); } /* instant jump at 50% */
  100% { transform: scale(1); }  
}
@-webkit-keyframes logo-expand-animation {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02,1); } /* instant jump at 50% */
  100% { transform: scale(1); }  
}
@keyframes logo-expand-animation {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02,1); } /* instant jump at 50% */
  100% { transform: scale(1); }  
}




.custom-border {
  box-shadow: 0px 0px 10px 1rem rgba(0, 0, 0, 0.29);
  background-color: var(--dark-text);
  width: 100%;
  height: 8px;
}

#section1 .play-steam-container {
  position: absolute;
  bottom: 10vh;
  z-index: 3;
}
.sosmed {
  gap: 1em;
  margin-top: .5em;
}
#section1 .sosmed a {
  -webkit-filter: drop-shadow(0 2px 12px rgba(0,0,0, 1));
          filter: drop-shadow(0 2px 12px rgba(0,0,0, 1));
}
.sosmed a:focus img,
.sosmed a:hover img {
  -webkit-filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
          filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.play-steam > img {
  width: 48px;
}
.play-steam {
  background: linear-gradient(90deg, #00dbde, #fc00ff, #00dbde);
  text-decoration: none;  
  gap: .4em;
  padding: .6em 1em;
  font-size: 1.6em;
  /* font-weight: bold; */
  box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
  color: white;
  background-size: 300%;
  border-radius: 2em;
  -webkit-animation: btn-steam-glow 8s linear infinite;
          animation: btn-steam-glow 8s linear infinite;
  border: 3px solid #fff;
}
.play-steam::before {
  position: absolute;
  content: "";
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  z-index: -1;
  background: inherit;
  background-size: inherit;
  border-radius: 4em;
  opacity: 0;
  transition: 0.5s;
}
.button-small-scale:hover, 
.button-small-scale:focus {
  transform: scale(1.1);
}
.button-small-scale:active {
  transform: scale(1);
}
.button-scale:hover, 
.button-scale:focus {
  transform: scale(1.2);
}
.button-scale:active {
  transform: scale(1.05);
}
.button-transition {
  transition: all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.play-steam:hover::before,
.play-steam:focus::before {
  opacity: 1;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  -webkit-animation: btn-steam-glow 8s linear infinite;
          animation: btn-steam-glow 8s linear infinite;
}

@-webkit-keyframes btn-steam-glow {
  to {
    background-position: 300%;
  }
}
@keyframes btn-steam-glow {
  to {
    background-position: 300%;
  }
}
#slow-spin {
  -webkit-animation: slowSpin 100s linear infinite;
          animation: slowSpin 100s linear infinite;
  position: absolute;
  top: 0;
  height: 190vh;
  scale: 200%;
  opacity: .8;
}
@-webkit-keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}








/* Section 2: Trailer */
#section2 p {
  font-size: 1.8em;
  margin: 0 auto 1em;
  text-align: center;
  max-width: 70vw;
  letter-spacing: 1px;
  line-height: 1.4em;
  text-shadow: var(--dark-text) 0 0 8px;
}
#trailer-container {
  position: relative;
}
#trailer-laptop {
  width: 100%;
  margin-bottom: -4px;
}
#trailer-embed {
  aspect-ratio: 16/9; 
  height: auto;
  width: 47.5vw;
  position: absolute;
  left: calc(50% - 23.75vw);
  top: 4%;
  z-index: 2;
  border-radius: .5em;
  overflow: hidden;
  border: 3px solid var(--dark-text);
}
#trailer-embed > img {
  width: 100%;
}
#trailer-embed::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: rgba(50, 50, 93, 0.75) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.6) 0px 18px 36px -18px inset;
  z-index: 3;
}
#trailer-cat {
  position: absolute;
  left: 0;
  bottom: -5em;
  z-index: 4;
}
#trailer-book {
  position: absolute;
  right: 0;
  bottom: 0;
}





/* Section 3: Game Features */
#section3 {
  background-image: url('./images/Section3_BG.png');
  position: relative;
  overflow: hidden;
}
#section3::before {
  content: " ";
  position: absolute;
  top: 8px;
  width: 100%;
  height: 600px;
  background-image: url('./images/Section3_BG_Gradient.png');
  background-repeat: repeat-x;
}
#section3 .custom-border {
  position: relative;
}
#section3 .header {
  color: white;
  background-image: url('./images/Header_BG_White.png');
  position: relative;
}
#section3 #bg-sketch {
  background: url('./images/Section3_SketchBG1_Small.png?v=0.1'), url('./images/Section3_SketchBG2_Small.png?v=0.1');
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  width: 100%;
  position: absolute;
  height: 200%;
  top: 10%;
}
#section3 .feature-container {
  position: relative;
  z-index: 2;
  flex-direction: column;
  padding: 6em 0;
  gap: 6em;
}
.feature-item {
  display: flex;
  align-items: flex-start;
}
.feature-container .feature-item:nth-child(2) {
  flex-direction: row-reverse;
}
.feature-item img {
  border: .5em solid white;
  border-radius: 1em;
  max-width: 44vw;
}
.feature-item-box {
  width: 14em;
  z-index: 2;
  position: relative;
}
.feature-item-box > div {
  background: url('./images/Section3_Box.png') no-repeat;
  background-size: 100% 100%;
  color: var(--dark-text);
  font-size: 1.1em;
  line-height: 1.5em;
  padding: 1.5em 1.2em 3em;
  width: 15.5em;
  position: absolute;
  top: -2em;
}
.feature-item-box h3 {
  font-family: "Young Serif", serif;
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: .5em;
  letter-spacing: .5px;
}
.feature-container .feature-item:nth-child(2) .feature-item-box > div {
  right: 0;
}




/* Section 4: Screenshots */
#section4 {
  position: relative;
  margin-bottom: 8px;
}
#section4 .header {
  background-image: none;
  color: white;
  position: absolute;
  top: 0;
}
#section4 #image-carousel {
  position: absolute;
  left: 0;
  top: 8px;
  width: 100%;
  height: 100%;
}
.splide__track, .splide__slide, .splide__slide img {
  height: 100%;
}
.splide__slide img {
  -o-object-fit: contain;
     object-fit: contain;
}
.splide__arrow {
  background: rgba(0,0,0,0.2);
  border: 0;
  border-radius: 1em;
  cursor: pointer;
  position: absolute;
  top: calc(50% - 26px);
  z-index: 1;
  height: 52px;
  width: 52px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: .5s background-color;
}
.splide__arrow:focus,
.splide__arrow:hover {
  background: rgba(0,0,0,0.4);
}
.splide__arrow img {
  max-width: 32px;
}
.splide__arrow--prev {
  left: .5em;
}
.splide__arrow--next {
  right: .5em;
}
.splide__pagination {
  position: relative;
  bottom: 48px;
  z-index: 1;  
  gap: 4px;
}
.splide__pagination__page {  
  background-color: transparent;
  background-image: url('./images/Slider_Bullet.png');
  background-size: contain;
  cursor: pointer;
  border: 0;
  width: 24px;
  height: 24px;
}
.splide__pagination__page:focus,
.splide__pagination__page:hover {
  transform: scale(1.2);
}
.splide__pagination__page.is-active {  
  background-image: url('./images/Slider_BulletActive.png');
}




/* Section 5: Footer */
#section5 .container {
  flex-direction: column;
  gap:2em;
  padding: 5em 0 2em;
}
#section5 .sosmed-links {
  display: flex;
  flex-direction: column;
  gap: .5em;
  font-size: 1.25em;
}
#section5 .sosmed-links a {
  background-color: rgba(0,0,0,.2);
  color: white;
  text-decoration: none;
  gap: .5em;
  border-radius: 8px;
  border: 2px solid white;
  padding: .3em .8em;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
#section5 .sosmed-links a:focus,
#section5 .sosmed-links a:hover {
  background-color: rgba(0,0,0,.4);
}
#section5 .sosmed-links a > span {
  flex-grow: 1;
  text-align: center;
}
#section5 .play-steam {
  position: relative;
}
#section5 .play-steam .cat {
  position: absolute;
  bottom: calc(100% - 4px);  
  left: calc(50% - 60px);
  width: 120px;
}
#section5 .studio-logo {
  gap: 4em;
  width: 100%;
}
#section5 .studio-logo > div {
  flex-basis: 50%;  
  display: flex;
}
#section5 .studio-logo #posh-cat {
  text-align: right;
  flex-direction: row-reverse;
}
#section5 #copyright {
  color: white;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,.7);
}
#section5 #copyright a {
  color: white;
}
#section5 #copyright a:focus,
#section5 #copyright a:hover {
  color: orange;
}


/* Accomodating 4K monitors */
@media (min-width: 3000px) {
  .icon {
    width: 80px;
    height: 80px;
  }
  .header {
    font-size: 6em;
    text-shadow: rgb(86, 48, 0) 8px 0px 0px, rgb(86, 48, 0) 7.93758px 0.997398px 0px, rgb(86, 48, 0) 7.7513px 1.97923px 0px, rgb(86, 48, 0) 7.44406px 2.93018px 0px, rgb(86, 48, 0) 7.02066px 3.8354px 0px, rgb(86, 48, 0) 6.4877px 4.68078px 0px, rgb(86, 48, 0) 5.85351px 5.45311px 0px, rgb(86, 48, 0) 5.12798px 6.14035px 0px, rgb(86, 48, 0) 4.32242px 6.73177px 0px, rgb(86, 48, 0) 3.44941px 7.21814px 0px, rgb(86, 48, 0) 2.52258px 7.59188px 0px, rgb(86, 48, 0) 1.55638px 7.84714px 0px, rgb(86, 48, 0) 0.565898px 7.97996px 0px, rgb(86, 48, 0) -0.433417px 7.98825px 0px, rgb(86, 48, 0) -1.42597px 7.87189px 0px, rgb(86, 48, 0) -2.39627px 7.63269px 0px, rgb(86, 48, 0) -3.32917px 7.27438px 0px, rgb(86, 48, 0) -4.21013px 6.80256px 0px, rgb(86, 48, 0) -5.02539px 6.22459px 0px, rgb(86, 48, 0) -5.76223px 5.54948px 0px, rgb(86, 48, 0) -6.40915px 4.78778px 0px, rgb(86, 48, 0) -6.95606px 3.95136px 0px, rgb(86, 48, 0) -7.39442px 3.05329px 0px, rgb(86, 48, 0) -7.71739px 2.10757px 0px, rgb(86, 48, 0) -7.91994px 1.12896px 0px, rgb(86, 48, 0) -7.9989px 0.132735px 0px, rgb(86, 48, 0) -7.95304px -0.865561px 0px, rgb(86, 48, 0) -7.78307px -1.85035px 0px, rgb(86, 48, 0) -7.49165px -2.80627px 0px, rgb(86, 48, 0) -7.08333px -3.71839px 0px, rgb(86, 48, 0) -6.56448px -4.57249px 0px, rgb(86, 48, 0) -5.94318px -5.35524px 0px, rgb(86, 48, 0) -5.22915px -6.05442px 0px, rgb(86, 48, 0) -4.43352px -6.65912px 0px, rgb(86, 48, 0) -3.5687px -7.15992px 0px, rgb(86, 48, 0) -2.6482px -7.54898px 0px, rgb(86, 48, 0) -1.68637px -7.82024px 0px, rgb(86, 48, 0) -0.698222px -7.96947px 0px, rgb(86, 48, 0) 0.300817px -7.99434px 0px, rgb(86, 48, 0) 1.29516px -7.89446px 0px, rgb(86, 48, 0) 2.2693px -7.67139px 0px, rgb(86, 48, 0) 3.20802px -7.32862px 0px, rgb(86, 48, 0) 4.09668px -6.87148px 0px, rgb(86, 48, 0) 4.92142px -6.30711px 0px, rgb(86, 48, 0) 5.66936px -5.64432px 0px, rgb(86, 48, 0) 6.32883px -4.89346px 0px, rgb(86, 48, 0) 6.88954px -4.06623px 0px, rgb(86, 48, 0) 7.34274px -3.17556px 0px, rgb(86, 48, 0) 7.68136px -2.23532px 0px, rgb(86, 48, 0) 7.90012px -1.26021px 0px, rgb(86, 48, 0) 7.9956px -0.265434px 0px;
  }
  .sosmed {
    gap: 2em;
    margin-top: 1em;
  }
  .socket {
    border-width: 3px;
    border-radius: 12px;
    filter: drop-shadow(0 8px 0 var(--dark-text));  
    bottom: 5px;
    padding: 4px 24px;
  }
  .socket-dropdown {
    font-size: 2.6em;
  }
  .socket-dropdown li {
    padding: 24px 32px 20px;
  }
  .socket-dropdown li:first-child {
    padding-top: 32px;
  }
  .socket-dropdown li:last-child {
    padding-bottom: 32px;
  }

  /* Hero */
  .play-steam {    
    font-size: 4em;
    gap: 0.4em;
    border-width: 6px;
  }
  .play-steam > img {
    width: 108px;
  }

  /* Trailer */
  #section2 p {
    font-size: 3em;
    margin-bottom: 2em;
  }

  /* Game Features */
  #section3 #bg-sketch {
    background-image: url('./images/Section3_SketchBG1_xxl.png?v=0.2'), url('./images/Section3_SketchBG2_xxl.png?v=0.1');
    background-position: 16% top, 84% top;
  }
  .feature-item-box {
    width: 30em;
  }
  .feature-item-box > div {
    font-size: 2em;
  }
  .feature-item img {
    min-width: 25vw;
  }

  /* Screenshots */
  .splide__arrow--prev {
    left: 1.5em;
  }
  .splide__arrow--next {
    right: 1.5em;
  }
  .splide__arrow {
    top: calc(50% - 48px);
    width: 128px;
    height: 128px;
  }
  .splide__arrow img {
    max-width: 80px;
  }
  .splide__pagination {
    bottom: 128px;
    gap: 24px;
  }
  .splide__pagination__page {
    width: 72px;
    height: 72px;
  }

  /* Footer */
  #section5 .container {
    gap: 6em;
    padding: 16em 0 8em;
  }
  #section5 .play-steam .cat {
    bottom: calc(100% - 18px);
    left: calc(50% - 180px);
    width: 360px;
  }
  #section5 .sosmed-links {
    font-size: 3em;
    gap: .75em;
  }
  #section5 .sosmed-links a {
    border-radius: 12px;
    border-width: 3px;
    padding: .5em 1em;
  }
  #section5 .studio-logo {
    gap: 8em;
  }
  #section5 #copyright {
    font-size: 3em;
  }
}
@media (max-width: 1280px) {
  #section2 p {
    font-size: 1.4em;
  }
  .feature-item img {
    max-width: 60vw;
  }
  #section1 #characters #ethan {
    transform: translate(-115%, 0); 
  }
  #section1 #characters #silvia {
    transform: translate(25%, 0); 
  }
}

@media (max-width: 768px) {
  .header {
    font-size: 3em;
  }

  /* Hero */
  #slow-spin {
    scale: 100%;
    height: 120vh;    
    top: 10vh;
  }
  #section1 #characters #ethan,
  #section1 #characters #silvia {
    display: none;
  }

  /* Trailer */
  #section2 p {
    font-size: 1.2em;
    max-width: 90vw;
  }

  /* Game Features */
  #section3 .feature-container {
    gap: 8em;
  }
  #section3 #bg-sketch {
    display: none;
  }
  .feature-item {
    flex-direction: column !important;  
    align-items: center;
  }
  .feature-item-box {
    width: 90vw;
  }
  .feature-item-box h3 {
    margin-bottom: 0;
  }
  .feature-item-box > div {
    background-image: url('./images/Section3_Box_Horizontal.png');
    text-align: center;
    width: calc(100% - 2.4em);
    padding: 1em 1.2em;
    top: -5em;
  }
  .feature-item img {
    max-width: 90vw;
  }

  /* Screenshots */
  #section4 {
    height: 50vh !important;
  }
  .splide__pagination {
    bottom: 32px;
  }
  .splide__pagination__page {  
    width: 20px;
    height: 20px;
  }

  /* Footer */
  #section5 .studio-logo {
    gap: 2em;
  }
  #section5 .studio-logo img {
    max-width: 70%;
  }
}

@media (max-width: 600px) {
  .header {
    font-size: 2em;
  }
  #section1 #characters #logo {
    height: 30vh;
  }
  #section1 #characters #mary {
    bottom: 0;
  }
  #section2 p {
    font-size: 1em;
    text-shadow: var(--dark-text) 0 2px 2px;
  }
  #trailer-container {
    overflow: hidden;
    text-align: center;
  }
  #trailer-laptop {
    width: 130%;
    margin: 0 -15% -4px;
  }
  #trailer-embed {
    width: 63vw;
    left: calc(50% - 31.5vw);
    border-radius: .5em;
  }

  .feature-item-box > div {
    font-size: .9em;
  }
  .feature-item img {
    border-radius: .5em;
    border: .4em solid white;
  }

  /* Footer */
  #section5 .studio-logo {
    gap: 1em;
  }
  #section5 .studio-logo #posh-cat img {
    max-width: 70%;
    margin-right: 1em;
  }
  #section5 .studio-logo #amplified img {
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  /* Screenshots */
  #section4 {
    height: 30vh !important;
  }
  .splide__pagination {
    bottom: 20px;
    gap: 6px;
  }
  .splide__pagination__page {  
    width: 16px;
    height: 16px;
  }
  .splide__arrow {
    height: 40px;
    width: 40px;
    top: calc(50% - 20px);
  }
  .splide__arrow img {
    height: 24px;
    width: 24px;
  }
}