:root {
  --egnc-font: 'Barlow Condensed', sans-serif;
  --egnc-logo-font: 'Dorsa', sans-serif;
  --egnc-black: #1f1f1f;
  --egnc-2-blue: #4096b5ff;
  --egnc-2-blue-2: #88c0d5ff;
  --egnc-blue: #4095b5ff;
  --egnc-bright-blue: #40b5adff;
  --egnc-bright-blue-transp: #40b5adaa;
  --egnc-grey: #3e3e3eff;
  --egnc-grey-transp: #3e3e3e85;
  --egnc-light-grey: #adadadff;
  --egnc-lighter-grey: #c2c2c2ff;
  --egnc-mid-grey-transp: #7a7a7aaa;
  --egnc-mid-grey: #7a7a7aff;
  --egnc-pink: #b54095ff;
  --egnc-pink-transp: #b54095aa;
  --egnc-bright-pink: #d486bfff;
  --egnc-bright-pink-transp: #d486bfb9;
  --egnc-purple: #805d98ff;
  --standard-font-family: var(--egnc-font);
  --standard-font-family-cursive: var(--egnc-logo-font);
}

body {
  background-color: #005965ff;
  overflow-x: hidden;
}

.h-captcha {
  display: flex;
  justify-content: center;
  margin: auto;
  max-width: 50%;
}

@keyframes fade-content {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacitY: 1;
    transform: translateY(0);
  }
}

section > div {
  animation: fade-content .736s both;
}

.lettermark-logo {
  align-items: center;
  display: flex;
  inset: auto 0 -100px 0;
  justify-content: center;
  position: absolute;
}

.lettermark-logo img {
  width: 136px;
}

.egnc-social-icons {
  background: rgba(255, 255, 255, .0736);
  box-shadow: 0 0 26px rgba(0, 0, 0, .276);
  border-radius: 0 18px 18px 0;
  inset: auto auto 20px 0;
  display: flex;
  height: 65px;
  justify-content: flex-start;
  padding: 0;
  position: fixed;
  transition: 1.736s;
  width: fit-content;
}

.egnc-social-icons:hover {
  background: rgba(248, 248, 248, .636);
}

.egnc-social-icons::after {
  background: rgba(248, 248, 248, .736);
  content: '';
  inset: 23.6% 7.6%;
  display: flex;
  filter: blur(18px);
  position: absolute;
  transition: 1.736s;
  z-index: -1;
}

.hide-social-icons {
  opacity: 0;
  transform: translateX(-100%);
}

nav .egnc-social-icons {
  display: none;
}

.egnc-social-icons a {
  aspect-ratio: 1/1;
  align-items: center;
  background: unset;
  box-shadow: none;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0 min(.376vw, 15px);
  position: relative;
  transition: .365s;
}

.egnc-social-icons figure {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  margin: 0;
  opacity: .736;
  position: absolute;
  transition: .736s;
  width: 100%;
}

.egnc-social-icons figure:first-of-type {
  opacity: 1;
}

.egnc-social-icons figure:nth-of-type(2) {
  opacity: 0;
}

.egnc-social-icons figure:last-of-type {
  opacity: 0;
}

.egnc-social-icons a:hover figure:first-of-type {
  opacity: 0;
}

.egnc-social-icons a:hover figure:nth-of-type(2) {
  filter: blur(1.736px) brightness(1.736) saturate(2.36);
  opacity: 1;
}

.egnc-social-icons a:hover figure:last-of-type {
  filter: saturate(.976) brightness(.876);
  opacity: 1;
  z-index: 1;
}

.egnc-social-icons a img {
  aspect-ratio: 1/1;
  width: 36px;
}

.logo-overlay {
  display: flex;
  justify-content: flex-end;
  height: 101vh;
  inset: 0 auto auto auto;
  transform: translateX(0);
  opacity: 1;
  position: fixed;
  transform-origin: right;
  width: 100vw;
}

.hide-logo {
  opacity: 0;
  transition: 1.376s;
  z-index: -1;
}

