:root {
  --yellow: #fff338;
  --deep-pink: #f21170;
  --aquamarine: #0fd;
  --purple: #5800ff;
  --white: white;
}

.gfbody {
  background-image: url('../images/galaga.png');
  background-position: 50% 0;
  background-size: contain;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.yellowtxt {
  z-index: 2;
  width: 100%;
  color: var(--yellow);
  flex-direction: column;
  flex: 0 auto;
  align-self: center;
  align-items: center;
  font-family: Kongtext, sans-serif;
  font-size: 22px;
  display: flex;
  position: absolute;
}

.pinktxt {
  z-index: 1;
  width: 100%;
  color: var(--deep-pink);
  flex-direction: column;
  align-items: center;
  margin-top: 3px;
  font-family: Kongtext, sans-serif;
  font-size: 22px;
  display: flex;
  position: absolute;
}

.txtcon {
  width: 360px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 27px;
  display: flex;
  position: relative;
}

.pinktxt2 {
  z-index: 1;
  width: 100%;
  color: var(--deep-pink);
  flex-direction: column;
  align-items: center;
  margin-top: 4.5px;
  font-family: Kongtext, sans-serif;
  font-size: 22px;
  display: flex;
  position: absolute;
}

.image {
  width: 400px;
  margin-top: 15px;
  margin-bottom: 20px;
}

.image-2 {
  margin-bottom: 10px;
}

.blutxt {
  z-index: 2;
  width: 100%;
  color: var(--aquamarine);
  flex-direction: column;
  flex: 0 auto;
  align-self: center;
  align-items: center;
  font-family: Kongtext, sans-serif;
  font-size: 22px;
  display: flex;
  position: absolute;
}

.purptxt {
  z-index: 1;
  width: 100%;
  color: var(--purple);
  flex-direction: column;
  align-items: center;
  margin-top: 3px;
  font-family: Kongtext, sans-serif;
  font-size: 22px;
  display: flex;
  position: absolute;
}

.purptxt2 {
  z-index: 1;
  width: 100%;
  color: var(--purple);
  flex-direction: column;
  align-items: center;
  margin-top: 4.5px;
  font-family: Kongtext, sans-serif;
  font-size: 22px;
  display: none;
  position: absolute;
}

.txtcon__bottom {
  width: 360px;
  flex-direction: column;
  align-items: center;
  margin-top: 140px;
  padding-bottom: 60px;
  display: flex;
  position: relative;
}

.whitetxt {
  z-index: 2;
  width: 100%;
  color: var(--white);
  flex-direction: column;
  flex: 0 auto;
  align-self: center;
  align-items: center;
  font-family: Kongtext, sans-serif;
  font-size: 18px;
  display: flex;
  position: absolute;
}

.purptxt_sm {
  z-index: 1;
  width: 100%;
  color: var(--purple);
  flex-direction: column;
  align-items: center;
  margin-top: 3px;
  font-family: Kongtext, sans-serif;
  font-size: 18px;
  display: flex;
  position: absolute;
}

.purptxt_sm2 {
  z-index: 1;
  width: 100%;
  color: var(--purple);
  flex-direction: column;
  align-items: center;
  margin-top: 4.5px;
  font-family: Kongtext, sans-serif;
  font-size: 18px;
  display: flex;
  position: absolute;
}

@media screen and (max-width: 479px) {
  .yellowtxt, .pinktxt {
    font-size: 18px;
  }

  .txtcon {
    width: 300px;
    padding-bottom: 22px;
  }

  .pinktxt2 {
    font-size: 18px;
    display: none;
  }

  .image, .image-2 {
    width: 300px;
  }

  .blutxt, .purptxt, .purptxt2 {
    font-size: 18px;
  }

  .txtcon__bottom {
    width: 300px;
  }

  .whitetxt, .purptxt_sm {
    font-size: 14px;
  }
}


@font-face {
  font-family: 'Kongtext';
  src: url('../fonts/kongtext.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}