@font-face {
  font-family: "kafontwithserifsfnt";
  src: url("kAssets/kyrn0vgraphics/kFonts/afontwithserifsfont/AFontwithSerifs2.woff2")
      format("woff2"),
    url("kAssets/kyrn0vgraphics/kFonts/afontwithserifsfont/AFontwithSerifs.woff")
      format("woff");
  unicode-range: U+0000-00FF, U+20A0-20CF, U+2000-206F, U+2200-22FF, U+0100-017F;
  font-display: swap;
}

@font-face {
  font-family: "kmaxsomsinfnt";
  src: url("kAssets/kyrn0vgraphics/kFonts/maxsomsinfont/maxsomsinfont2.woff2")
      format("woff2"),
    url("kAssets/kyrn0vgraphics/kFonts/maxsomsinfont/maxsomsinfont.woff")
      format("woff");
  unicode-range: U+0000-00FF, U+20A0-20CF, U+2000-206F, U+2200-22FF, U+0100-017F;
  font-display: swap;
}

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

body {
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

body.kaboutmepage {
  background-image: url("kAssets/kyrn0vgraphics/kIllustrations/kBGs/kAboutmebg/kaboutmepbg.png");
}

.kaboutmepage {
  cursor: url('kAssets/kyrn0vgraphics/kCursors/kcursorsMainPage/kmainpNormalarrwcursor.png') 11 0, auto;
}

#kaboutmecontentui {
  position: relative;
  width: 900px;
  height: 950px;
  margin-top: 5vh;
  margin-bottom: 5vh;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  box-sizing: border-box;
  overflow: visible;
}

#kcabtmedecorg1 {
  all: unset;
  display: contents;
}

#kcabtmedecor1g {
  position: absolute;
  width: 600px;
  height: 478px;
  background-image: url(kAssets/kyrn0vgraphics/kIllustrations/kiUI/kuiAboutMe/kcabtmedecor1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: contain;
  top: 0%;
  left: 0%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  z-index: 3;
}

#kabtmestardecor1 {
  position: absolute;
  width: 105px;
  height: auto;
  top: 8%;
  left: 18%;
  z-index: 4;
  padding: 0;
  margin: 0;
  transform: rotate(-5deg);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  animation: star-pop 900ms steps(2) infinite;
}

@keyframes star-pop {
  0%   { transform: translateY(0) scale(1) rotate(-5deg); }
  50%  { transform: translateY(-6px) scale(1.12) rotate(-12deg); }
  100% { transform: translateY(0) scale(1) rotate(-5deg); }
}

#kabtmenameplate {
  position: absolute;
  width: 140px;
  height: auto;
  top: 43%;
  left: 60%;
  z-index: 5;
  padding: 0;
  margin: 0;
  transform: rotate(5deg);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

#kgabtmedecor2 {
  position: absolute;
  width: 320px;
  height: 374px;
  top: 3%;
  left: 59.5%;
  background-image: url(kAssets/kyrn0vgraphics/kIllustrations/kiUI/kuiAboutMe/kcabtmedecor2.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: contain;
  transform: rotate(5deg);
  z-index: 2;
  padding: 0;
  margin: 0;
  overflow: visible;
  z-index: 5;
}

#kabtmesodacapdc1 {
  position: absolute;
  width: 90px;
  height: auto;
  top: 6%;
  left: 6%;
  z-index: 6;
  padding: 0;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  animation: sodacap-spin 5s linear infinite;
}

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

#kgabtmedecor2 p {
  position: absolute;
  top: 22.5%;
  left: 17%;
  width: 50%;
  height: 51.5%;
  margin: 0;
  padding: 0;
  color: black;
  text-align: center;
  font-family: "kmaxsomsinfnt", sans-serif;
  font-weight: normal;
  font-size: 1.9rem;
  line-height: 1.35rem;
  white-space: normal;
  user-select: text;
  -webkit-user-select: text;
  cursor: auto;
  overflow-y: auto;
}

#kgabtmedecor2 p::-webkit-scrollbar {
  width: 4px;
}

#kgabtmedecor2 p::-webkit-scrollbar-track {
  background: transparent !important;
}

#kgabtmedecor2 p::-webkit-scrollbar-thumb {
  background: #00000088;
  border-radius: 4px;
}

#kcabtmedecor3g {
  position: absolute;
  width: 700px;
  height: 514px;
  top: 48%;
  left: 12%;
  background-image: url(kAssets/kyrn0vgraphics/kIllustrations/kiUI/kuiAboutMe/kcabtmedecor3.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: contain;
  z-index: 3;
  padding: 0;
  margin: 0;
  overflow: visible;
}