.logo-overlay img {
  height: 100%;
}

.mobile-logo-container {
  display: none;
}

.sideline {
  min-height: 350px;
  inset: calc(50% - 175px) 65% calc(50% - 175px) 7.35%;
}

nav {
  inset: calc(79.5% - 175px) calc(65% - 15px) calc(17% - 175px) 7.35%;
  transition: 1s;
}

@keyframes bring-in-nav {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1
  }
}

nav a,
nav a.active,
nav a:hover {
  border-radius: 18px 3px 3px 18px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .136);
  color: var(--egnc-pink);
  font-family: var(--egnc-standard-font);
  font-size: 25px;
  letter-spacing: 1px;
  font-weight: 300;
  min-height: 65px;
  margin: 30px 0;
  padding: 0 15px 5px 0;
  text-transform: lowercase;
}

nav a span {
  color: var(--egnc-pink);
  background: linear-gradient(360deg, var(--egnc-bright-pink) 36%, var(--egnc-2-blue-2) 48%, var(--egnc-2-blue) 76%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
  z-index: 2;
}

nav a {
  background: rgba(235, 235, 235, .236);
}

nav:not(.sideline):not(.open) a:not(.active) {
  border-radius: 8px;
  overflow: hidden;
  margin: 30px auto 30px auto;
  transition: 1s;
  width: 90%;
}

nav:not(.sideline) a {
  border-radius: 18px;
  overflow: hidden;
}

nav:not(.sideline):not(.open) a.active {
  border-radius: 8px;
  overflow: hidden;
  overflow: visible;
  width: calc(100% - 15px);
  transition: 1s;
}

nav:not(.sideline):not(.open) a::after {
  background: transparent;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0);
  opacity: 0;
  transform: translateX(38px) scale(0);
  transition: .736s;
}

nav:not(.sideline):not(.open) a.active::after {
  background: transparent;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .276);
  opacity: 0;
  transform: translateX(38px) scale(1);
}

nav:not(.sideline):not(.open) a:hover:before {
  border-radius: 8px;
}

nav:not(.sideline):not(.open) a.active::after {
  background: white;
  opacity: 1;
  transition: 2s;
}

nav:not(.sideline):not(.open) a::before {
  border-radius: 18px;
}

nav:not(.sideline):not(.open) .active::before {
  border-radius: 8px;
}

nav.sideline:hover a {
  border-radius: 18px 0 0 18px;
  overflow: hidden;
}

nav a div {
  background: rgba(255, 255, 255, .736);
  inset: 25% 5%;
  filter: blur(18px);
  position: absolute;
  transition: .5s;
  z-index: -1;
}

.un-frosted-flakes {
  background: transparent;
  filter: none;
  inset: 0;
}

nav:not(.sideline) a .un-frosted-flakes::before {
  transition: .736s;
}

nav:not(.sideline) a.gallery.active .un-frosted-flakes,
nav:not(.sideline) a.about.active .un-frosted-flakes,
nav:not(.sideline) a.contact.active .un-frosted-flakes {
  background: transparent;
  border-radius: 8px;
  content: '';
  inset: -1px 0;
  filter: none;
  overflow: hidden;
  position: absolute;
}

nav:not(.sideline) a.gallery .un-frosted-flakes::before,
nav:not(.sideline) a.about .un-frosted-flakes::before,
nav:not(.sideline) a.contact .un-frosted-flakes::before {
  background: transparent;
  content: '';
  opacity: 0;
  inset: -35%;
  filter: blur(96px);
  position: absolute;
  transition: 1s;
}

nav:not(.sideline) a.gallery .un-frosted-flakes::before {
  background: linear-gradient(var(--egnc-2-blue-2) 13%, var(--egnc-blue));
}

nav:not(.sideline) a.about .un-frosted-flakes::before {
  background: linear-gradient(var(--egnc-bright-blue) 13%, var(--egnc-2-blue));
}

