.body {
  width: 100vw;
  height: 100vh;
  background-color: black;
  margin: 0;
}

@font-face {
    font-family: 'megfont';
    src: url('megfont-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Prevents invisible text while font loads */
}

.main {
}

.text-and-resize {
  font-family: 'megfont', 'Comic Sans MS', 'Chalkboard SE', cursive;
  font-size: clamp(48px, 10vw, 120px); /* Fluid scaling */
  line-height: .85em;
  text-align: center;
  font-feature-settings: "liga" 1, "calt" 1; /* Enable ligatures */
  text-rendering: optimizeLegibility;
}

.bio-text {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600; /* Match the loaded weight */
  font-size: clamp(20px, 3vw, 36px); /* Fluid scaling */
  line-height: 1.35em; /* Slightly more readable */
  text-align: left;
  margin: 80px 80px;
}

.editable-paragraph {
  padding: 0 5%;
}

.edittreatment {
    overflow: hidden;
}

.edittreatment:focus-visible {
    outline: none;
  }

.headline {
  width: 100%;
  max-width: 100%;
  font-family: 'megfont', 'Comic Sans MS', 'Chalkboard SE', cursive;
  font-size: clamp(48px, 10vw, 120px);
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  font-feature-settings: "liga" 1, "calt" 1;
}

.headlineleft {
  width: 20%;
  align-items: center;
  justify-content: center;
  display: flex;
  order: 1;
  flex-grow: 1;
  aspect-ratio: 1 / 1;
}

.headlinemain {
  width: 60%;
  align-items: center;
  justify-content: center;
  display: flex;
  order: 2;
  flex-grow: 2;
}

.headlineright {
  width: 20%;
  align-items: center;
  justify-content: center;
  display: flex;
  order: 3;
  flex-grow: 1;
  aspect-ratio: 1 / 1;
}

.halfoff {
  width: 49%;
  align-items: center;
  justify-content: center;
  display: flex;
  order: 1;
  flex-grow: 1;
  flex-direction: row;
  flex-wrap: wrap;
}


.foot01 {
  width: 70%;
  align-items: center;
  justify-content: center;
  display: flex;
  order: 1;
  flex-grow: 4;
  flex-direction: row;
  flex-wrap: wrap;
}

.foot02 {
  width: 29%;
  align-items: center;
  justify-content: center;
  display: flex;
  order: 2;
  flex-grow: 1;
  flex-direction: column;
  flex-wrap: wrap;
  aspect-ratio: 1 / 1;
}

.glyphsmain {
  width: 100%;
  max-width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.glyph01 {
  width: 100%;
  padding: 32px 0 48px;
  align-items: center;
  justify-content: center;
  display: flex;
  order: 1;
  flex-grow: 4;
  min-height: 180px;
}

.glyph02 {
  width: 19%;
  aspect-ratio: 1.5 / 1;
  align-items: center;
  justify-content: center;
  display: flex;
  order: 2;
  flex-grow: 1;
}

.giantbutton {
  position: fixed;
  padding: 10px 70px 22px;
  border-radius: 200px;
  z-index: 1;
  margin: 0 auto;
  text-align: center;
  bottom: 2.5%;
  left: 5%;
  right: 5%;
  max-width: 480px;
  transition: all 0.3s ease-in-out;
  animation: buttonbounce 1.1s ease-in-out infinite;
}

@keyframes buttonbounce {
  0% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}


.giantbutton:hover {
  animation: buttonrotate .1s ease-in-out infinite;
  transform: scale(1.1);
}

@keyframes buttonrotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

a {
  color: black;
}

a:visited {
  color: black;
}

.red {
  background-color: #ff3600;
}

.pink {
  background-color: #fe56a6;
}

.yellow {
  background-color: #ffad00;
}

.blue {
  background-color: #0d92ff;
}

.purple {
  background-color: #6259d3;
}

.green {
  background-color: #77cb71;
}

.rotate {
  transition: transform 0.5s ease;
}

.rotate:hover {
  transform: rotate(360deg);
}

.rotate:active {
  transform: rotate(360deg);
}

.bounce {
  animation: bounce-animation .5s ease-in-out infinite;
}

@keyframes bounce-animation {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.02);
  }
  75% {
    transform: scale(1);
  }
}

.wiggle {
  animation: wiggle-animation .65s ease-in-out infinite;
}

@keyframes wiggle-animation {
  0% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(-3deg);
  }
}

