<div class="pagecontainer">
  <header>
    <h1>Your New Baby's Name</h1>
    <div class="generator-wrap">
      <div class="svgtop-corner">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 425.93732 330.76227" width="100%" height="100%">
          <defs>
            <!-- The text path: see links above regarding coordinate system -->
            <path d="m 0,200 a 200,200 0 1 0 400,0 200,200 0 1 0 -400,0" id="txt-path" />
          </defs>
          <text transform="translate(14.720589,-80.005355)" fill="black" font-family="moholregular">
            <!-- This is the magic -->
            <textpath startOffset="0" xlink:href="#txt-path" id="textPath9">Try our all new baby name generator</textpath>
          </text>
        </svg>
      </div>

      <div class="generator-main">
        <h2>Baby Name Generator</h2>
        <p>Find the perfect brand to set your child apart.</p>
        <p>Just select your baby's gender.</p>
        <!--BUTTON FOR NAME RESULTS-->
        <div class="button">
          <button class="generate margin-right">
            <p class="boytext">Boy </p>
          </button>

          <button class="generate">
            <p class="girltext">Girl </p>
          </button>
        </div>
        <p class="baby-name">your new baby name is:</p>
           <div id="random-name"
 class="random-name"></div>

      </div>
    </div>
  </header>

</div>
<section class="info-container padding-top">
  <h3>Making babies is the easy part</h3>
  <h3 class="h3margin-top"><span class="info-emphasis">Choosing an appropriately eccentric name is the hard part</span>
  </h3>

  <p>Today, if your child doesn't stand out - not only will they be a failure,
    but everyone will look on you in shame. Nothing says 'boring' like a boring kid.
    After all, a kid is you, only more so, as this is a you that you get to shape from
    the beginning.</p>
  <p>A lot has changed in the last five years. Bankers, hipsters and celebrities have pretty
    much ruined everything for everyone. The pressure to be unconventional has never been
    greater. Sending your child out into today's self-indulgent, self-medicated, self-entitled
    world with an ordinary name is condemning them to a life of failure and mediocrity. That will make
    you look awful, too.
  </p>
</section>

<div class="info1">
  <section class="info-container padding-top">
    <p>How many interesting, successful, attractive young people do you know called
      Mike, Dan or Jeff? Name your child something like that and they won't lead the crowd; Instead
      they follow at the back of the crowd, wearing corrective shoes, mumbling with their hand down
      their pants. Everyone will laugh at their parents, too.
    </p>
    <p>Yesterday's weird is today's normal. Names that were unique in 2008 are now a dime a dozen. Elementary
      school classes are full of little Razors, Zeenobs and Mudzillas. You have to go the extra
      mile to stand out these days. Make your kid reflect who you are on the inside.
    </p>
  </section>
</div>

<section class="info-container padding-top">
  <p>Don't burden your child with the stigma of normality. Give them a ludicrous name, and then raise them to be
    narcissistic enough to carry it off. Just like you wish you had been.
  </p>
</section>

<!-- footer & contact info -->
<footer>
  <h2>Join Newsletter</h2>
  <p>Subscribe today and get your free ebook!</p>

</footer>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#random-name {
  margin: 2rem 0;
}

::selection {
  background: rgb(255, 244, 190);
}