nav:not(.sideline) a.contact .un-frosted-flakes::before {
  background: linear-gradient(var(--egnc-bright-pink) 13%, var(--egnc-pink));
}

nav:not(.sideline) a.gallery.active .un-frosted-flakes::before,
nav:not(.sideline) a.about.active .un-frosted-flakes::before,
nav:not(.sideline) a.contact.active .un-frosted-flakes::before {
  filter: blur(18px);
  opacity: 1;
  transition: .736s;
}

nav:not(.sideline):not(.open) a span {
  color: var(--egnc-grey-transp);
  background-image: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  transition: .85s;
}

nav:not(.sideline):not(.open) a.active span {
  color: white;
  background-image: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  transition: .85s;
}

.sideline figure {
  display: none;
}

nav:not(.sideline) {
  /*animation: bring-in-nav 2s both;*/
  background: transparent;
  /*backdrop-filter: blur(3px);*/
  flex-flow: column nowrap;
  border-radius: 18px;
  display: flex;
  inset: 35px 65% 5% 15px;
  justify-content: center;
  padding: 0 .736%;
  justify-content: flex-end;
}

nav figure img {
  aspect-ratio: 1/1;
  height: auto;
  margin: 5px;
  width: calc(100% - 30px);
}

nav figure {
  aspect-ratio: 1/1;
  align-self: center;
  background-color: white;
  border-radius: 18px;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .176);
  display: flex;
  max-height: min(50vh, 500px);
  max-width: max(500px, 50%);
  margin: 15px -.736%;
  transtion: all 1s;
  width: auto;
}

nav figure::after {
  background: white;
  content: '';
  filter: blur(0);
  display: flex;
  transtion: all 1s;
  z-index: -1;
}

.mobile-menu-logo {
  display: none;
}

h1 {
  /*background: linear-gradient(360deg, rgb(36, 36, 36), rgba(76, 76, 76, .736),  rgba(76, 76, 76, .236),  rgba(176, 176, 176, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
  color: rgb(76, 76, 76);
  font-family: var(--standard-font-family);
  font-style: normal;
  font-size: max(23px, 5vh);
  font-weight: 400;
  letter-spacing: 1vw;
  margin: 0 auto;
  padding: 0 0 0 1ch;
  position: relative;
  text-shadow: 0 0 2px rgba(0, 0, 0, .236);
  width: fit-content;
}

h1::after {
  background: linear-gradient(90deg, var(--egnc-bright-pink), var(--egnc-bright-blue), var(--egnc-blue));
  border-radius: 3px;
  content: '';
  inset: 107.6% 0 -10px 0;
  position: absolute;
}

h1::before {
  background: linear-gradient(90deg, var(--egnc-bright-pink), var(--egnc-bright-blue), var(--egnc-blue));
  border-radius: 3px;
  content: '';
  filter: blur(3px);
  inset: 109.6% 0 -10px 0;
  position: absolute;
  z-index: -1;
}

h2 {
  font-size: 135%;
  font-weight: 400;
  margin: 0;
}

.pricing {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricing li {
  border: 1px solid black;
  box-sizing: border-box;
  flex: auto;
  margin: 0;
  min-width: 50%;
  padding: 10px 15px;
}

/*sections*/
section {
  background: rgba(235, 235, 235, .176);
  backdrop-filter: blur(3px);
  border-radius: 30px 30px 18px 18px;
  color: var(--egnc-grey);
  margin: 15px 15px 60px 15px;
  padding: 35px 5px 0 5px;
  scrollbar-width: none;
}

.scroll-button-container {
  align-items: flex-end;
  display: flex;
  flex-flow: column;
  gap: 10px;
  inset: auto 25px 76px auto;
  opacity: 0;
  padding: 0;
  position: fixed;
  transition: .5s;
  visibility: hidden;
  z-index: 1;
}

.scrollable {
  opacity: 1;
  visibility: visible;
}

.scroll-button-container button {
  aspect-ratio: 1/1;
  background-color: rgba(76, 76, 76, .236);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(236, 236, 236, .736);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .236);
  border-radius: 50%;
  margin: 0;
  padding: 0;
  transition: .736s;
  overflow: hidden;
  width: 40px;
}

