html {
  font-size: 14px;
}
body {
  background-color: #221442;
  background-image:
    url('https://bettysgraphics.neocities.org/images/backgrounds/884.GIF');
  background-repeat: repeat;
  
  font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif;
  color: #FFC81F;
  
  margin:0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  scrollbar-width: auto;
  scrollbar-color: #e7a413 #0c2707;
}

body, a, a:hover { 
  cursor:
    url('http://media.tumblr.com/a94857fe5f69805f087976bcb65a918d/tumblr_inline_mglchwGHZZ1qkezse.png'),
    auto;
}


/* GRIDS */

.WRAPPER {
  width: 1050px;
  max-width: 95%;
  margin: auto;
  
  display: grid;
  grid-template-areas:
    "header       header  header"
    "top-left     main    right"
    "bottom-left  main    right"
    "footer       footer  footer";
  grid-template-columns:
    /* 280px 650px 280px; */
    1fr 50% 1fr;
  grid-template-rows:
    max-content
    minmax(350px, 30vh)
    auto
    1fr;
  gap: 1rem;
}

#header {grid-area: header}
#bugs {grid-area:top-left}
#main {grid-area: main}
#stamps {grid-area: right}
#countdown {grid-area: bottom-left}
#footer {grid-area: footer}

#header .navheader {
  max-width: 50%;
  position: relative;
  top: .75rem;
  margin-left:auto;
  margin-right:auto;
  display: grid;
  grid-template-areas:
    "left-cat meme-cat right-dog"
    "btm-cats btm-cats btm-cats "
    "nav      nav      nav      ";
  grid-template-rows:
    fit-content
    fit-content
    fit-content
    ;
  grid-template-columns:
    1fr 1fr 1fr;
  gap:0;
}

#header .left-cat {grid-area: left-cat}
#header .meme-cat {grid-area: meme-cat}
#header .right-dog {grid-area: right-dog}
#header .btm-cats {grid-area: btm-cats}
#header #navigation {grid-area: nav}




/* useful classes */

.text-center {
  text-align: center;
}
.box {
  background-color: #000b;
  box-sizing: border-box;
}
.pad {
  padding: 10px;
}
.yellow-tape {
  background-color: yellow;
  color: black;
}
.margin-btm{
  margin-bottom: 1rem;
}
img {
  max-width: 100%;
  width: fit-content;
}
h1 {
  margin-top:0;
}
h2 {
  margin:0;
  font-size: 1.15rem;
  font-weight: normal;
}
a {
  color: #FCD867;
}





/* HEADER */

.left-cat,
.meme-cat,
.right-dog,
.btm-cats {
  width: 100%;
  max-width: 100%;
}




/* BUGS */

#bugs {
  position: relative;
  min-height: 300px;
}

#bugs img {
  position: absolute;
  height: 100px;
  max-width: 150px;
  max-height: 20vh;
  width: auto;
  object-fit: contain;
  z-index: 8000;
  touch-action: none;
  user-select: none;
}


/* WELCOME */

#main .welcome-imgs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
#main .welcome-imgs > div {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#main .welcome-imgs .dollcats {
  flex: 25%;
  margin: auto 5%;
}

  /* BUTTON */
#main .my-button {
  margin-bottom: 1rem;
  margin-top: auto;
  font-size: 10px;
}
#main .my-button img {
  flex: initial;
  max-width: 100%;
  margin: .25rem auto;
}
#main .my-button textarea {
  width: 100%;
  height: 36px;
  max-width: 80px;
  background-color: black;
  font-size: inherit;
  color: #ffc81f;
  border: 2px solid #ffc81f;
}

  /* WELCOME IMAGES */
#main .mewtwo {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-bottom: 15%;
}
#main .lavalamp {
  position: absolute;
  bottom: 0;
  right:-15%;
  max-width: 20%;
  z-index: 2;
}
#main .furby {
  width: 275%;
  max-width: 275%;
  position: absolute;
  top: 0;
  transform: translateY(-50%);
}

/* STAMPS */

#stamps {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
#stamps img {
  flex: none;
  max-width: 50%;
}






/* BIRTHDAY COUNTDOWN */

#countdown{
  position: relative;
  height: fit-content;
}
#countdown figure {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  margin:0;
  padding:0;
  border:0;
  z-index: -1;
} /* use .balloonbob to adjust spongebob and balloons.
  ignore .balloons and .spongebob */

#countdown .balloonbob {
  position: absolute;
  width: 33%;
  padding: 0;
  margin:0;
  left:0;
  bottom: 25%;
}
#countdown .eekcat {
  position: absolute;
  width: 25%;
  right: .5rem;
  top: 1.5rem;
}

