/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  background-color:#dff8eb;
  color:#ffcaed;
  font-family: pixelify sans;
  font-size: 22px;
  background-image: url("peep.gif");
  cursor: url("jointmouse.png"), auto;
}

html {
  overflow-y: scroll;
}

a {
  color:#ffcaed;
  }
  
a:active {
  color:#ffcaed;
}
  




* {
  box-sizing: border-box;
}


.website {
  width: 1026px;
  margin: 10px auto;
}




header {
  height: 180px;
  background-color: #dff8eb;
  padding: 20px;
  border-style: solid;
  border-color: #ffcaed;
  border-width: 6px 6px 3px 6px;
}

header h1 {
  font-family: "Pixelify Sans";
  font-size: 85px;
  margin: 0;
  padding: 10px;
  text-align: center;
  line-height: 1;
}




.content {
  display: flex;
}



.left-sidebar {
  width: 220px;
  height: 580px;
  background-color: #dff8eb;
  padding: 6px;
  border-style: solid;
  border-color: #ffcaed;
  border-width: 3px 3px 6px 6px;
  box-sizing: border-box;
}

.menu {
  width: 100%;
  text-align: center;
}

/* Little box around the MENU heading */
.menu-title {
  height: 55px;
  width: calc(100% + 12px);
  margin: -6px 0 10px -6px;
  background-color: white;
  border-bottom: 5px solid #ffcaed;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  
  
}


.menu-title h2 {
  margin: 0;
  text-align: center;
  font-size: 30px;
  color: #ffcaed;  
}



/* Menu buttons */
.menu-links button {
  margin: 10px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}





.right-sidebar {
  width: 220px;
  height: 580px;
  background-color: #dff8eb;
  padding: 8px;
  border-style: solid;
  border-color: #ffcaed;
  border-width: 3px 6px 6px 3px;
  overflow-y: auto;
}






main {
  text-align: center;
  flex: 1;
  height: 580px;
  background-color: #dff8eb;
  padding: 15px;
  border-style: solid;
  border-color: #ffcaed;
  border-width: 3px 3px 6px 3px;
  overflow-y: auto;
  }

.cbox-container {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #ffd6e7;
  padding: 10px;
}


.cbox-container iframe {
  display: block;
  width: 100%;
  height: 500px;
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

.inner-box .cbox-container {
  width: 100%;
  height: 300px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #ffd6e7;
}

.inner-box .cbox-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
}

button {
  background-color: #FFFFFF;
  color: #ffcaed;
  font-family: "Pixelify Sans";
  font-size: 28px;
  border: 3px solid #FFFFFF;
  border-radius: 10px;
  margin: 10px;
  width: 170px;
  height: 70px;
  cursor: url("jointmouse.png"), auto;
  transition: opacity 0.15s, color 1s;
  
}

button a {
  color: inherit;
  text-decoration: none;
  
}

button:hover {
  background-color: #ffcaed;;
  color: #ffffff;
  opacity: 0.5;
}

button:active {
  background-color: #ffcaed;;
  color: #ffffff;
  opacity: 1;
}




.blinkie-box {
  width: 160px;
  height: 200px;
  overflow: hidden;
  background-color: white;
  border-radius: 12px;
  margin: 0 auto;
}




.blinkie-scroll {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: blinkie-scroll 6s ease-in-out infinite alternate;
}

.blinkie-scroll img {
  width: 160px;
  height: auto;
  flex-shrink: 0;
}
.blinkie-box:hover .blinkie-scroll {
  animation-play-state: paused;
}

@keyframes blinkie-scroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}


/* =========================
   SCROLLING STAMP BOX
   ========================= */

.stamp-box {
  width: 100%;
  height: 80px;

  border: solid #ffcaed;
  border-width: 3px 6px;

  overflow: hidden;

  display: flex;
  align-items: center;

  padding: 5px 0;

  background-color: transparent;
}


.stamp-scroll {
  display: flex;
  align-items: center;

  gap: 6px;

  width: max-content;
  flex-shrink: 0;

  animation: stamp-scroll 8s ease-in-out infinite alternate;
}


.stamp-scroll img {
  display: block;

  height: 70px;
  width: auto;

  flex-shrink: 0;

  object-fit: contain;
}


.stamp-box:hover .stamp-scroll {
  animation-play-state: paused;
}


@keyframes stamp-scroll {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--scroll-distance));
  }

}

/* ========================================
   MIDDLE BOX
   ======================================== */

.middle-box {
  width: 1026px;
  margin: 20px auto;
  padding: 15px;
  background-color: #dff8eb;
  border: 6px solid #ffcaed;
  box-sizing: border-box;
}


/* ========================================
   INNER BOXES CONTAINER
   ======================================== */

.inner-boxes {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}


/* ========================================
   SHINX BOX
   Customize this box independently
   ======================================== */

.shinx-box {
  width: 314px;
  height: 350px;

  flex: none;

  padding: 10px;

  background-color: #ffffff;
  border: 3px solid #ffcaed;
  border-radius: 10px;

  box-sizing: border-box;

  text-align: center;
}


/* Make the Shinx iframe fit its box */

.shinx-box iframe {
  display: block;

  width: 314px;
  height: 321px;

  border: 0;

  margin: 0 auto;
}


/* ========================================
   CHAT BOX
   ======================================== */

.chatbox69 {
  width: 400px;
  height: 400px;

  flex: none;

  padding: 10;

  background-color: #ffd6e7;
  border: 3px solid #ffcaed;
  border-radius: 10px;

  box-sizing: border-box;

  /* Centers the chat iframe inside this box */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* EXACT CHAT SIZE: 400px × 400px */

.chatbox69 iframe {
  display: block;

  width: 400px;
  height: 400px;

  border: 2px solid #ffcaed;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
}


/* ========================================
   TAMANOTCHI BOX
   Customize this box independently
   ======================================== */

.tamanotchi-box {
  width: 180px;
  height: 350px;

  flex: none;

  padding: 10px;

  background-color: #ffffff;
  border: 3px solid #ffcaed;
  border-radius: 10px;

  box-sizing: border-box;

  text-align: center;
}