.scroll-button-container button div {
  aspect-ratio: 1/1;
  background: linear-gradient(var(--egnc-bright-blue), transparent);
  border-radius: 50%;
  filter: blur(9px) saturate(2) brightness(1.236) hue-rotate(106deg);
  inset: -15%;
  position: absolute;
  transition: .736s;
  z-index: -1;
}

.scroll-button-container button:hover div {
  filter: blur(3px) saturate(5) brightness(1.736) hue-rotate(196deg);
  transition: .236s;
}

.scroll-button-container button:last-of-type:hover div {
  filter: blur(3px) saturate(5) brightness(1.736) hue-rotate(36deg);
  transition: .236s;
}

.scroll-button-container button:active div {
  filter: blur(9px) saturate(3) brightness(2.736) hue-rotate(36deg);
  transition: .176s;
}

.scroll-button-container button:last-of-type:active div {
  filter: blur(9px) saturate(3) brightness(1.736) hue-rotate(-96deg);
  transition: .176s;
}

.scroll-button-container button:hover {
  background-color: var(--egnc-grey-transp);
  transition: 1s;
}

.scroll-button-container button:active {
  background-color: var(--egnc-grey-transp);
}

.scroll-button-container button:first-of-type {
  transform: rotate(180deg);
}

.scroll-button-container button::before,
.scroll-button-container button::after {
  background: white;
  border-radius: 5px;
  content: '';
  inset: 45% 35%;
  position: absolute;
  transition: .5s;
}

.scroll-button-container button:first-of-type:before,
.scroll-button-container button:last-of-type:after {
  transform: rotate(45deg) translateX(-.5%) translateY(85%);
}

.scroll-button-container button:first-of-type:after,
.scroll-button-container button:last-of-type:before {
  transform: rotate(-45deg) translateX(.5%) translateY(85%);
}

section article {
  border-radius: 8px;
  font-size: 30px;
  line-height: 2;
}

.about-content {
  z-index: -1;
}

.close-button {
  animation: none;
  background: rgba(136, 136, 136, .136);
  box-shadow: 0 0 18px rgba(0, 0, 0, .376);
  border-radius: 50%;
  inset: 25px 25px auto auto;
  overflow: hidden;
  position: fixed;
  transition: 1s;
  z-index: initial;
}

.close-button {
  background: var(--egnc-bright-blue);
  box-shadow: 0 5px 9px var(--egnc-pink-transp);
  filter: hue-rotate(18deg) saturate(1.376);
}

.close-button::after {
  background: linear-gradient(transparent, var(--egnc-bright-pink));
  content: '';
  filter: blur(1px) saturate(2.36) hue-rotate(36deg);
  inset: 0;
  opacity: 1;
  position: absolute;
  transform: scale(1.736);
  transition: .376s;
  z-index: -1;
}

.close-button:hover:after {
  opacity: .836;
  transition: .736s;
}

.close-button span {
  background: white;
  border-radius: 1px;
  inset: calc(50% - 1px) 25%;
  position: absolute;
  transform: rotate(45deg);
  transition: .736s;
}

.close-button span:after {
  background: white;
  inset: 0;
  content: '';
  position: absolute;
  transform: rotate(90deg);
}

.close-button:hover span {
  opacity: .85;
  transform: rotate(45deg) scale(.736);
}

.x-closed,
.x-closed:hover,
.x-closed-focus {
  display: none;
}

/*Gallery items*/
.portfolio-container {
  background-color: rgba(236, 236, 236, .136);
  border-radius: 15px;
  box-shadow: inset 0 0 96px rgba(236, 36, 176, .136);
  margin: 0 0 5px 0;
  overflow: hiddden;
  padding: 2.236vw 5px;
  position: relative;
}