@font-face {
  font-family: "moholregular";
  src: url("..fonts/mohol-regular-webfont.woff2") format("woff2"),
    url("../fonts/mohol-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-thumb {
  width: 20px;
  background: linear-gradient(to bottom, #f2c9ec 60%, rgb(255, 244, 190));
  border-radius: 50px;
}

::-webkit-scrollbar-track-piece {
  background: #b8e4f6;
}

:root {
  font-size: 16px;
}

:root {
  --shadow: #edc1e9;
}

body {
  min-height: 100vh;
}

img {
  width: 100%;
  border-radius: 30px;
}

body {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  background-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "moholregular";
  font-weight: 500;
}

h1 {
  font-size: 90px;
  text-align: center;
  color: #b8e4f6;
  text-shadow: 6px 6px var(--shadow), 5.75px 5.75px var(--shadow),
    5.5px 5.5px var(--shadow), 5.25px 5.25px var(--shadow),
    5px 5px var(--shadow), 4.75px 4.75px var(--shadow),
    4.5px 4.5px var(--shadow), 4.25px 4.25px var(--shadow),
    4px 4px var(--shadow), 3.75px 3.75px var(--shadow),
    3.5px 3.5px var(--shadow), 3.25px 3.25px var(--shadow),
    3px 3px var(--shadow), 2.75px 2.75px var(--shadow),
    2.5px 2.5px var(--shadow), 2.25px 2.25px var(--shadow),
    2px 2px var(--shadow), 1.75px 1.75px var(--shadow),
    1.5px 1.5px var(--shadow), 1.25px 1.25px var(--shadow),
    1px 1px var(--shadow), 0.75px 0.75px var(--shadow),
    0.5px 0.5px var(--shadow), 0.25px 0.25px var(--shadow);
}

header {
  padding-top: 7em;
}

svg:not(:root) {
  overflow: visible;
}

svg {
  max-width: 100%;
  height: 70px;
  display: block;
  letter-spacing: 6.5px;
}

.svgtop-corner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

text {
  font-size: 50px;
}

.generator-wrap {
  background: rgb(242, 201, 236);
  background: linear-gradient(170deg, #f7c4eb 23%, rgba(184, 228, 246, 1) 100%);
  border-radius: 20px;
  margin: 0 auto;
  width: 90%;
  margin-top: 2.4rem;
  min-height: 32em;
  max-width: 740px;
  position: relative;
}

svg {
  width: 100%;
  -webkit-animation-name: rotate;
  -moz-animation-name: rotate;
  -ms-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  -ms-animation-duration: 5s;
  -o-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

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

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

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

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

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

.generator-main {
  padding: 50px 40px 30px;
  text-align: center;
}

.generator-main > h2 {
  text-align: center;
  line-height: 1;
  font-size: 38px;
  margin-bottom: 20px;
}

h3 {
  font-size: 18px;
}

.pagecontainer {
  max-width: 1625px;
  width: 100%;
  min-height: 60vh;
  margin: 0 auto;
}

button {
  /* height: 3.4rem;
  width: 18em;*/
  padding: 1.7em 8em;
  border: transparent;
  background-color: #ffff;
  color: #b8e4f6;
  position: relative;
  border-radius: 80px;
  cursor: pointer;
}

.margin-right {
  margin-right: 3.8em;
}

button > p {
  font-size: 3.4em;
  position: absolute;
  top: -0.3rem;
}

.boytext {
  left: 2.8rem;
  bottom: 9rem;
  right: 0;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.girltext {
  left: 0;
  bottom: 0;
  right: 2.8rem;
}

button:active,
button:focus {
  border: transparent;
  outline: 0;
}

.info-emphasis {
  background: -webkit-linear-gradient(90deg, #f7c4eb, #a0e2ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.h3margin-top {
  margin-top: 5px;
}

.info-container {
  max-width: 1032px;
  min-width: 330px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.info1 {
  min-height: 48vh;
}

.padding-top {
  padding-top: 4rem;
}

.info-container > h3 {
  font-size: 30px;
  text-align: center;
  line-height: 1.3;
}

p {
  line-height: 1.5;
}

@media (min-width: 100px) and (max-width: 550px) {
  header {
    padding-top: 2em;
  }
  svg {
    height: 48px;
    letter-spacing: 8.6px;
  }
  text {
    font-size: 47px;
  }
  h1 {
    font-size: 36px;
  }
  .generator-main {
    padding: 32px 20px 10px;
  }
  .generator-main > h2 {
    font-size: 30px;
  }
  .svgtop-corner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 200px;
  }
  button {
    /* height: 3.4rem;
  width: 18em;*/
    padding: 1.6em 5.4em;
    border: transparent;
    background-color: #ffff;
    color: #b8e4f6;
    position: relative;
    border-radius: 80px;
  }
  .margin-right {
    margin-right: 3em;
  }
  .info-container > h3 {
    font-size: 21px;
    text-align: center;
    line-height: 1.3;
  }
  .info-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

const firstNames = [
  "PudWhacker",
  "Heroinney",
  "Mudslide",
  "Mars Moon",
  "Rumdonkey",
  "720p"
];

const getRandomNumber = (max) => Math.floor(Math.random() * max);

const getRandomName = () => `${firstNames[getRandomNumber(firstNames.length)]}`;
const setRandomName = () => {
  document.getElementById("random-name").innerText = getRandomName();
};

const elements = document.querySelectorAll(".generate");
elements.forEach(function (element) {
  element.addEventListener("click", setRandomName);
});
 setRandomName();