.background-svg-blobs {
  background-image: url('blobs.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-blobspink {
  background-image: url('blobspink.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-star {
  background-image: url('star.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-circle {
  background-image: url('circle.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-circle02 {
  background-image: url('circle02.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.background-svg-arrows {
  background-image: url('arrows.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-halfcircles {
  background-image: url('halfcircles.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-yellowshape-01 {
  background-image: url('yellowshape-01.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-yellowshape-02 {
  background-image: url('yellowshape-02.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-yellowshape-03 {
  background-image: url('yellowshape-03.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-yellowshape-04 {
  background-image: url('yellowshape-04.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-yellowshape-05 {
  background-image: url('yellowshape-05.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-yellowshape-06 {
  background-image: url('yellowshape-06.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-yellowshape-07 {
  background-image: url('yellowshape-07.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-yellowshape-08 {
  background-image: url('yellowshape-08.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-yellowshape-09 {
  background-image: url('yellowshape-09.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-yellowshape-10 {
  background-image: url('yellowshape-10.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-blueshape-01 {
  background-image: url('blueshape-01.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-blueshape-02 {
  background-image: url('blueshape-02.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-blueshape-03 {
  background-image: url('blueshape-03.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-blueshape-04 {
  background-image: url('blueshape-04.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-blueshape-05 {
  background-image: url('blueshape-05.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-blueshape-06 {
  background-image: url('blueshape-06.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-blueshape-07 {
  background-image: url('blueshape-07.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-blueshape-08 {
  background-image: url('blueshape-08.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-blueshape-09 {
  background-image: url('blueshape-09.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-blueshape-10 {
  background-image: url('blueshape-10.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-greenshape-01 {
  background-image: url('greenshape-01.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-greenshape-02 {
  background-image: url('greenshape-02.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-greenshape-03 {
  background-image: url('greenshape-03.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-greenshape-04 {
  background-image: url('greenshape-04.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-greenshape-05 {
  background-image: url('greenshape-05.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-greenshape-06 {
  background-image: url('greenshape-06.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-greenshape-07 {
  background-image: url('greenshape-07.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-greenshape-08 {
  background-image: url('greenshape-08.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-greenshape-09 {
  background-image: url('greenshape-09.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-greenshape-10 {
  background-image: url('greenshape-10.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-purpleshape-01 {
  background-image: url('purpleshape-01.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-purpleshape-02 {
  background-image: url('purpleshape-02.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-purpleshape-03 {
  background-image: url('purpleshape-03.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-purpleshape-04 {
  background-image: url('purpleshape-04.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-purpleshape-05 {
  background-image: url('purpleshape-05.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-purpleshape-06 {
  background-image: url('purpleshape-06.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-purpleshape-07 {
  background-image: url('purpleshape-07.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-purpleshape-08 {
  background-image: url('purpleshape-08.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-purpleshape-09 {
  background-image: url('purpleshape-09.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-purpleshape-10 {
  background-image: url('purpleshape-10.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-pinkshape-01 {
  background-image: url('pinkshape-01.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-pinkshape-02 {
  background-image: url('pinkshape-02.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-pinkshape-03 {
  background-image: url('pinkshape-03.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-pinkshape-04 {
  background-image: url('pinkshape-04.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-pinkshape-05 {
  background-image: url('pinkshape-05.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-pinkshape-06 {
  background-image: url('pinkshape-06.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-pinkshape-07 {
  background-image: url('pinkshape-07.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-pinkshape-08 {
  background-image: url('pinkshape-08.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-pinkshape-09 {
  background-image: url('pinkshape-09.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-pinkshape-10 {
  background-image: url('pinkshape-10.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-redshape-01 {
  background-image: url('redshape-01.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-redshape-02 {
  background-image: url('redshape-02.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-redshape-03 {
  background-image: url('redshape-03.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-redshape-04 {
  background-image: url('redshape-04.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-redshape-05 {
  background-image: url('redshape-05.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-redshape-06 {
  background-image: url('redshape-06.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-redshape-07 {
  background-image: url('redshape-07.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-redshape-08 {
  background-image: url('redshape-08.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-redshape-09 {
  background-image: url('redshape-09.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.background-svg-redshape-10 {
  background-image: url('redshape-10.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


@media only screen and (max-width: 960px), only screen and (max-device-width: 960px) {

.body {
}

.main {
}

.text-and-resize {
  /* Using clamp() for fluid scaling - no fixed override needed */
}

.giantbutton {
  padding: 10px 0px 18px;
  border-radius: 200px;
  bottom: 2.5%;
  left: 5%;
  right: 5%;
  transition: all 0.3s ease-in-out;
}

.headline {
}

.headlineleft {
  height: 50%;
  width: 50%;
  order: 2;
}

.headlinemain {
  height: 50%;
  width: 100%;
  order: 1;
  aspect-ratio: 1.75 / 1;
}

.headlineright {
  height: 50%;
  width: 50%;
  order: 3;
}

.glyph01 {
  padding: 20px 0 36px;  
}

.glyph02 {
  width: 30%;
  aspect-ratio : 1 / 1;
}

.halfoff {
  width: 100%;
}

.bio-text {
  /* font-size handled by clamp() */
  margin: 48px 24px;
}

.foot01 {
  width: 100%;
  aspect-ratio: 3 / 1;
}

.foot02 {
  width: 100%;
  aspect-ratio: 1 / 1;
}


}