.portfolio-container::after {
  background: linear-gradient(rgba(236, 236, 236, .936), var(--egnc-bright-blue));
  border-radius: 15px;
  content: '';
  filter: blur(36px);
  inset: 5%;
  opacity: .365;
  position: absolute;
  z-index: -1;
}

.portfolio-img-container {
  border-radius: 16px;
}

.portfolio-img-container img {
  background: white;
  border-radius: 8px;
  filter: none;
}

.contact-box {
  width: 100%;
}

.egnc-contact-container-parent {
  align-items: stretch;
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 25px;
  margin: 0 2.36vw 5vw 2.36vw;
  flex: 1;
}

.egnc-contact-container {
  background-color: rgba(255, 255, 255, .176);
  border-radius: 8px;
  box-shadow: 0 9px 18px rgba(0, 0, 0, .236), inset 0 0 136px rgba(236, 236, 236, .236);
  margin: 0 1.5%;
  overflow: hidden;
  padding: 15px 65px;
  position: relative;
}

@media only screen and (max-width: 1400px) {
  .egnc-form-group {
    display: flex;
    flex-flow: column;
  }

  .egnc-contact-container-parent {
    gap: 5vw;
  }

  .egnc-contact-container {
    flex: unset;
    padding: 15px 10vw;
    flex: 1;
  }
}

.egnc-contact-container::before {
  background-color: rgba(236, 236, 236, .736);
  border-radius: 36px;
  content: '';
  filter: blur(36px);
  inset: 5%;
  position: absolute;
  z-index: -1;
}

footer {
  align-items: center;
  background: rgba(76, 76, 76, .736);
  border-radius: 16px;
  backdrop-filter: blur(36px);
  border: 1px solid rgba(236, 236, 236, .236);
  box-shadow: 0 0 18px rgba(0, 0, 0, .436);
  color: white;
  display: flex;
  font-family: var(--egnc-standard-font);
  font-size: 14px;
  justify-content: center;
  inset: auto 15px 13.736px auto;
  padding: 0;
  transition: .736s;
}

footer:hover {
  background: rgba(236, 236, 236, .236);
  /*color: var(--egnc-grey);*/
}

footer::before {
  background: linear-gradient(136.736deg, var(--egnc-bright-blue) 9.36%, var(--egnc-blue) 29.6%, var(--egnc-bright-pink)) 37.6%, var(--egnc-purple) 47.6%;
  border-radius: 16px;
  color: var(--egnc-grey);
  content: '';
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: .736s;
  z-index: -2;
}

footer:hover:before {
  border-radius: 16px;
  filter: blur(2.736px) saturate(3.76);
  inset: -1px;
  opacity: .736;
  z-index: -2;
}

footer::after {
  background: linear-gradient(136deg, var(--egnc-bright-blue), var(--egnc-blue), var(--egnc-bright-pink));
  border-radius: 16px;
  content: '';
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: 1s;
  z-index: -1;
}

footer:hover:after {
  opacity: 1;
}

footer a {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 3px;
  padding: 5px 15px 8px 18px;
  text-decoration: none;
}

footer img {
  border-radius: 50%;
  height: 65px;
  padding: 5px;
  transform: translateY(2px) scale(0);
  margin: 0 0 0 -85px;
  transition: .5s;
  position: absolute;
  width: auto;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#scroll-buttons {
  display: none;
}

.scroll-button-container.scroll-buttons-desktop {
  opacity: 1;
  visibility: visible;
}

section .about-area {
  padding: 3vw 5vw 4vw 5vw;
}