#kimgabtmepfp {
  position: absolute;
  width: 195px;
  height: auto;
  top: 8%;
  left: 18%;
  transform: rotate(-8deg);
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  z-index: 1;
}

#kcabtmeIDbdgs {
  position: absolute;
  display: grid;
  grid-template-columns: 90px 90px;
  grid-auto-rows: 16px 16px;
  align-content: start;
  justify-content: start;
  gap: 3px;
  width: 185px;
  height: 120px;
  top: 62%;
  left: 54%;
  z-index: 5;
  padding: 0;
  margin: 0;
  transform: rotate(10.5deg);
  overflow-x: hidden;
  overflow-y: auto;
}

#kcabtmeIDbdgs::-webkit-scrollbar {
  width: 4px;
}

#kcabtmeIDbdgs::-webkit-scrollbar-track {
  background: transparent !important;
}

#kcabtmeIDbdgs::-webkit-scrollbar-thumb {
  background: #00000088;
  border-radius: 4px;
}

#kcabtmeIDbdgs img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  display: block;
  object-fit: contain;
}

.kabtmePage {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.kabtmePageActive {
  display: block;
}

#kabtmeNavLeft,
#kabtmeNavRight {
  position: absolute;
  top: 50%;
  width: 60px;
  height: 60px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
}

#kabtmeNavLeft {
  left: 5%;
}

#kabtmeNavRight {
  right: 5%;
}

#kabtmeNavDots {
  position: absolute;
  bottom: 17%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.kabtmeDot {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}

.kabtmeDotActive {
  background-color: rgb(255, 255, 255);
}

#kabtmepg1ldhs {
  width: 610px;
  height: 305px;
  position: absolute;
  top: 16%;
  left: 15%;
  display: flex;
  gap: 20px;
}

.kabtmepg1ColGroup {
  width: 150px;
  flex: 0 0 150px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.kabtmepg1ColTitle {
  text-align: center;
  margin: 0;
  padding: 0;
  min-height: 50px;
  max-height: 50px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.kabtmepg1ColTitle img {
  margin: 0;
  padding: 0;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

#kabtmehobbiestl {
  width: 119px;
  height: auto;
}

#kabtmelikestl {
  width: 100px;
  height: auto;
}

#kabtmedislikestl {
  width: 120px;
  height: auto;
}

.kabtmepg1ColList {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.kabtmepg1ColList::-webkit-scrollbar {
  width: 4px;
}

.kabtmepg1ColList::-webkit-scrollbar-track {
  background: transparent !important;
}

.kabtmepg1ColList::-webkit-scrollbar-thumb {
  background: #ffffffad;
  border-radius: 4px;
}

.kabtmepg1Row {
  min-height: 30px;
  text-align: left;
  padding: 0;
  margin: 5px 0 0 0;
  cursor: auto;
  display: flex;
  align-items: center;
}

.kabtmepg1Row p {
  padding: 0;
  margin: 0;
  font-family: "kafontwithserifsfnt", sans-serif;
  font-weight: normal;
  font-size: 1.3rem;
  line-height: 1.1rem;
  white-space: normal;
  color: rgba(143, 61, 99, 0.849);
  user-select: text;
  -webkit-user-select: text;
  flex-grow: 0; 
  flex-shrink: 1;
  flex-basis: min-content;
  width: max-content; 
  max-width: 100%;
}

.kabtmerowIconFirst1C {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
  object-fit: contain;
  margin: 0 7px 0 0;
  content: url("kAssets/kyrn0vgraphics/kIllustrations/kiUI/kuiAboutMe/kabtmehobbiesheart.gif");
}

.kabtmerowIconFirst2C {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
  object-fit: contain;
  margin: 0 7px 0 0;
  content: url("kAssets/kyrn0vgraphics/kIllustrations/kiUI/kuiAboutMe/kabtmelikesstar.gif");
}

.kabtmerowIconFirst3C {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
  object-fit: contain;
  margin: 0 7px 0 0;
  content: url("kAssets/kyrn0vgraphics/kIllustrations/kiUI/kuiAboutMe/kabtmedislikesskull.gif");
}

.kabtmerowIconSecond1C {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
  object-fit: contain;
  margin: 0 0 0 4px;
}

.kabtmerowIconSecond2C {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
  object-fit: contain;
  margin: 0 0 0 4px;
}

.kabtmerowIconSecond3C {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
  object-fit: contain;
  margin: 0 0 0 4px;
}