#countdown h2 {
  line-height:1;
  margin:0;
}
#countdown p {
  line-height:1;
  margin:0;
  margin-top: 1em;
}
#countdown .day,
#countdown .hour,
#countdown .minute,
#countdown .img-text {
  display: inline-block;
  text-align: center;
  vertical-align: top;
}
#countdown .day span,
#countdown .day small,
#countdown .hour span,
#countdown .hour small,
#countdown .minute span,
#countdown .minute small {
  display: block;
}

#countdown .balloons {
  position: absolute;
  width: 152%;
  top:-55%;
  left:-35%;
  z-index: -1;
}
#countdown .spongebob {
  width: 100%;
}



/* KARKALICIOUS */

body.karkalicious {
  background-color: #1f2f16;
  background-image:
    url('https://bettysgraphics.neocities.org/images/backgrounds/573.GIF');
}

.WRAPPER.karkalicious {
  display: grid;
  grid-template-areas:
    "left main right"
    "footer footer footer";
  grid-template-columns:
    314px 1fr 314px;
  grid-template-rows:
    minmax(auto,auto)
    minmax(auto,auto);
  gap: 1rem;
  
  margin-bottom: 1rem;
}

#aminegrls {grid-area: left}
#paintings {grid-area: right}

.ifeel img {
  display: block;
  margin: 1rem auto;
}

.aboutme {
  height: 140px;
  width: 90%;
  max-width: 350px;
  overflow: auto;
  text-align: justify;
  background-color: #0005;
  padding: 0 .25rem;
  margin: 1rem auto;
}

.aboutcats {
  position: relative;
  width: 40%;
  margin: auto;
}
.catpainting {
  width: 80%;
  margin: auto auto auto 20%;
}
.luckycat {
  position: absolute;
  width: 35%;
  left: -18%;
  bottom: 15%;
}

.backbutton {
  position: relative;
  width: fit-content;
  margin: auto;
}

.backbutton small {
  position: absolute;
  left:-4.25rem;
  bottom:0;
  max-width: 4rem;
  display: inline-block;
}

.karkalicious #aminegrls,
.karkalicious #paintings,
.karkalicious #main {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.bluediv,
.ilovemillipedes,
.animegirl,
.greendiv {
  display: block;
  max-width: 100%;
  margin: 1rem auto;
}
.neppet {
  background:
    url(https://files.catbox.moe/0aysth.png);
  width:315px;
  height: 320px;
  margin: 1rem auto;
}
.neppet iframe {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}
.neppet small {
  display: block;
  line-height:1;
  font-size: 11px;
  text-align: center;
}

.compcat {
  margin:auto;
  padding:0;
  border:0;
  display: flex;
  flex-direction: column;
}

.footerimages {
  display: grid;
  grid-template-columns: 
    315px 1fr 315px;
  gap: 1rem;
}
.footerimages img {
  margin: auto;
  width: 100%;
  max-width: 315px;
}










/* smaller screens */

@media (max-width: 925px) {
  .WRAPPER {
    gap: .5rem;
  }
  
  #header .navheader{
    max-width: 650px;
    margin: auto;
    top: .25rem;
  }
  
  .WRAPPER.karkalicious {
    grid-template-areas:
      "main left"
      "right right"
      "footer footer";
    grid-template-columns:
      50% 1fr;
    gap: .5rem;
  }
  
  .karkalicious #paintings {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-top: 1rem;
  }
  #paintings .ilovemillipedes,
  #paintings .compcat {
    max-width: 45%;
  }
  
  .footerimages {
    display: grid;
    grid-template-columns: 
      1fr 1fr 1fr;
    gap: .5rem;
  }
  
}

@media (max-width: 685px) {
  .WRAPPER {
    grid-template-areas:
      "header       header"
      "top-left     right"
      "main         right"
      "bottom-left  right"
      "footer       footer";
    grid-template-columns:
      70% 1fr;
    grid-template-rows:
      auto
      auto
      1fr
      auto
      auto;
  }
  .WRAPPER.karkalicious {
    grid-template-areas:
      "main"
      "left"
      "right"
      "footer";
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  #main .welcome-imgs {
    flex-wrap: wrap;
  }
  #main .welcome-imgs > div.my-button {
    flex: 100%;
  }
  #main .dollcats {
    width: 50%;
  }
  #main .furby {
    transform: translate(0,-65%);
  }
    
  #stamps img {
    max-width: 100%;
  }
  
}

@media (max-width: 335px) {
  .karkalicious.WRAPPER {
    max-width: 100%;
    padding:0;
  }
}