.egnc-contact-container {
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  .add-space-on-mobile {
    padding: 5vh 1vw 20vw 1vw;
  }

  .egnc-contact-container {
    margin: 0 5vw;
  }

  section .add-space-inner {
    padding: 5vw 5vw 65px 5vw;
  }

  section {
    inset: 0 0 40px 0;
  }

  #scroll-buttons {
    display: flex;
  }

  .egnc-grid-scroll {
    opacity: 0;
    transform: scale(.976);
  }

  .egnc-grid-scroll-in {
    animation: fade-in 1s ease-in-out both;
  }

  nav.sideline figure {
    diplay: flex;
    inset: -87.5% auto auto auto;
    max-height: 75%;
    width: unset;
  }

  nav:not(.sideline) figure {
    display: none;
  }

  nav {
    backdrop-filter: blur(18px);
    inset: 0 0 calc(100% - 50px) 0;
    height: 50px;
    position: fixed;
    z-index: 1;
    padding: 0;
  }

  nav:not(.sideline) {
    background: unset;
    backdrop-filter: none;
    border-radius: 0 0 18px 18px;
    display: flex;
    padding: 0;
    inset: 0 0 auto 0;
  }

  nav.sideline .menu-state {
    display: flex;
  }

  @keyframes drop-menu-in {
    0% {
      opacity: 0;
      transform: translateY(-5%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .show-menu-once {
    animation: drop-menu-in 1.5s ease-in-out both;
  }

  .sideline {
    backdrop-filter: none;
    min-height: 90vh;
    inset: 15px 15px 15px 15px;
    padding: 0;
    opacity: 1;
    transition: 0s;
  }

  nav.sideline .menu {
    display: none;
  }

  nav .menu {
    border-radius: 8px;
    height: 40px;
    inset: 5px 5px auto auto;
    padding: 2px 0 0 2px;
    position: fixed;
    margin: 0;
    z-index: 1;
  }

  nav .menu-items {
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
    inset: 0;
    justify-content: flex-start;
    margin: 0;
    overflow: hidden;
    padding: 0;
  }

  nav a,
  nav a.active,
  nav a:hover {
    background-color: rgba(245, 245, 245, .036);
    box-shadow: 0 5px 8px rgba(0, 0, 0, .236);
    border-radius: 8px;
    font-family: 'Barlow Condensed';
    min-height: unset;
    padding: 0 0 5px 6px;
    font-size: 18px;
    letter-spacing: 1px;
    margin: 7px 10px;
    min-height: 35px;
    max-height: 43px;
    position: relative;
    overflow: hidden;
  }

  nav.open a,
  nav.open .active,
  nav.open a:hover {
    border-radius: 0;
    padding: 0 0 0 6px;
    box-shadow: none;
    margin: 0;
  }

  nav.open {
    background-color: rgba(236, 236, 236, .176);
    border-radius: 0 0 16px 16px;
    backdrop-filter: blur(3px);
    box-shadow: 0 0 36px rgba(0, 0, 0, .736);
    display: flex;
    height: max(276px, 50%);
    transition: 1s;
  }

  nav.open::after {
    background-color: rgba(236, 236, 236, .376);
    border-radius: 18px;
    content: '';
    filter: blur(36px);
    inset: 20% 10% 27.6% 10%;
    position: absolute;
    display: flex;
    transition: 1s;
    z-index: -1;
  }

  nav.sideline a::after {
    background:  rgba(255, 255, 255, .936);
    content: '';
    border-radius: 0;
    position: absolute;
    inset: 15% 5%;
    filter: blur(13.6px);
    height: unset;
    width: unset;
    display: flex;
    opacity: 1;
    z-index: -3;
  }

  nav:not(.sideline) .menu-items {
    justify-content: center;
    border-radius: 0 0 18px 18px;
    height: unset;
    overflow: visible;
    opacity: 0;
    padding: 0;
    transition: 1s;
    width: unset;
  }

  @keyframes mobile-menu-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  nav:not(.sideline).open .menu-items {
    animation: mobile-menu-fade 1s ease-in-out both;
    animation-delay: .235s;
    background: transparent;
    backdrop-filter: 18px;
    border-radius: 12px;
    display: flex;
    opacity: 1;
    position: relative;
    transform: translateY(-5px);
    width: calc(100% - 10px);
  }

  nav:not(.sideline).open .menu {
    background-color: var(--egnc-blue);
  }

  nav:not(.sideline) .menu-items.menu-state a {
    background: rgba(248, 248, 248, .936);
    border-radius: 8px;
    margin: 5px;
  }

  nav .menu-items.menu-state a::before,
  nav .menu-items.menu-state a div {
    background: transparent;
  }

  .open .gallery::after {
    background: var(--egnc-2-blue-2);
  }

  .open .about::after {
    background: var(--egnc-bright-blue);
  }

  .open .contact::after {
    background: var(--egnc-bright-pink);
  }

  .portfolio-container {
    gap: 15px;
  }

  .portfolio-img-container {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
  }

  .close-button {
    inset: 75px 25px auto auto;
  }

  footer {
    border: none;
    border-radius: 0;
    inset: auto 0 0 0;
    margin: 0;
    position: fixed;
    z-index: 1;
  }

  footer::after {
    border: none;
    border-radius: 0;
  }

  footer a {
    align-items: center;
    height: 100%;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .scroll-button-container.scroll-buttons-desktop {
    opacity: 0;
    visibility: hidden;
  }

  .mobile-logo {
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(0, 0, 0, .365);
    margin: auto;
    display: block;
    padding: 15px;
    margin: 5vh auto;
    max-width: 200px;
    min-width: 100px;
    width: 80%;
  }

  .open .mobile-logo {
    background-color: transparent;
    border-radius: 50%;
    box-shadow: none;
    display: block;
    margin: auto;
    max-width: 250px;
    min-width: 100px;
    padding: 15px;
    margin: -15% auto -5% auto;
    transform: scale(.836);
    width: 60%;
  }

  nav:not(.sideline) .mobile-menu-logo {
    display: flex;
    height: 50px;
    position: absolute;
    inset: 0 auto auto 0;
  }

  .mobile-menu-logo img {
    aspect: 1/1;
    height: 100%;
    transform: scale(.8) translateX(-10%);
  }

  .mobile-logo-container {
    margin: 5vh auto;
    display: flex;
  }

  .logo-overlay {
    display: flex;
    justify-content: center;
    inset: 0 auto 0 auto;
    position: fixed;
    width: 100%;
  }

  .logo-overlay img:first-of-type {
    display: none;
  }

  .open .not-for-mobile-menu .mobile-logo {
    display: none;
  }

  .egnc-social-icons {
    display: none;
  }

  nav .egnc-social-icons {
    border-radius: 18px;
    display: flex;
    inset: unset;
    width: unset;
    margin: 15px 0 0 0;
    padding: 0;
    overflow: hidden;
    position: relative;
  }

  nav .egnc-social-icons::after {
    opacity: 1;
    filter: blur(10px);
    opacity: .736;
    inset: 7.36% 1%;
  }

  nav .egnc-social-icons a {
    background: unset;
    box-shadow: unset;
    display: flex;
    margin: 0;
  }

  nav .egnc-social-icons a::after {
    display: none;
  }

  nav.open .egnc-social-icons {
    display: none;
  }

  nav.sideline .egnc-social-icons {
    align-content: center;
    display: flex;
    margin: 0;
    padding: 0;
    position: relative;
    transform: scale(.875);
  }

  nav.sideline .egnc-social-icons a {
    aspect-ratio: unset;
    display: flex;
    max-height: unset;
    position: relative;
  }

  nav.sideline .egnc-social-icons figure {
    aspect-ratio: unset;
    align-items: center;
    background: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    height: unset;
    inset: 0;
    justify-content: center;
    max-height: unset;
    max-width: unset;
    position: absolute;
  }

  section article {
    font-size: 23px;
  }

  .h-captcha {
    display: flex;
    justify-content: center;
    transform: scale(.6);
  }

  nav.sideline .egnc-social-icons a:hover figure {
    transform: translateY(-3px);
  }

}

@media only screen and (max-height: 760px) {
  .mobile-logo {
    max-width: 180px;
    min-width: 80px;
    margin: 0 auto;
  }
}

@media only screen and (max-height: 500px) {
  .mobile-logo {
    max-width: 150px;
    min-width: 100px;
    margin: 0 auto;
  }
}